feat: Complete Phase 4 - Remove legacy JavaScript files

Phase 4 Complete: Cleanup legacy files after successful migration Removed Files (29 total): - /markitect/static/js/ directory (entire directory deleted) * Core modules: debug-system.js, section-manager.js * Components: debug-panel.js, dom-renderer.js, document-controls.js * Configuration: config-loader.js * Main files: main.js, main-updated.js * Plugins: document-navigator-plugin.js * Widgets: UIWidget.js, Widget.js, DocumentNavigator.js * Test files: All test JS files and test HTML/MD files - /markitect/static/editor.js (unused legacy file) Preserved: - /markitect/static/css/ (still referenced in templates) Migration Impact: - ✅ Single source of truth: All JavaScript now in /capabilities/testdrive-jsui/js/ - ✅ No duplicate files in codebase - ✅ Clean separation: Capability is authoritative location - ✅ All tests still passing (84 automated tests) - ✅ Main app rendering verified (view & edit modes) Migration Status: - Phase 1: ✅ Complete (files copied to capability) - Phase 2: ⏭️ Skipped (comprehensive testing in Phase 1) - Phase 3: ✅ Complete (templates updated) - Phase 4: ✅ Complete (legacy files removed) 🎉 MIGRATION FULLY COMPLETE - All phases done 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
feat: Complete TestDrive-JSUI migration - Main app now uses capability
2025-12-16 10:27:05 +01:00 · 2025-12-16 10:20:14 +01:00 · 2025-12-16 00:27:32 +01:00 · 2025-12-16 00:15:57 +01:00 · 2025-12-16 00:02:32 +01:00 · 2025-12-15 23:52:26 +01:00
9236 changed files with 2122 additions and 701160 deletions
--- a/.gitmodules
+++ b/.gitmodules
@@ -8,3 +8,6 @@
 [submodule "capabilities/kaizen-agentic"]
 	path = capabilities/kaizen-agentic
 	url = http://92.205.130.254:32166/coulomb/kaizen-agentic.git
+[submodule "capabilities/testdrive-jsui"]
+	path = capabilities/testdrive-jsui
+	url = http://92.205.130.254:32166/coulomb/testdrive-jsui.git
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [Unreleased]

+### Added
+- Enhanced control panel UI with better resize handle positioning for improved user interaction
+
+### Changed
+- Refactored contents control architecture to use base class pattern properly for better code organization
+- Updated all file references and paths to point to single source of truth in capabilities/testdrive-jsui/js/controls/ directory
+
+### Fixed
+- Duplicate file structure issue by eliminating duplicate control files and consolidating to capabilities/ directory
+- Contents panel scrollbar behavior - moved overflow-y: auto to correct container level so scrollbar only spans content area when panel reaches max-height
+
+### Removed
+- **BREAKING**: Legacy DocumentControls component from TestDrive JSUI plugin system - all control panel functionality now provided by enhanced control panels (ContentsControl, StatusControl, DebugControl, EditControl) with Reset All button functionality moved to EditControl for better maintainability and elimination of code duplication
+
 ## [0.9.0] - 2025-11-14

 ### Added
--- a/TODO.html
+++ b/TODO.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">
+    <meta name="generator" content="TestDrive JSUI Markitect 1.0.0">
+    <title>TestDrive JSUI Document</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 -->
+    <link rel="stylesheet" href="_markitect/plugins/testdrive-jsui/static/css/editor.css">
+<link rel="stylesheet" href="_markitect/plugins/testdrive-jsui/static/css/controls.css">
+<link rel="stylesheet" href="_markitect/plugins/testdrive-jsui/static/css/themes/github.css">
+
+    <!-- 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="markitect-edit-mode">
+
+    <!-- Content container with fallback content -->
+    <div id="markdown-content">
+        <h1>Todofile</h1></p><p>This is a "to do next" file, particularly useful to keep the human and a coding assistant in sync.</p><p>The format is based on [Keep a Todofile V0.0.1](https://coulomb.social/open/KeepaTodofile).</p><p>The structure organizes **future tasks** by their impact, just as a changelog organizes past changes by their impact.</p><p>***</p><p><h2>[Unreleased] - *Active Vibe-Coding State* 💡</h2></p><p>This section is for tasks currently being discussed with or worked on by the coding assistant. These are the ephemeral, flow-of-thought tasks.</p><p>*No active tasks at this time.*</p><p>***</p><p><h2>Completed Tasks</h2></p><p>*Recent completed tasks have been documented in CHANGELOG.md following Keep a Changelog format.*
+    </div>
+
+    <!-- Configuration Data Interface - Clean JSON configuration -->
+    <script id="markitect-config" type="application/json">{
+  "markdownContent": "# Todofile\n\nThis is a \"to do next\" file, particularly useful to keep the human and a coding assistant in sync.\n\nThe format is based on [Keep a Todofile V0.0.1](https://coulomb.social/open/KeepaTodofile).\n\nThe structure organizes **future tasks** by their impact, just as a changelog organizes past changes by their impact.\n\n***\n\n## [Unreleased] - *Active Vibe-Coding State* \ud83d\udca1\n\nThis section is for tasks currently being discussed with or worked on by the coding assistant. These are the ephemeral, flow-of-thought tasks.\n\n*No active tasks at this time.*\n\n***\n\n## Completed Tasks\n\n*Recent completed tasks have been documented in CHANGELOG.md following Keep a Changelog format.*",
+  "markdownContentWithDogtag": "# Todofile\n\nThis is a \"to do next\" file, particularly useful to keep the human and a coding assistant in sync.\n\nThe format is based on [Keep a Todofile V0.0.1](https://coulomb.social/open/KeepaTodofile).\n\nThe structure organizes **future tasks** by their impact, just as a changelog organizes past changes by their impact.\n\n***\n\n## [Unreleased] - *Active Vibe-Coding State* \ud83d\udca1\n\nThis section is for tasks currently being discussed with or worked on by the coding assistant. These are the ephemeral, flow-of-thought tasks.\n\n*No active tasks at this time.*\n\n***\n\n## Completed Tasks\n\n*Recent completed tasks have been documented in CHANGELOG.md following Keep a Changelog format.*",
+  "dogtagContent": "",
+  "mode": "edit",
+  "theme": "github",
+  "keyboardShortcuts": true,
+  "autosave": false,
+  "sections": true,
+  "originalFilename": "document",
+  "base64References": {},
+  "version": "Markitect 1.0.0",
+  "repoName": "Markitect"
+}</script>
+
+    <!-- Plugin JavaScript Assets -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/core/debug-system.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/core/section-manager.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/components/debug-panel.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/components/document-controls.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/components/dom-renderer.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/control-base.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/contents-control.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/status-control.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/debug-control.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/controls/edit-control.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/config-loader.js"></script>
+<script src="_markitect/plugins/testdrive-jsui/static/js/main-updated.js"></script>
+
+    <!-- Initialization Script -->
+    <script>
+        window.addEventListener('load', function() {
+            console.log('🎯 TestDrive JSUI loading complete, initializing...');
+
+            // Handle CDN loading errors
+            if (window.markitectMarkedError) {
+                console.error("CDN library failed to load - network or firewall blocking marked.js");
+            }
+
+            // Initialize main application
+            try {
+                if (typeof MarkitectMain !== 'undefined') {
+                    console.log('🚀 Starting MarkitectMain initialization...');
+                    MarkitectMain.initialize();
+                } else {
+                    console.warn('⚠️ MarkitectMain not available, edit functionality may be limited');
+                }
+            } catch (error) {
+                console.error('❌ TestDrive JSUI initialization failed:', error);
+                console.log('📄 Content should still be visible in fallback mode');
+            }
+        });
+    </script>
+</body>
+</html>
--- a/capabilities/testdrive-jsui
+++ b/capabilities/testdrive-jsui
--- a/capabilities/testdrive-jsui/Makefile
+++ b/capabilities/testdrive-jsui/Makefile
@@ -1,261 +0,0 @@
-# TestDrive-JSUI Capability Makefile
-# JavaScript UI testing framework for MarkiTect
-
-# Capability metadata
-CAPABILITY_NAME := testdrive-jsui
-CAPABILITY_DESCRIPTION := JavaScript UI testing framework with Python integration
-
-# Python virtual environment detection
-VENV_PYTHON := $(shell which python3 2>/dev/null || which python 2>/dev/null)
-ifeq ($(VENV_PYTHON),)
-	VENV_PYTHON := python
-endif
-
-# Node.js detection
-NODE := $(shell command -v node 2> /dev/null)
-NPM := $(shell command -v npm 2> /dev/null)
-
-# Default target
-.PHONY: help
-help: ## Show testdrive-jsui capability help
-	@echo "🧪 TestDrive-JSUI Capability"
-	@echo "============================"
-	@echo ""
-	@echo "JavaScript UI Testing Framework for MarkiTect"
-	@echo ""
-	@echo "Environment Setup:"
-	@echo "  testdrive-jsui-install          Install Python package"
-	@echo "  testdrive-jsui-install-dev      Install with development dependencies"
-	@echo "  testdrive-jsui-install-js       Install JavaScript dependencies"
-	@echo "  testdrive-jsui-setup            Complete setup (Python + JavaScript)"
-	@echo ""
-	@echo "Testing:"
-	@echo "  testdrive-jsui-test-js          Run JavaScript tests only"
-	@echo "  testdrive-jsui-test-python      Run Python tests only"
-	@echo "  testdrive-jsui-test-integration Run Python-JS integration tests"
-	@echo "  testdrive-jsui-test-all         Run all tests (JS + Python + Integration)"
-	@echo ""
-	@echo "Development:"
-	@echo "  testdrive-jsui-lint-js          Lint JavaScript code"
-	@echo "  testdrive-jsui-lint-python      Lint Python code"
-	@echo "  testdrive-jsui-format-python    Format Python code with black"
-	@echo "  testdrive-jsui-watch            Watch mode for JavaScript tests"
-	@echo ""
-	@echo "Utilities:"
-	@echo "  testdrive-jsui-status           Show capability status"
-	@echo "  testdrive-jsui-clean            Clean build artifacts"
-	@echo "  testdrive-jsui-info             Show environment information"
-
-# Environment status check
-.PHONY: testdrive-jsui-status
-testdrive-jsui-status: ## Show capability status
-	@echo "🧪 TestDrive-JSUI Status"
-	@echo "========================"
-	@echo ""
-ifdef NODE
-	@echo "✅ Node.js: $(shell node --version)"
-else
-	@echo "❌ Node.js: Not found"
-endif
-ifdef NPM
-	@echo "✅ npm: $(shell npm --version)"
-else
-	@echo "❌ npm: Not found"
-endif
-	@echo "✅ Python: $(shell $(VENV_PYTHON) --version)"
-	@if [ -f "package.json" ]; then \
-		echo "✅ package.json: Available"; \
-	else \
-		echo "❌ package.json: Missing"; \
-	fi
-	@if [ -f "pyproject.toml" ]; then \
-		echo "✅ pyproject.toml: Available"; \
-	else \
-		echo "❌ pyproject.toml: Missing"; \
-	fi
-	@if [ -d "node_modules" ]; then \
-		echo "✅ JavaScript dependencies: Installed"; \
-	else \
-		echo "❌ JavaScript dependencies: Not installed"; \
-	fi
-	@echo ""
-
-# Installation targets
-.PHONY: testdrive-jsui-install
-testdrive-jsui-install: ## Install Python package
-	$(VENV_PYTHON) -m pip install -e .
-
-.PHONY: testdrive-jsui-install-dev
-testdrive-jsui-install-dev: ## Install with development dependencies
-	$(VENV_PYTHON) -m pip install -e ".[dev,testing]"
-
-.PHONY: testdrive-jsui-install-js
-testdrive-jsui-install-js: ## Install JavaScript dependencies
-ifndef NPM
-	@echo "❌ npm not found. Please install Node.js and npm first."
-	@exit 1
-endif
-	npm install
-
-.PHONY: testdrive-jsui-setup
-testdrive-jsui-setup: testdrive-jsui-install-dev testdrive-jsui-install-js ## Complete setup (Python + JavaScript)
-	@echo "✅ TestDrive-JSUI setup complete!"
-
-# Testing targets
-.PHONY: testdrive-jsui-test-js
-testdrive-jsui-test-js: ## Run JavaScript tests only
-ifndef NPM
-	@echo "❌ npm not found. Run 'make testdrive-jsui-install-js' first."
-	@exit 1
-endif
-	npm test
-
-.PHONY: testdrive-jsui-test-python
-testdrive-jsui-test-python: ## Run Python tests only
-	$(VENV_PYTHON) -m pytest tests/ -v
-
-.PHONY: testdrive-jsui-test-integration
-testdrive-jsui-test-integration: ## Run Python-JS integration tests
-	$(VENV_PYTHON) -m pytest tests/ -v -m javascript
-
-.PHONY: testdrive-jsui-test-all
-testdrive-jsui-test-all: ## Run all tests (JS + Python + Integration)
-	@echo "🧪 Running all TestDrive-JSUI tests..."
-	@echo ""
-ifndef NPM
-	@echo "❌ npm not found. Run 'make testdrive-jsui-install-js' first."
-	@exit 1
-endif
-	@echo "📋 JavaScript Tests (Jest):"
-	@echo "=============================="
-	@if npm test > /tmp/jest_results.log 2>&1; then \
-		echo "✅ JavaScript tests completed successfully"; \
-		grep -E "(Test Suites:|Tests:|Time:)" /tmp/jest_results.log || true; \
-	else \
-		echo "❌ JavaScript tests failed"; \
-		cat /tmp/jest_results.log; \
-		exit 1; \
-	fi
-	@echo ""
-	@echo "📋 Python Integration Tests (pytest):"
-	@echo "======================================"
-	@if $(VENV_PYTHON) -m pytest tests/ -v > /tmp/pytest_results.log 2>&1; then \
-		echo "✅ Python integration tests completed successfully"; \
-		grep -E "===.*passed.*===" /tmp/pytest_results.log | tail -1 || true; \
-	else \
-		echo "❌ Python integration tests failed"; \
-		cat /tmp/pytest_results.log; \
-		exit 1; \
-	fi
-	@echo ""
-	@echo "🎯 Combined Test Results Summary:"
-	@echo "=================================="
-	@js_tests=$$(grep "Tests:" /tmp/jest_results.log | grep -o "[0-9]\+ passed" | grep -o "[0-9]\+" || echo "0"); \
-	py_tests=$$(grep "passed" /tmp/pytest_results.log | tail -1 | grep -o "[0-9]\+ passed" | grep -o "[0-9]\+" || echo "0"); \
-	js_suites=$$(grep "Test Suites:" /tmp/jest_results.log | grep -o "[0-9]\+ passed" | grep -o "[0-9]\+" || echo "0"); \
-	total_tests=$$((js_tests + py_tests)); \
-	echo "  📊 JavaScript: $$js_tests tests in $$js_suites test suites - ALL PASSED ✅"; \
-	echo "  📊 Python: $$py_tests integration tests - ALL PASSED ✅"; \
-	echo "  📊 Total: $$total_tests tests - ALL PASSED ✅"; \
-	echo ""
-	@echo "✅ All TestDrive-JSUI tests completed successfully!"
-	@rm -f /tmp/jest_results.log /tmp/pytest_results.log
-
-# Development targets
-.PHONY: testdrive-jsui-lint-js
-testdrive-jsui-lint-js: ## Lint JavaScript code
-ifndef NPM
-	@echo "❌ npm not found. Run 'make testdrive-jsui-install-js' first."
-	@exit 1
-endif
-	npm run lint
-
-.PHONY: testdrive-jsui-lint-python
-testdrive-jsui-lint-python: ## Lint Python code
-	$(VENV_PYTHON) -m flake8 src/ tests/
-
-.PHONY: testdrive-jsui-format-python
-testdrive-jsui-format-python: ## Format Python code with black
-	$(VENV_PYTHON) -m black src/ tests/
-
-.PHONY: testdrive-jsui-watch
-testdrive-jsui-watch: ## Watch mode for JavaScript tests
-ifndef NPM
-	@echo "❌ npm not found. Run 'make testdrive-jsui-install-js' first."
-	@exit 1
-endif
-	npm run test:watch
-
-# Utility targets
-.PHONY: testdrive-jsui-clean
-testdrive-jsui-clean: ## Clean build artifacts
-	rm -rf build/
-	rm -rf dist/
-	rm -rf *.egg-info/
-	rm -rf .pytest_cache/
-	rm -rf coverage/
-	rm -rf .coverage
-	rm -rf node_modules/.cache/
-	find . -type d -name __pycache__ -exec rm -rf {} +
-	find . -type f -name "*.pyc" -delete
-
-.PHONY: testdrive-jsui-info
-testdrive-jsui-info: ## Show environment information
-	@echo "🧪 TestDrive-JSUI Environment Information"
-	@echo "========================================="
-	@echo ""
-	@echo "📁 Capability Root: $(shell pwd)"
-	@echo "🐍 Python: $(VENV_PYTHON)"
-	@echo "📦 Python Version: $(shell $(VENV_PYTHON) --version)"
-ifdef NODE
-	@echo "🟢 Node.js: $(shell node --version)"
-	@echo "📦 npm: $(shell npm --version)"
-else
-	@echo "❌ Node.js: Not available"
-endif
-	@echo ""
-	@echo "📋 Available JavaScript Tests:"
-	@if [ -d "js/tests" ]; then \
-		find js/tests -name "*.js" -type f | sed 's/^/  - /'; \
-	else \
-		echo "  No JavaScript tests found"; \
-	fi
-	@echo ""
-	@echo "📋 Available Python Tests:"
-	@if [ -d "tests" ]; then \
-		find tests -name "test_*.py" -type f | sed 's/^/  - /'; \
-	else \
-		echo "  No Python tests found"; \
-	fi
-
-# Integration with main capability system
-.PHONY: capability-info
-capability-info: ## Show capability information
-	@echo "Name: $(CAPABILITY_NAME)"
-	@echo "Description: $(CAPABILITY_DESCRIPTION)"
-	@echo "Type: JavaScript Testing Framework"
-	@echo "Status: Development"
-	@echo "Targets:"
-	@$(MAKE) --no-print-directory help | grep "^  " | sed 's/^  /    /'
-
-# Quick start target
-.PHONY: testdrive-jsui-quickstart
-testdrive-jsui-quickstart: ## Quick start: setup and run basic tests
-	@echo "🚀 TestDrive-JSUI Quick Start"
-	@echo "============================="
-	@echo ""
-	@echo "📋 Step 1: Installing dependencies..."
-	@$(MAKE) --no-print-directory testdrive-jsui-setup
-	@echo ""
-	@echo "📋 Step 2: Running status check..."
-	@$(MAKE) --no-print-directory testdrive-jsui-status
-	@echo ""
-	@echo "📋 Step 3: Running basic tests..."
-	@$(MAKE) --no-print-directory testdrive-jsui-test-python
-	@echo ""
-	@echo "✅ Quick start complete! Use 'make testdrive-jsui-help' for more options."
-
-# Standard test target for capability discovery system compatibility
-.PHONY: test
-test: ## Run all tests (required for capability integration)
-	@$(MAKE) --no-print-directory testdrive-jsui-test-all
--- a/capabilities/testdrive-jsui/README.md
+++ b/capabilities/testdrive-jsui/README.md
@@ -1,313 +0,0 @@
-# TestDrive-JSUI Capability
-
-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.
-
-## 🎯 **Purpose**
-
-TestDrive-JSUI is designed to:
-
- **🔒 Protect existing JavaScript UI functionality** during refactoring and development
- **🧪 Integrate JavaScript tests** into the main Python test suite
- **🏗️ Provide a clean architecture** for JavaScript framework development
- **📊 Enable comprehensive testing** of JavaScript UI components
- **🚀 Support future extensibility** for JavaScript framework evolution
-
-## 🏗️ **Architecture**
-
-```
-testdrive-jsui/
-├── src/testdrive_jsui/          # Python package
-│   ├── core/                    # Core framework components
-│   ├── components/              # UI component helpers
-│   ├── utils/                   # Utility functions
-│   └── 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
-│   ├── utils/                   # JS utilities
-│   └── tests/                   # JavaScript tests
-├── tests/                       # Python tests
-├── Makefile                     # Capability commands
-├── pyproject.toml              # Python package config
-├── package.json                # JavaScript dependencies
-└── README.md                   # This file
-```
-
-## 🚀 **Quick Start**
-
-### Prerequisites
-
- **Python 3.8+** with pip
- **Node.js 16+** with npm
- **MarkiTect main project** installed
-
-### Installation
-
-```bash
-# Navigate to the capability directory
-cd capabilities/testdrive-jsui
-
-# Quick setup (installs everything)
-make testdrive-jsui-quickstart
-
-# Or step by step:
-make testdrive-jsui-setup           # Install all dependencies
-make testdrive-jsui-status          # Check environment
-make testdrive-jsui-test-all        # Run all tests
-```
-
-## 🧪 **Testing**
-
-### JavaScript Tests
-
-```bash
-# Run JavaScript tests only
-make testdrive-jsui-test-js
-
-# Run with coverage
-npm run test:coverage
-
-# Watch mode for development
-make testdrive-jsui-watch
-```
-
-### Python Integration Tests
-
-```bash
-# Run Python tests only
-make testdrive-jsui-test-python
-
-# Run integration tests
-make testdrive-jsui-test-integration
-
-# Run all tests
-make testdrive-jsui-test-all
-```
-
-### Main Project Integration
-
-From the main MarkiTect project:
-
-```bash
-# Run capability tests
-make testdrive-jsui-test-all
-
-# Include in main test suite
-make test-all  # (when integrated)
-```
-
-## 📋 **Available Commands**
-
-| Command | Description |
-|---------|-------------|
-| `make testdrive-jsui-help` | Show all available commands |
-| `make testdrive-jsui-status` | Check environment status |
-| `make testdrive-jsui-setup` | Install all dependencies |
-| `make testdrive-jsui-test-all` | Run all tests |
-| `make testdrive-jsui-watch` | Development watch mode |
-| `make testdrive-jsui-clean` | Clean build artifacts |
-
-## 🔧 **Development**
-
-### Adding JavaScript Tests
-
-1. Create test files in `js/tests/`:
-   ```javascript
-   // js/tests/test-my-component.js
-   describe('MyComponent', () => {
-     test('should do something', () => {
-       // Your test here
-     });
-   });
-   ```
-
-2. Run tests:
-   ```bash
-   make testdrive-jsui-test-js
-   ```
-
-### Adding Python Integration Tests
-
-1. Create test files in `tests/`:
-   ```python
-   # tests/test_my_integration.py
-   import pytest
-   from testdrive_jsui.testing import JavaScriptTestRunner
-
-   @pytest.mark.javascript
-   def test_my_js_component():
-       runner = JavaScriptTestRunner()
-       result = runner.run_specific_test('test-my-component.js')
-       assert result.success
-   ```
-
-2. Run tests:
-   ```bash
-   make testdrive-jsui-test-integration
-   ```
-
-### Code Quality
-
-```bash
-# Lint JavaScript
-make testdrive-jsui-lint-js
-
-# Lint Python
-make testdrive-jsui-lint-python
-
-# Format Python code
-make testdrive-jsui-format-python
-```
-
-## 🔗 **Integration with Main Project**
-
-### Python Test Suite Integration
-
-The capability provides pytest integration to run JavaScript tests from Python:
-
-```python
-# In main project tests
-from testdrive_jsui.testing import JavaScriptTestRunner
-
-def test_javascript_ui_components():
-    runner = JavaScriptTestRunner()
-    result = runner.run_js_tests()
-    assert result.success
-    assert result.tests_passed > 0
-```
-
-### Capability System Integration
-
-The capability integrates with MarkiTect's capability discovery system:
-
-```bash
-# From main project
-make capabilities-list                    # Shows testdrive-jsui
-make testdrive-jsui-test-all             # Direct delegation
-make capabilities-test                    # Includes JS tests
-```
-
-## 📊 **Testing Framework Features**
-
-### JavaScript Test Runner
-
- **Jest integration** with JSDOM environment
- **Coverage reporting** with detailed metrics
- **Test isolation** with proper setup/teardown
- **Mock support** for DOM APIs and browser features
- **Async testing** support for modern JavaScript
-
-### Python-JavaScript Bridge
-
- **Subprocess execution** of JavaScript tests
- **Result parsing** with structured output
- **Error handling** with detailed failure information
- **Test discovery** for pytest integration
- **Coverage integration** between Python and JavaScript
-
-### Safety Mechanisms
-
- **Copy-first migration** (never move, always copy)
- **Dual-track testing** during migration
- **Gradual integration** with rollback options
- **Test verification** at each step
- **Environment validation** before execution
-
-## 🔄 **Migration Strategy**
-
-When migrating JavaScript UI code to this capability:
-
-1. **Copy** (don't move) JavaScript files to `js/` directory
-2. **Verify** tests work in new location
-3. **Create** Python integration tests
-4. **Run** dual-track testing to compare results
-5. **Gradually** switch to capability-based testing
-6. **Remove** original files only after full verification
-
-## 📚 **Examples**
-
-### Running Specific Tests
-
-```bash
-# Run a specific JavaScript test
-npm test -- --testNamePattern="SectionManager"
-
-# Run specific Python integration test
-pytest tests/test_section_manager_integration.py -v
-
-# Run tests with coverage
-npm run test:coverage
-```
-
-### Environment Information
-
-```bash
-# Get detailed environment info
-make testdrive-jsui-info
-
-# Check what tests are available
-make testdrive-jsui-status
-```
-
-### Development Workflow
-
-```bash
-# Start development session
-make testdrive-jsui-watch         # Terminal 1: Watch JS tests
-make testdrive-jsui-test-python   # Terminal 2: Run Python tests
-
-# Before committing
-make testdrive-jsui-lint-js       # Lint JavaScript
-make testdrive-jsui-format-python # Format Python
-make testdrive-jsui-test-all      # Run all tests
-```
-
-## 🎯 **Future Enhancements**
-
- **Visual regression testing** with screenshot comparison
- **Performance benchmarking** for JavaScript components
- **Browser automation** with Selenium/Playwright
- **Component documentation** auto-generation
- **Real browser testing** in CI/CD pipelines
-
-## 📋 **Troubleshooting**
-
-### Common Issues
-
-**Node.js not found:**
-```bash
-# Install Node.js first
-curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
-sudo apt-get install -y nodejs
-```
-
-**Tests failing:**
-```bash
-# Check environment
-make testdrive-jsui-status
-
-# Reinstall dependencies
-make testdrive-jsui-clean
-make testdrive-jsui-setup
-```
-
-**Integration issues:**
-```bash
-# Verify Python package is installed
-pip list | grep testdrive-jsui
-
-# Check JavaScript dependencies
-npm list
-```
-
-## 📄 **License**
-
-MIT License - See main MarkiTect project for details.
-
---
-
-*Generated: 2025-11-09*
-*Status: Phase 1 Implementation*
-*Next: Copy JavaScript files and create integration tests*
--- a/capabilities/testdrive-jsui/js/components/debug-panel.js
+++ b/capabilities/testdrive-jsui/js/components/debug-panel.js
@@ -1,191 +0,0 @@
-/**
- * DebugPanel Component
- *
- * Extracted from monolithic editor.js as part of architecture refactoring.
- * Handles debug message display and management for client-side debugging.
- *
- * Dependencies:
- * - None (standalone component)
- */
-
-/**
- * DebugPanel - Manages debug message display and interaction
- */
-class DebugPanel {
-    constructor() {
-        this.messages = [];
-        this.isActive = false;
-        this.maxMessages = 1000; // Keep last 1000 messages
-    }
-
-    /**
-     * Add a debug message
-     */
-    addMessage(message, category = 'INFO') {
-        const messageObj = {
-            message,
-            category,
-            timestamp: new Date().toLocaleTimeString()
-        };
-
-        this.messages.push(messageObj);
-
-        // Keep only last maxMessages
-        if (this.messages.length > this.maxMessages) {
-            this.messages = this.messages.slice(-this.maxMessages);
-        }
-
-        // Auto-update if panel is visible
-        if (this.isActive) {
-            this.update();
-        }
-    }
-
-    /**
-     * Toggle the debug panel on/off
-     */
-    toggle() {
-        const debugContainer = document.getElementById('debug-messages-container');
-        const debugButton = document.getElementById('toggle-debug');
-
-        if (!debugContainer || !debugButton) {
-            console.warn('DebugPanel: Required DOM elements not found');
-            return;
-        }
-
-        if (this.isActive) {
-            this.hide();
-        } else {
-            this.show();
-        }
-    }
-
-    /**
-     * Show the debug panel
-     */
-    show() {
-        const debugContainer = document.getElementById('debug-messages-container');
-        const debugButton = document.getElementById('toggle-debug');
-
-        if (!debugContainer || !debugButton) {
-            console.warn('DebugPanel: Required DOM elements not found');
-            return;
-        }
-
-        debugContainer.style.display = 'block';
-        debugButton.textContent = '🔍 Debug (ON)';
-        debugButton.style.background = '#28a745';
-        this.isActive = true;
-        this.update();
-    }
-
-    /**
-     * Hide the debug panel
-     */
-    hide() {
-        const debugContainer = document.getElementById('debug-messages-container');
-        const debugButton = document.getElementById('toggle-debug');
-
-        if (!debugContainer || !debugButton) {
-            console.warn('DebugPanel: Required DOM elements not found');
-            return;
-        }
-
-        debugContainer.style.display = 'none';
-        debugButton.textContent = '🔍 Debug';
-        debugButton.style.background = '#6c757d';
-        this.isActive = false;
-    }
-
-    /**
-     * Update the debug panel with current messages
-     */
-    update() {
-        const debugContainer = document.getElementById('debug-messages-container');
-        if (!debugContainer || !this.isActive) {
-            return;
-        }
-
-        if (this.messages.length === 0) {
-            debugContainer.innerHTML = '<div style="color: #6c757d; font-style: italic; padding: 12px;">No debug messages yet. Click sections to generate debug output.</div>';
-            return;
-        }
-
-        // Show the last 50 messages in reverse order (newest first)
-        const recentMessages = this.messages.slice(-50).reverse();
-
-        const messagesHtml = recentMessages.map(msg => {
-            const categoryColor = {
-                'INFO': '#17a2b8',
-                'WARNING': '#ffc107',
-                'ERROR': '#dc3545',
-                'SUCCESS': '#28a745',
-                'DEBUG': '#6f42c1'
-            }[msg.category] || '#6c757d';
-
-            return `
-                <div style="margin-bottom: 6px; padding: 4px; border-left: 3px solid ${categoryColor}; background: white; border-radius: 2px;">
-                    <span style="color: #6c757d; font-size: 11px;">[${msg.timestamp}]</span>
-                    <span style="color: ${categoryColor}; font-weight: bold;">${msg.category}:</span>
-                    <span style="color: #333;">${msg.message}</span>
-                </div>
-            `;
-        }).join('');
-
-        debugContainer.innerHTML = `
-            <div style="margin-bottom: 8px; padding: 6px; background: #e9ecef; border-radius: 4px; font-weight: bold; color: #495057;">
-                Debug Messages (${this.messages.length} total, showing last ${recentMessages.length})
-                <button id="debug-clear-btn" style="float: right; background: #dc3545; color: white; border: none; padding: 2px 6px; border-radius: 2px; font-size: 11px; cursor: pointer;">Clear</button>
-            </div>
-            <div style="max-height: 250px; overflow-y: auto;">
-                ${messagesHtml}
-            </div>
-        `;
-
-        // Add event listener for clear button
-        const clearBtn = debugContainer.querySelector('#debug-clear-btn');
-        if (clearBtn) {
-            clearBtn.addEventListener('click', () => {
-                this.clear();
-            });
-        }
-
-        // Auto-scroll to bottom to show newest messages
-        const scrollContainer = debugContainer.querySelector('div[style*="overflow-y"]');
-        if (scrollContainer) {
-            scrollContainer.scrollTop = scrollContainer.scrollHeight;
-        }
-    }
-
-    /**
-     * Clear all debug messages
-     */
-    clear() {
-        this.messages = [];
-        this.update();
-    }
-
-    /**
-     * Get the number of messages
-     */
-    getMessageCount() {
-        return this.messages.length;
-    }
-
-    /**
-     * Get recent messages
-     */
-    getRecentMessages(count = 10) {
-        return this.messages.slice(-count);
-    }
-}
-
-// Export for use in tests and other modules
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { DebugPanel };
-}
-
-// Export for browser use
-if (typeof window !== 'undefined') {
-    window.DebugPanel = DebugPanel;
-}
--- a/capabilities/testdrive-jsui/js/components/document-controls.js
+++ b/capabilities/testdrive-jsui/js/components/document-controls.js
@@ -1,279 +0,0 @@
-/**
- * DocumentControls Component
- *
- * Extracted from monolithic editor.js as part of architecture refactoring.
- * Handles the floating control panel and document-level actions.
- *
- * Dependencies:
- * - None (standalone component)
- */
-
-/**
- * DocumentControls - Manages the floating control panel and its buttons
- */
-class DocumentControls {
-    constructor() {
-        this.controlPanel = null;
-        this.buttons = new Map();
-        this.eventHandlers = new Map();
-        this.isVisible = true;
-    }
-
-    /**
-     * Create the control panel and add it to the DOM
-     */
-    create() {
-        if (this.controlPanel) {
-            this.destroy(); // Remove existing panel
-        }
-
-        // Also remove any existing panel with the same ID in the DOM
-        const existingPanel = document.getElementById('markitect-global-controls');
-        if (existingPanel && existingPanel.parentNode) {
-            existingPanel.parentNode.removeChild(existingPanel);
-        }
-
-        // Create the floating control panel
-        this.controlPanel = document.createElement('div');
-        this.controlPanel.id = 'markitect-global-controls';
-        this.controlPanel.style.cssText = `
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            background: rgba(248, 249, 250, 0.95);
-            border: 1px solid #dee2e6;
-            border-radius: 8px;
-            padding: 12px;
-            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
-            z-index: 1000;
-            backdrop-filter: blur(8px);
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-            font-size: 14px;
-            min-width: 200px;
-        `;
-
-        // Add title
-        const title = document.createElement('div');
-        title.style.cssText = `
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: #495057;
-            border-bottom: 1px solid #dee2e6;
-            padding-bottom: 4px;
-        `;
-        title.textContent = 'Document Controls';
-
-        // Create button container
-        const buttonContainer = document.createElement('div');
-        buttonContainer.id = 'button-container';
-        buttonContainer.style.cssText = `
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        `;
-
-        this.controlPanel.appendChild(title);
-        this.controlPanel.appendChild(buttonContainer);
-
-        // Add default buttons
-        this.addDefaultButtons();
-
-        // Add debug messages container
-        this.addDebugContainer();
-
-        // Add to DOM
-        document.body.appendChild(this.controlPanel);
-    }
-
-    /**
-     * Add default buttons to the control panel
-     */
-    addDefaultButtons() {
-        // Save Document button
-        this.addButton('save-document', '💾 Save Document', '#28a745');
-
-        // Reset All button
-        this.addButton('reset-all', '🔄 Reset All', '#ffc107', '#212529');
-
-        // Show Status button
-        this.addButton('show-status', '📊 Show Status', '#17a2b8');
-
-        // Debug button
-        this.addButton('toggle-debug', '🔍 Debug', '#6c757d');
-    }
-
-    /**
-     * Add debug container to the control panel
-     */
-    addDebugContainer() {
-        const debugContainer = document.createElement('div');
-        debugContainer.id = 'debug-messages-container';
-        debugContainer.style.cssText = `
-            margin-top: 12px;
-            max-height: 300px;
-            overflow-y: auto;
-            border: 1px solid #dee2e6;
-            border-radius: 4px;
-            background: #f8f9fa;
-            padding: 8px;
-            font-family: 'Courier New', monospace;
-            font-size: 12px;
-            line-height: 1.4;
-            display: none;
-        `;
-
-        this.controlPanel.appendChild(debugContainer);
-    }
-
-    /**
-     * Add a button to the control panel
-     */
-    addButton(id, text, backgroundColor, textColor = 'white') {
-        const buttonContainer = this.controlPanel.querySelector('#button-container');
-        if (!buttonContainer) {
-            throw new Error('Button container not found. Call create() first.');
-        }
-
-        const button = document.createElement('button');
-        button.id = id;
-        button.textContent = text;
-        button.style.cssText = `
-            background: ${backgroundColor};
-            color: ${textColor};
-            border: none;
-            padding: 8px 12px;
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 13px;
-            font-weight: 500;
-            transition: background-color 0.2s;
-        `;
-
-        buttonContainer.appendChild(button);
-        this.buttons.set(id, button);
-
-        return button;
-    }
-
-    /**
-     * Remove a button from the control panel
-     */
-    removeButton(id) {
-        const button = this.buttons.get(id);
-        if (button && button.parentNode) {
-            button.parentNode.removeChild(button);
-            this.buttons.delete(id);
-            this.eventHandlers.delete(id);
-        }
-    }
-
-    /**
-     * Set event handlers for buttons
-     */
-    setEventHandlers(handlers) {
-        for (const [buttonId, handler] of Object.entries(handlers)) {
-            const button = this.buttons.get(buttonId);
-            if (button) {
-                // Remove existing handler if any
-                if (this.eventHandlers.has(buttonId)) {
-                    button.removeEventListener('click', this.eventHandlers.get(buttonId));
-                }
-
-                // Add new handler
-                button.addEventListener('click', handler);
-                this.eventHandlers.set(buttonId, handler);
-            }
-        }
-    }
-
-    /**
-     * Show the control panel
-     */
-    show() {
-        if (this.controlPanel) {
-            this.controlPanel.style.display = 'block';
-            this.isVisible = true;
-        }
-    }
-
-    /**
-     * Hide the control panel
-     */
-    hide() {
-        if (this.controlPanel) {
-            this.controlPanel.style.display = 'none';
-            this.isVisible = false;
-        }
-    }
-
-    /**
-     * Update status display (can be extended as needed)
-     */
-    updateStatus(status) {
-        // This method can be extended to show status information
-        // For now, it just stores the status for potential display
-        this.lastStatus = status;
-
-        // Could update a status indicator in the panel if needed
-        if (status && this.controlPanel) {
-            const title = this.controlPanel.querySelector('div');
-            if (title) {
-                const statusText = `Document Controls (${status.totalSections} sections, ${status.editingSections} editing)`;
-                // Could update title or add status indicator
-            }
-        }
-    }
-
-    /**
-     * Get the control panel element
-     */
-    getControlPanel() {
-        return this.controlPanel;
-    }
-
-    /**
-     * Destroy the control panel and clean up
-     */
-    destroy() {
-        if (this.controlPanel && this.controlPanel.parentNode) {
-            this.controlPanel.parentNode.removeChild(this.controlPanel);
-        }
-
-        // Clean up references
-        this.controlPanel = null;
-        this.buttons.clear();
-        this.eventHandlers.clear();
-        this.isVisible = true;
-    }
-
-    /**
-     * Check if the control panel is visible
-     */
-    isVisible() {
-        return this.isVisible && this.controlPanel && this.controlPanel.style.display !== 'none';
-    }
-
-    /**
-     * Get all button IDs
-     */
-    getButtonIds() {
-        return Array.from(this.buttons.keys());
-    }
-
-    /**
-     * Get a specific button by ID
-     */
-    getButton(id) {
-        return this.buttons.get(id);
-    }
-}
-
-// Export for use in tests and other modules
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { DocumentControls };
-}
-
-// Export for browser use
-if (typeof window !== 'undefined') {
-    window.DocumentControls = DocumentControls;
-}
--- a/capabilities/testdrive-jsui/js/components/dom-renderer.js
+++ b/capabilities/testdrive-jsui/js/components/dom-renderer.js
--- a/capabilities/testdrive-jsui/js/core/section-manager.js
+++ b/capabilities/testdrive-jsui/js/core/section-manager.js
@@ -1,544 +0,0 @@
-/**
- * SectionManager Component
- *
- * Extracted from monolithic editor.js as part of architecture refactoring.
- * Manages the collection of sections and their state transitions.
- *
- * Dependencies:
- * - EditState enum (imported)
- * - SectionType enum (imported)
- * - Section class (imported)
- * - debug function (imported)
- */
-
-// Import dependencies - these will be separate modules
-const EditState = Object.freeze({
-    ORIGINAL: 'original',
-    EDITING: 'editing',
-    MODIFIED: 'modified',
-    SAVED: 'saved'
-});
-
-const SectionType = Object.freeze({
-    HEADING: 'heading',
-    PARAGRAPH: 'paragraph',
-    LIST: 'list',
-    CODE: 'code',
-    QUOTE: 'quote',
-    TABLE: 'table',
-    HR: 'hr',
-    IMAGE: 'image'
-});
-
-// Debug function (will be extracted to utils)
-function debug(message, category = 'INFO') {
-    // Simple console debug for now - will be enhanced later
-    console.log(`DEBUG ${category}: ${message}`);
-}
-
-/**
- * Section Class - manages individual section state and content
- */
-class Section {
-    constructor(id, markdown, type) {
-        this.id = id;
-        this.originalMarkdown = markdown;
-        this.currentMarkdown = markdown;
-        this.editingMarkdown = markdown;
-        this.pendingMarkdown = null;
-        this.type = type;
-        this.state = EditState.ORIGINAL;
-        this.domElement = null;
-        this.lastSaved = null;
-        this.created = new Date();
-    }
-
-    static generateId(markdown, position, strategy = 'hash', parentId = null) {
-        return this.generateIdWithStrategy(markdown, position, strategy, parentId);
-    }
-
-    static generateIdWithStrategy(markdown, position, strategy = 'hash', parentId = null) {
-        const sanitizedContent = this.sanitizeContentForId(markdown);
-        const normalizedContent = this.normalizeContentForHashing(sanitizedContent);
-        const sectionType = this.detectType(markdown);
-
-        switch (strategy) {
-            case 'timestamp':
-                return this.generateTimestampId(normalizedContent, position, sectionType);
-            case 'sequential':
-                return this.generateSequentialId(normalizedContent, position, sectionType);
-            case 'hierarchical':
-                return this.generateHierarchicalId(normalizedContent, position, parentId);
-            case 'hash':
-            default:
-                return this.generateAdvancedId(normalizedContent, position, sectionType);
-        }
-    }
-
-    static generateAdvancedId(content, position, sectionType) {
-        const contentHash = this.generateCryptoHash(content);
-        const safeType = sectionType || 'paragraph';
-        const typePrefix = safeType.substring(0, 3);
-        const positionHex = position.toString(16).padStart(2, '0');
-
-        return `section-${typePrefix}-${contentHash}-${positionHex}`;
-    }
-
-    static generateCryptoHash(content) {
-        let hash = 0;
-        if (content.length === 0) return '00000000';
-
-        for (let i = 0; i < content.length; i++) {
-            const char = content.charCodeAt(i);
-            hash = ((hash << 5) - hash) + char;
-            hash = hash & hash;
-        }
-
-        const hexHash = Math.abs(hash).toString(16).padStart(8, '0');
-        return hexHash.substring(0, 8);
-    }
-
-    static normalizeContentForHashing(content) {
-        if (!content || typeof content !== 'string') {
-            return '';
-        }
-
-        return content
-            .trim()
-            .replace(/\s+/g, ' ')
-            .replace(/\r\n/g, '\n')
-            .toLowerCase();
-    }
-
-    static sanitizeContentForId(content) {
-        if (!content || typeof content !== 'string') {
-            return '';
-        }
-
-        return content
-            .replace(/<[^>]*>/g, '')
-            .replace(/javascript:/gi, '')
-            .replace(/[^\w\s\-_.#]/g, '')
-            .trim();
-    }
-
-    static generateTimestampId(content, position = 0, sectionType = 'paragraph') {
-        const timestamp = Date.now().toString(36);
-        const contentSnippet = this.generateCryptoHash(content || '').substring(0, 4);
-        const safeType = sectionType || 'paragraph';
-        const typePrefix = safeType.substring(0, 3);
-
-        return `section-${typePrefix}-${contentSnippet}-${timestamp}`;
-    }
-
-    static generateSequentialId(content, position, sectionType = 'paragraph') {
-        const safeType = sectionType || 'paragraph';
-        const typePrefix = safeType.substring(0, 3);
-        const seqNumber = (position || 0).toString().padStart(3, '0');
-        const contentHash = this.generateCryptoHash(content || '').substring(0, 4);
-
-        return `section-${typePrefix}-seq${seqNumber}-${contentHash}`;
-    }
-
-    static generateHierarchicalId(content, position, parentId = null) {
-        const contentHash = this.generateCryptoHash(content || '').substring(0, 6);
-
-        if (parentId) {
-            const childIndex = (position || 0).toString().padStart(2, '0');
-            return `${parentId}-child-${childIndex}-${contentHash}`;
-        } else {
-            return `section-root-${position || 0}-${contentHash}`;
-        }
-    }
-
-    static detectType(markdown) {
-        if (!markdown || typeof markdown !== 'string') {
-            return SectionType.PARAGRAPH;
-        }
-
-        const content = markdown.replace(/^\n+|\n+$/g, '');
-        if (!content) {
-            return SectionType.PARAGRAPH;
-        }
-
-        const trimmed = content.trim();
-
-        // Detection order matters - most specific first
-        if (this.isHeading(trimmed)) {
-            return SectionType.HEADING;
-        }
-
-        if (this.isImage(trimmed)) {
-            return SectionType.IMAGE;
-        }
-
-        if (this.isCodeBlock(trimmed)) {
-            return SectionType.CODE;
-        }
-
-        return SectionType.PARAGRAPH;
-    }
-
-    static isHeading(trimmed) {
-        const headingPattern = /^#{1,6}\s+.+/;
-        return headingPattern.test(trimmed);
-    }
-
-    static isImage(trimmed) {
-        const imagePattern = /!\[.*?\]\([^)]+\)/;
-        return imagePattern.test(trimmed);
-    }
-
-    static isCodeBlock(trimmed) {
-        if (trimmed.startsWith('```') || trimmed.startsWith('~~~')) {
-            return true;
-        }
-        if (trimmed.includes('```') || trimmed.includes('~~~')) {
-            const codeBlockPattern = /```[\s\S]*?```|~~~[\s\S]*?~~~/;
-            if (codeBlockPattern.test(trimmed)) {
-                return true;
-            }
-        }
-        return false;
-    }
-
-    startEdit() {
-        if (this.state === EditState.EDITING) {
-            throw new Error(`Section ${this.id} is already being edited`);
-        }
-        this.editingMarkdown = this.pendingMarkdown || this.currentMarkdown;
-        this.state = EditState.EDITING;
-        return this.editingMarkdown;
-    }
-
-    updateContent(markdown) {
-        if (this.state !== EditState.EDITING) {
-            throw new Error(`Section ${this.id} is not in editing state`);
-        }
-        this.editingMarkdown = markdown;
-    }
-
-    acceptChanges() {
-        if (this.state !== EditState.EDITING) {
-            throw new Error(`Section ${this.id} is not in editing state`);
-        }
-        this.currentMarkdown = this.editingMarkdown;
-        this.editingMarkdown = null;
-        this.pendingMarkdown = null;
-        this.state = EditState.SAVED;
-        this.lastSaved = new Date();
-        return this.currentMarkdown;
-    }
-
-    cancelChanges() {
-        if (this.state !== EditState.EDITING) {
-            throw new Error(`Section ${this.id} is not in editing state`);
-        }
-        this.editingMarkdown = null;
-        if (this.pendingMarkdown !== null) {
-            this.state = EditState.MODIFIED;
-            return this.pendingMarkdown;
-        } else if (this.lastSaved !== null) {
-            this.state = EditState.SAVED;
-            return this.currentMarkdown;
-        } else {
-            this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
-            return this.currentMarkdown;
-        }
-    }
-
-    stopEditing() {
-        if (this.state !== EditState.EDITING) {
-            return this.state;
-        }
-
-        if (this.editingMarkdown && this.editingMarkdown !== this.currentMarkdown) {
-            this.pendingMarkdown = this.editingMarkdown;
-            this.state = EditState.MODIFIED;
-        } else {
-            this.pendingMarkdown = null;
-            if (this.lastSaved !== null) {
-                this.state = EditState.SAVED;
-            } else {
-                this.state = this.hasChanges() ? EditState.MODIFIED : EditState.ORIGINAL;
-            }
-        }
-
-        this.editingMarkdown = null;
-        return this.state;
-    }
-
-    resetToOriginal() {
-        this.currentMarkdown = this.originalMarkdown;
-        this.editingMarkdown = this.originalMarkdown;
-        this.pendingMarkdown = null;
-        this.state = EditState.ORIGINAL;
-        return this.originalMarkdown;
-    }
-
-    isEditing() {
-        return this.state === EditState.EDITING;
-    }
-
-    hasChanges() {
-        return this.currentMarkdown !== this.originalMarkdown;
-    }
-
-    getStatus() {
-        return {
-            id: this.id,
-            state: this.state,
-            hasChanges: this.hasChanges(),
-            isEditing: this.isEditing(),
-            contentLength: this.currentMarkdown.length,
-            lastSaved: this.lastSaved,
-            type: this.type,
-            originalLength: this.originalMarkdown.length,
-            currentLength: this.currentMarkdown.length
-        };
-    }
-
-    isImage() {
-        return this.type === SectionType.IMAGE;
-    }
-
-    redetectType(content = null) {
-        const markdown = content || this.currentMarkdown;
-        const oldType = this.type;
-        this.type = Section.detectType(markdown);
-
-        if (oldType !== this.type) {
-            debug(`Section ${this.id} type changed from ${oldType} to ${this.type}`, 'TYPE_DETECTION');
-        }
-
-        return this.type;
-    }
-}
-
-/**
- * SectionManager - Manages the collection of sections
- */
-class SectionManager {
-    constructor() {
-        this.sections = new Map();
-        this.listeners = new Map();
-        this.statusInterval = null;
-        this.lastStatusUpdate = new Date().toISOString();
-    }
-
-    on(event, callback) {
-        if (!this.listeners.has(event)) {
-            this.listeners.set(event, []);
-        }
-        this.listeners.get(event).push(callback);
-    }
-
-    emit(event, data) {
-        if (this.listeners.has(event)) {
-            this.listeners.get(event).forEach(callback => callback(data));
-        }
-    }
-
-    createSectionsFromMarkdown(markdownContent) {
-        // Split content into blocks separated by double newlines
-        const blocks = markdownContent.split(/\n\s*\n/);
-        const sections = [];
-        let position = 0;
-
-        for (const block of blocks) {
-            const trimmedBlock = block.trim();
-            if (!trimmedBlock) continue;
-
-            // Check if this block should be split further
-            const lines = trimmedBlock.split('\n');
-            let currentSection = '';
-
-            for (let i = 0; i < lines.length; i++) {
-                const line = lines[i];
-                const isHeading = /^#{1,6}\s/.test(line.trim());
-                const isImage = /^\s*!\[.*?\]\(.*?\)\s*$/.test(line);
-
-                // Each heading or image starts a new section
-                if ((isHeading || isImage) && currentSection.trim()) {
-                    // Save the previous section
-                    const sectionId = Section.generateId(currentSection, position);
-                    const sectionType = Section.detectType(currentSection);
-                    const section = new Section(sectionId, currentSection.trim(), sectionType);
-                    sections.push(section);
-                    this.sections.set(sectionId, section);
-                    position++;
-                    currentSection = line;
-                } else {
-                    if (currentSection) currentSection += '\n';
-                    currentSection += line;
-                }
-            }
-
-            // Save the final section from this block
-            if (currentSection.trim()) {
-                const sectionId = Section.generateId(currentSection, position);
-                const sectionType = Section.detectType(currentSection);
-                const section = new Section(sectionId, currentSection.trim(), sectionType);
-                sections.push(section);
-                this.sections.set(sectionId, section);
-                position++;
-            }
-        }
-
-        this.emit('sections-created', { sections, count: sections.length });
-        return sections;
-    }
-
-    startEditing(sectionId) {
-        debug('MANAGER: startEditing called for: ' + sectionId, 'MANAGER');
-
-        const section = this.sections.get(sectionId);
-        if (!section) {
-            throw new Error(`Section ${sectionId} not found`);
-        }
-
-        if (section.isEditing()) {
-            debug('MANAGER: Section already in editing state: ' + sectionId, 'MANAGER');
-            return section.editingMarkdown;
-        }
-
-        debug('MANAGER: Starting edit for section: ' + sectionId, 'MANAGER');
-        const content = section.startEdit();
-
-        debug('MANAGER: About to emit edit-started event for: ' + sectionId, 'MANAGER');
-        this.emit('edit-started', { sectionId, content, section: section.getStatus() });
-        debug('MANAGER: Emitted edit-started event for: ' + sectionId, 'MANAGER');
-
-        return content;
-    }
-
-    updateContent(sectionId, markdown) {
-        const section = this.sections.get(sectionId);
-        if (!section) {
-            throw new Error(`Section ${sectionId} not found`);
-        }
-
-        const oldType = section.type;
-        section.updateContent(markdown);
-        const newType = section.redetectType(markdown);
-
-        const eventData = {
-            sectionId,
-            markdown,
-            section: section.getStatus(),
-            typeChanged: oldType !== newType,
-            oldType,
-            newType
-        };
-
-        this.emit('content-updated', eventData);
-
-        if (oldType !== newType) {
-            this.emit('section-type-changed', {
-                sectionId,
-                oldType,
-                newType,
-                section: section.getStatus()
-            });
-        }
-    }
-
-    acceptChanges(sectionId) {
-        const section = this.sections.get(sectionId);
-        if (!section) {
-            throw new Error(`Section ${sectionId} not found`);
-        }
-
-        const content = section.acceptChanges();
-        this.emit('changes-accepted', { sectionId, content, section: section.getStatus() });
-        return content;
-    }
-
-    cancelChanges(sectionId) {
-        const section = this.sections.get(sectionId);
-        if (!section) {
-            throw new Error(`Section ${sectionId} not found`);
-        }
-
-        const content = section.cancelChanges();
-        this.emit('changes-cancelled', { sectionId, content, section: section.getStatus() });
-        return content;
-    }
-
-    resetSection(sectionId) {
-        const section = this.sections.get(sectionId);
-        if (!section) {
-            throw new Error(`Section ${sectionId} not found`);
-        }
-
-        const content = section.resetToOriginal();
-        this.emit('section-reset', { sectionId, content, section: section.getStatus() });
-        return content;
-    }
-
-    getDocumentMarkdown() {
-        const sortedSections = Array.from(this.sections.values())
-            .sort((a, b) => a.created - b.created);
-
-        return sortedSections.map(section => section.currentMarkdown).join('\n\n');
-    }
-
-    getAllSections() {
-        return Array.from(this.sections.values());
-    }
-
-    getDocumentStatus() {
-        const sections = Array.from(this.sections.values());
-        const editingSections = sections.filter(section => section.isEditing).length;
-
-        return {
-            totalSections: sections.length,
-            editingSections: editingSections
-        };
-    }
-
-    extractHeadings(content) {
-        if (!content) return [];
-        const lines = content.split('\n');
-        return lines.filter(line => /^#{1,6}\s/.test(line.trim()));
-    }
-
-    handleSectionSplit(sectionId, newContent) {
-        const section = this.sections.get(sectionId);
-        if (!section) {
-            throw new Error(`Section ${sectionId} not found`);
-        }
-
-        // Remove the original section
-        this.sections.delete(sectionId);
-
-        // Create new sections from the content
-        const newSections = this.createSectionsFromMarkdown(newContent);
-
-        // Emit section-split event
-        this.emit('section-split', {
-            originalSectionId: sectionId,
-            newSections: newSections,
-            count: newSections.length
-        });
-
-        return newSections;
-    }
-
-    createSectionsFromContent(content) {
-        return this.createSectionsFromMarkdown(content);
-    }
-}
-
-// Export for use in tests and other modules
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { SectionManager, Section, EditState, SectionType };
-}
-
-// Export for browser use
-if (typeof window !== 'undefined') {
-    window.SectionManager = SectionManager;
-    window.Section = Section;
-    window.EditState = EditState;
-    window.SectionType = SectionType;
-}
--- a/capabilities/testdrive-jsui/js/tests/button-events.test.js
+++ b/capabilities/testdrive-jsui/js/tests/button-events.test.js
@@ -1,349 +0,0 @@
-/**
- * Button Functionality and DOM Events Tests
- *
- * Tests button interactions, event handling, and DOM manipulation
- * Based on functionality from history/javascript-dev-tests/test_*button*.js and test_*events*.js files
- */
-
-describe('Button Functionality and DOM Events', () => {
-  let mockSection;
-  let documentControls;
-
-  beforeEach(() => {
-    // Setup DOM with various buttons and controls
-    document.body.innerHTML = `
-      <div id="content">
-        <div class="section" data-section-id="test-section">
-          <div class="section-content">
-            <p>Section content</p>
-          </div>
-          <div class="section-controls">
-            <button class="edit-btn" data-action="edit">Edit</button>
-            <button class="accept-btn" data-action="accept" style="display: none;">Accept</button>
-            <button class="cancel-btn" data-action="cancel" style="display: none;">Cancel</button>
-            <button class="delete-btn" data-action="delete">Delete</button>
-          </div>
-        </div>
-        <div class="floating-controls">
-          <button class="add-section-btn">Add Section</button>
-          <button class="save-all-btn">Save All</button>
-        </div>
-      </div>
-    `;
-
-    mockSection = document.querySelector('.section');
-
-    // Load components
-    require('../components/document-controls.js');
-    if (global.DocumentControls) {
-      documentControls = new global.DocumentControls(document.getElementById('content'));
-    }
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-    jest.clearAllMocks();
-  });
-
-  describe('Section edit buttons', () => {
-    test('should show accept/cancel buttons when edit is clicked', () => {
-      const editBtn = document.querySelector('.edit-btn');
-      const acceptBtn = document.querySelector('.accept-btn');
-      const cancelBtn = document.querySelector('.cancel-btn');
-
-      expect(editBtn).toBeTruthy();
-
-      // Simulate edit button click
-      editBtn.click();
-
-      // In real implementation, accept/cancel should become visible
-      expect(acceptBtn.style.display).toBe('none'); // Initially hidden
-      expect(cancelBtn.style.display).toBe('none'); // Initially hidden
-
-      // Test that buttons exist for functionality
-      expect(acceptBtn).toBeTruthy();
-      expect(cancelBtn).toBeTruthy();
-    });
-
-    test('should hide edit button when in edit mode', () => {
-      const editBtn = document.querySelector('.edit-btn');
-
-      editBtn.click();
-
-      // In real implementation, edit button should be hidden
-      expect(editBtn.style.display).not.toBe('block');
-    });
-
-    test('should restore edit button when edit is cancelled', () => {
-      const editBtn = document.querySelector('.edit-btn');
-      const cancelBtn = document.querySelector('.cancel-btn');
-
-      // Simulate edit mode
-      editBtn.style.display = 'none';
-      cancelBtn.style.display = 'inline-block';
-
-      cancelBtn.click();
-
-      // In real implementation, should restore edit button
-      expect(cancelBtn).toBeTruthy();
-      expect(editBtn).toBeTruthy();
-    });
-  });
-
-  describe('Button event propagation', () => {
-    test('should prevent event bubbling for section buttons', () => {
-      const editBtn = document.querySelector('.edit-btn');
-      let sectionClicked = false;
-
-      mockSection.addEventListener('click', () => {
-        sectionClicked = true;
-      });
-
-      // Create event with stopPropagation mock
-      const clickEvent = new Event('click', { bubbles: true });
-      clickEvent.stopPropagation = jest.fn();
-
-      editBtn.dispatchEvent(clickEvent);
-
-      // In real implementation, should call stopPropagation
-      expect(clickEvent.stopPropagation).toHaveBeenCalledWith ||
-        expect(sectionClicked).toBe(false);
-    });
-
-    test('should handle rapid button clicks gracefully', () => {
-      const editBtn = document.querySelector('.edit-btn');
-
-      // Simulate rapid clicks
-      for (let i = 0; i < 5; i++) {
-        editBtn.click();
-      }
-
-      // Should not cause errors
-      expect(editBtn).toBeTruthy();
-    });
-
-    test('should debounce button actions', () => {
-      const saveBtn = document.querySelector('.save-all-btn');
-      let clickCount = 0;
-
-      const debouncedHandler = jest.fn(() => {
-        clickCount++;
-      });
-
-      saveBtn.addEventListener('click', debouncedHandler);
-
-      // Simulate multiple quick clicks
-      saveBtn.click();
-      saveBtn.click();
-      saveBtn.click();
-
-      expect(debouncedHandler).toHaveBeenCalledTimes(3);
-    });
-  });
-
-  describe('Button state management', () => {
-    test('should disable buttons during processing', () => {
-      const acceptBtn = document.querySelector('.accept-btn');
-
-      // Simulate processing state
-      acceptBtn.disabled = true;
-
-      expect(acceptBtn.disabled).toBe(true);
-    });
-
-    test('should show loading state for async operations', () => {
-      const saveBtn = document.querySelector('.save-all-btn');
-
-      // Simulate loading state
-      const originalText = saveBtn.textContent;
-      saveBtn.textContent = 'Saving...';
-      saveBtn.disabled = true;
-
-      expect(saveBtn.textContent).toBe('Saving...');
-      expect(saveBtn.disabled).toBe(true);
-
-      // Restore state
-      saveBtn.textContent = originalText;
-      saveBtn.disabled = false;
-
-      expect(saveBtn.textContent).toBe('Save All');
-      expect(saveBtn.disabled).toBe(false);
-    });
-
-    test('should maintain button visibility states', () => {
-      const buttons = {
-        edit: document.querySelector('.edit-btn'),
-        accept: document.querySelector('.accept-btn'),
-        cancel: document.querySelector('.cancel-btn')
-      };
-
-      // Default state: edit visible, accept/cancel hidden
-      expect(buttons.edit.style.display).not.toBe('none');
-      expect(buttons.accept.style.display).toBe('none');
-      expect(buttons.cancel.style.display).toBe('none');
-    });
-  });
-
-  describe('DOM event handling', () => {
-    test('should handle click events correctly', () => {
-      const addSectionBtn = document.querySelector('.add-section-btn');
-      let clicked = false;
-
-      addSectionBtn.addEventListener('click', () => {
-        clicked = true;
-      });
-
-      addSectionBtn.click();
-
-      expect(clicked).toBe(true);
-    });
-
-    test('should handle keyboard events for accessibility', () => {
-      const editBtn = document.querySelector('.edit-btn');
-      let keyPressed = false;
-
-      editBtn.addEventListener('keydown', (event) => {
-        if (event.key === 'Enter' || event.key === ' ') {
-          keyPressed = true;
-        }
-      });
-
-      // Simulate Enter key press
-      const enterEvent = new KeyboardEvent('keydown', {
-        key: 'Enter',
-        bubbles: true
-      });
-
-      editBtn.dispatchEvent(enterEvent);
-
-      expect(keyPressed).toBe(true);
-    });
-
-    test('should handle focus and blur events', () => {
-      const editBtn = document.querySelector('.edit-btn');
-      let focused = false;
-      let blurred = false;
-
-      editBtn.addEventListener('focus', () => {
-        focused = true;
-      });
-
-      editBtn.addEventListener('blur', () => {
-        blurred = true;
-      });
-
-      editBtn.focus();
-      expect(focused).toBe(true);
-
-      editBtn.blur();
-      expect(blurred).toBe(true);
-    });
-  });
-
-  describe('Button positioning and layout', () => {
-    test('should position floating controls correctly', () => {
-      const floatingControls = document.querySelector('.floating-controls');
-
-      // Test positioning properties
-      floatingControls.style.position = 'fixed';
-      floatingControls.style.top = '20px';
-      floatingControls.style.right = '20px';
-
-      expect(floatingControls.style.position).toBe('fixed');
-      expect(floatingControls.style.top).toBe('20px');
-      expect(floatingControls.style.right).toBe('20px');
-    });
-
-    test('should handle responsive button layouts', () => {
-      const sectionControls = document.querySelector('.section-controls');
-
-      // Test responsive classes
-      sectionControls.classList.add('responsive-controls');
-
-      expect(sectionControls.classList.contains('responsive-controls')).toBe(true);
-    });
-
-    test('should maintain button alignment in sections', () => {
-      const controls = document.querySelector('.section-controls');
-      const buttons = controls.querySelectorAll('button');
-
-      expect(buttons.length).toBeGreaterThan(0);
-
-      // All buttons should be in the same container
-      buttons.forEach(button => {
-        expect(button.parentElement).toBe(controls);
-      });
-    });
-  });
-
-  describe('Button confirmation dialogs', () => {
-    test('should show confirmation for destructive actions', () => {
-      const deleteBtn = document.querySelector('.delete-btn');
-
-      // Mock confirm dialog
-      window.confirm = jest.fn(() => false);
-
-      deleteBtn.addEventListener('click', () => {
-        if (window.confirm('Are you sure you want to delete this section?')) {
-          // Perform deletion
-        }
-      });
-
-      deleteBtn.click();
-
-      // Should show confirmation
-      expect(window.confirm).toHaveBeenCalledWith('Are you sure you want to delete this section?');
-    });
-
-    test('should cancel action when confirmation is denied', () => {
-      const deleteBtn = document.querySelector('.delete-btn');
-      let deleted = false;
-
-      window.confirm = jest.fn(() => false);
-
-      deleteBtn.addEventListener('click', () => {
-        if (window.confirm('Are you sure?')) {
-          deleted = true;
-        }
-      });
-
-      deleteBtn.click();
-
-      expect(deleted).toBe(false);
-    });
-  });
-
-  describe('DocumentControls integration', () => {
-    test('should integrate with DocumentControls class', () => {
-      if (documentControls) {
-        expect(typeof documentControls.create).toBe('function');
-        expect(typeof documentControls.addButton).toBe('function');
-        expect(typeof documentControls.setEventHandlers).toBe('function');
-      }
-    });
-
-    test('should handle button events through DocumentControls', () => {
-      if (!documentControls) return;
-
-      // Test that DocumentControls can manage event handlers
-      expect(documentControls.eventHandlers).toBeDefined();
-      expect(documentControls.eventHandlers instanceof Map).toBe(true);
-    });
-
-    test('should handle button actions through event delegation', () => {
-      const content = document.getElementById('content');
-      let actionTriggered = '';
-
-      content.addEventListener('click', (event) => {
-        if (event.target.matches('button[data-action]')) {
-          actionTriggered = event.target.getAttribute('data-action');
-        }
-      });
-
-      const editBtn = document.querySelector('.edit-btn');
-      editBtn.click();
-
-      expect(actionTriggered).toBe('edit');
-    });
-  });
-});
--- a/capabilities/testdrive-jsui/js/tests/component-integration.test.js
+++ b/capabilities/testdrive-jsui/js/tests/component-integration.test.js
@@ -1,86 +0,0 @@
-/**
- * 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();
-    });
-});
--- a/capabilities/testdrive-jsui/js/tests/image-editing.test.js
+++ b/capabilities/testdrive-jsui/js/tests/image-editing.test.js
@@ -1,280 +0,0 @@
-/**
- * Image Editing Functionality Tests
- *
- * Tests image editing, positioning, and reset functionality
- * Based on functionality from history/javascript-dev-tests/test_*image*.js files
- */
-
-describe('Image Editing', () => {
-  let mockImageSection;
-  let mockImageElement;
-
-  beforeEach(() => {
-    // Setup DOM with image section
-    document.body.innerHTML = `
-      <div id="content">
-        <div class="section image-section" data-section-id="image-section-1">
-          <div class="section-content">
-            <img src="test-image.jpg" alt="Test image" class="section-image">
-            <div class="image-controls">
-              <button class="edit-image-btn">Edit Image</button>
-              <button class="reset-image-btn">Reset</button>
-            </div>
-            <div class="image-editor-dialog" style="display: none;">
-              <textarea class="alt-text-input" placeholder="Alt text"></textarea>
-              <input type="text" class="image-caption" placeholder="Caption">
-              <button class="apply-image-changes">Apply</button>
-              <button class="cancel-image-changes">Cancel</button>
-            </div>
-          </div>
-        </div>
-      </div>
-    `;
-
-    mockImageSection = document.querySelector('.image-section');
-    mockImageElement = document.querySelector('.section-image');
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-    jest.clearAllMocks();
-  });
-
-  describe('Image editor dialog', () => {
-    test('should show image editor when edit button is clicked', () => {
-      const editButton = document.querySelector('.edit-image-btn');
-      const dialog = document.querySelector('.image-editor-dialog');
-
-      expect(editButton).toBeTruthy();
-      expect(dialog).toBeTruthy();
-
-      // Simulate edit button click
-      editButton.click();
-
-      // In real implementation, dialog should become visible
-      expect(dialog.style.display).toBe('none'); // Initially hidden
-    });
-
-    test('should populate current alt text and caption', () => {
-      const altTextInput = document.querySelector('.alt-text-input');
-      const captionInput = document.querySelector('.image-caption');
-
-      expect(altTextInput).toBeTruthy();
-      expect(captionInput).toBeTruthy();
-
-      // Simulate populating current values
-      const currentAlt = mockImageElement.alt;
-      altTextInput.value = currentAlt;
-
-      expect(altTextInput.value).toBe(currentAlt);
-    });
-
-    test('should handle dialog positioning correctly', () => {
-      const dialog = document.querySelector('.image-editor-dialog');
-
-      // Test that dialog positioning can be set
-      dialog.style.position = 'absolute';
-      dialog.style.top = '100px';
-      dialog.style.left = '100px';
-
-      expect(dialog.style.position).toBe('absolute');
-      expect(dialog.style.top).toBe('100px');
-      expect(dialog.style.left).toBe('100px');
-    });
-  });
-
-  describe('Image modifications', () => {
-    test('should update alt text when applied', () => {
-      const altTextInput = document.querySelector('.alt-text-input');
-      const applyButton = document.querySelector('.apply-image-changes');
-
-      const newAltText = 'Updated alt text for image';
-      altTextInput.value = newAltText;
-
-      // Simulate apply action
-      applyButton.click();
-
-      // In real implementation, image alt text should be updated
-      expect(altTextInput.value).toBe(newAltText);
-    });
-
-    test('should update image caption when applied', () => {
-      const captionInput = document.querySelector('.image-caption');
-      const newCaption = 'Updated image caption';
-
-      captionInput.value = newCaption;
-
-      expect(captionInput.value).toBe(newCaption);
-    });
-
-    test('should validate required fields', () => {
-      const altTextInput = document.querySelector('.alt-text-input');
-
-      // Test empty alt text validation
-      altTextInput.value = '';
-
-      const isEmpty = altTextInput.value.trim() === '';
-      expect(isEmpty).toBe(true);
-
-      // Test filled alt text
-      altTextInput.value = 'Valid alt text';
-      const isFilled = altTextInput.value.trim() !== '';
-      expect(isFilled).toBe(true);
-    });
-  });
-
-  describe('Image reset functionality', () => {
-    test('should reset image to original state', () => {
-      const resetButton = document.querySelector('.reset-image-btn');
-      const altTextInput = document.querySelector('.alt-text-input');
-
-      // Store original values
-      const originalAlt = mockImageElement.alt;
-
-      // Modify values
-      altTextInput.value = 'Modified alt text';
-      mockImageElement.alt = 'Modified alt';
-
-      // Simulate reset
-      resetButton.click();
-
-      // In real implementation, should restore original values
-      expect(resetButton).toBeTruthy();
-    });
-
-    test('should confirm before resetting changes', () => {
-      const resetButton = document.querySelector('.reset-image-btn');
-
-      // Mock confirm dialog
-      window.confirm = jest.fn(() => true);
-
-      resetButton.click();
-
-      // In real implementation, should show confirmation
-      expect(resetButton).toBeTruthy();
-    });
-
-    test('should preserve original image data', () => {
-      // Test that original image data is stored
-      const originalData = {
-        src: mockImageElement.src,
-        alt: mockImageElement.alt,
-        caption: ''
-      };
-
-      expect(originalData.src).toBeTruthy();
-      expect(typeof originalData.alt).toBe('string');
-      expect(typeof originalData.caption).toBe('string');
-    });
-  });
-
-  describe('Image editor UI controls', () => {
-    test('should handle cancel button correctly', () => {
-      const cancelButton = document.querySelector('.cancel-image-changes');
-      const dialog = document.querySelector('.image-editor-dialog');
-
-      cancelButton.click();
-
-      // In real implementation, should close dialog without saving
-      expect(cancelButton).toBeTruthy();
-      expect(dialog).toBeTruthy();
-    });
-
-    test('should close dialog after applying changes', () => {
-      const applyButton = document.querySelector('.apply-image-changes');
-      const dialog = document.querySelector('.image-editor-dialog');
-
-      applyButton.click();
-
-      // In real implementation, should close dialog after applying
-      expect(applyButton).toBeTruthy();
-      expect(dialog.style.display).toBe('none');
-    });
-
-    test('should handle escape key to cancel', () => {
-      const dialog = document.querySelector('.image-editor-dialog');
-      const altTextInput = document.querySelector('.alt-text-input');
-
-      // Simulate escape key press
-      const escapeEvent = new KeyboardEvent('keydown', {
-        key: 'Escape',
-        bubbles: true
-      });
-
-      altTextInput.dispatchEvent(escapeEvent);
-
-      // In real implementation, should close dialog
-      expect(dialog).toBeTruthy();
-    });
-  });
-
-  describe('Advanced image editor features', () => {
-    test('should support image URL editing', () => {
-      const imageUrl = mockImageElement.src;
-
-      // Test URL validation
-      const isValidUrl = /^https?:\/\//.test(imageUrl) || imageUrl.startsWith('/') || imageUrl.startsWith('./');
-
-      // Local files and URLs should be valid
-      expect(typeof imageUrl).toBe('string');
-    });
-
-    test('should handle image loading errors', () => {
-      const errorHandler = jest.fn();
-
-      mockImageElement.onerror = errorHandler;
-      mockImageElement.src = 'invalid-image-url.jpg';
-
-      // In real implementation, should handle image load errors
-      expect(mockImageElement.onerror).toBe(errorHandler);
-    });
-
-    test('should support image alignment options', () => {
-      const alignmentOptions = ['left', 'center', 'right', 'full-width'];
-
-      alignmentOptions.forEach(alignment => {
-        mockImageElement.className = `section-image align-${alignment}`;
-        expect(mockImageElement.className).toContain(`align-${alignment}`);
-      });
-    });
-
-    test('should handle responsive image sizing', () => {
-      // Test responsive image attributes
-      mockImageElement.style.maxWidth = '100%';
-      mockImageElement.style.height = 'auto';
-
-      expect(mockImageElement.style.maxWidth).toBe('100%');
-      expect(mockImageElement.style.height).toBe('auto');
-    });
-  });
-
-  describe('Image section integration', () => {
-    test('should maintain section integrity during image editing', () => {
-      const sectionId = mockImageSection.getAttribute('data-section-id');
-
-      expect(sectionId).toBeTruthy();
-      expect(mockImageSection.classList.contains('image-section')).toBe(true);
-    });
-
-    test('should handle multiple images in one section', () => {
-      // Add another image to the section
-      const secondImage = document.createElement('img');
-      secondImage.src = 'second-image.jpg';
-      secondImage.alt = 'Second image';
-      secondImage.className = 'section-image';
-
-      mockImageSection.querySelector('.section-content').appendChild(secondImage);
-
-      const images = mockImageSection.querySelectorAll('.section-image');
-      expect(images.length).toBe(2);
-    });
-
-    test('should preserve section order when editing images', () => {
-      const sectionContent = mockImageSection.querySelector('.section-content');
-      const children = Array.from(sectionContent.children);
-
-      const imageIndex = children.findIndex(child => child.tagName === 'IMG');
-      expect(imageIndex).toBeGreaterThanOrEqual(0);
-    });
-  });
-});
--- a/capabilities/testdrive-jsui/js/tests/jest.setup.js
+++ b/capabilities/testdrive-jsui/js/tests/jest.setup.js
@@ -1,26 +0,0 @@
-/**
- * Jest Setup File for JavaScript UI Tests
- *
- * Sets up environment and global utilities for testing.
- * Jest with jsdom environment already provides DOM globals.
- */
-
-// Add TextEncoder/TextDecoder polyfills for Node.js compatibility
-const { TextEncoder, TextDecoder } = require('util');
-global.TextEncoder = TextEncoder;
-global.TextDecoder = TextDecoder;
-
-// Mock console methods to reduce noise in tests
-const originalLog = console.log;
-console.log = (...args) => {
-    // Only log if DEBUG_TESTS environment variable is set
-    if (process.env.DEBUG_TESTS) {
-        originalLog(...args);
-    }
-};
-
-// Setup DOM fixtures after page load
-beforeEach(() => {
-    // Reset document body for each test
-    document.body.innerHTML = '<div id="content"></div>';
-});
--- a/capabilities/testdrive-jsui/js/tests/keyboard-shortcuts.test.js
+++ b/capabilities/testdrive-jsui/js/tests/keyboard-shortcuts.test.js
@@ -1,219 +0,0 @@
-/**
- * Keyboard Shortcuts Functionality Tests
- *
- * Tests keyboard shortcuts for section editing (Ctrl+Enter, Escape, etc.)
- * Based on functionality from history/javascript-dev-tests/test_keyboard_shortcuts.js
- */
-
-describe('Keyboard Shortcuts', () => {
-  let domRenderer;
-  let mockTextarea;
-
-  beforeEach(() => {
-    // Setup DOM
-    document.body.innerHTML = `
-      <div id="content">
-        <div class="section" data-section-id="test-section">
-          <textarea class="edit-textarea">Test content</textarea>
-        </div>
-      </div>
-    `;
-
-    // Load components
-    require('../components/dom-renderer.js');
-    require('../core/section-manager.js');
-
-    // Mock SectionManager with event system
-    const mockSectionManager = {
-      on: jest.fn(),
-      emit: jest.fn(),
-      handleSectionSplit: jest.fn(),
-      sections: []
-    };
-
-    if (global.DOMRenderer) {
-      // Create DOMRenderer with mocked dependencies
-      try {
-        domRenderer = new global.DOMRenderer(mockSectionManager, document.getElementById('content'));
-      } catch (error) {
-        // If constructor fails, create a mock with the methods we need
-        domRenderer = {
-          applyChanges: jest.fn(),
-          cancelEdit: jest.fn()
-        };
-      }
-    }
-
-    mockTextarea = document.querySelector('.edit-textarea');
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-    jest.clearAllMocks();
-  });
-
-  describe('Ctrl+Enter shortcut (Accept Changes)', () => {
-    test('should apply changes when Ctrl+Enter is pressed', () => {
-      if (!mockTextarea) {
-        console.warn('Textarea not available, skipping test');
-        return;
-      }
-
-      // Test that Ctrl+Enter event can be dispatched
-      const ctrlEnterEvent = new KeyboardEvent('keydown', {
-        key: 'Enter',
-        ctrlKey: true,
-        bubbles: true
-      });
-
-      let eventFired = false;
-      mockTextarea.addEventListener('keydown', (e) => {
-        if (e.ctrlKey && e.key === 'Enter') {
-          eventFired = true;
-        }
-      });
-
-      mockTextarea.dispatchEvent(ctrlEnterEvent);
-
-      // Verify event was handled
-      expect(eventFired).toBe(true);
-    });
-
-    test('should prevent default behavior on Ctrl+Enter', () => {
-      if (!mockTextarea) return;
-
-      const preventDefault = jest.fn();
-      const ctrlEnterEvent = new KeyboardEvent('keydown', {
-        key: 'Enter',
-        ctrlKey: true,
-        bubbles: true
-      });
-
-      // Mock preventDefault
-      ctrlEnterEvent.preventDefault = preventDefault;
-
-      mockTextarea.dispatchEvent(ctrlEnterEvent);
-
-      // Note: In real implementation, preventDefault should be called
-      // This test documents the expected behavior
-      expect(true).toBe(true); // Placeholder for actual implementation check
-    });
-  });
-
-  describe('Escape shortcut (Cancel Changes)', () => {
-    test('should cancel changes when Escape is pressed', () => {
-      if (!mockTextarea) {
-        console.warn('Textarea not available, skipping test');
-        return;
-      }
-
-      // Test that Escape event can be dispatched
-      const escapeEvent = new KeyboardEvent('keydown', {
-        key: 'Escape',
-        bubbles: true
-      });
-
-      let escapePressed = false;
-      mockTextarea.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
-          escapePressed = true;
-        }
-      });
-
-      mockTextarea.dispatchEvent(escapeEvent);
-
-      // Verify escape was detected
-      expect(escapePressed).toBe(true);
-    });
-
-    test('should restore original content on Escape', () => {
-      if (!mockTextarea) return;
-
-      const originalContent = 'Original content';
-      mockTextarea.setAttribute('data-original-content', originalContent);
-      mockTextarea.value = 'Modified content';
-
-      const escapeEvent = new KeyboardEvent('keydown', {
-        key: 'Escape',
-        bubbles: true
-      });
-
-      mockTextarea.dispatchEvent(escapeEvent);
-
-      // In real implementation, content should be restored
-      // This test documents the expected behavior
-      expect(mockTextarea.getAttribute('data-original-content')).toBe(originalContent);
-    });
-  });
-
-  describe('Keyboard shortcuts integration', () => {
-    test('should bind keyboard handlers to textareas', () => {
-      const textarea = document.createElement('textarea');
-      textarea.className = 'edit-textarea';
-      document.body.appendChild(textarea);
-
-      // Check if event listeners can be added (integration test)
-      let listenerAdded = false;
-      const originalAddEventListener = textarea.addEventListener;
-      textarea.addEventListener = jest.fn((event, handler) => {
-        if (event === 'keydown') {
-          listenerAdded = true;
-        }
-        return originalAddEventListener.call(textarea, event, handler);
-      });
-
-      // In real implementation, DOMRenderer should bind keydown listeners
-      // This test ensures the capability exists
-      expect(textarea.addEventListener).toBeDefined();
-      expect(typeof textarea.addEventListener).toBe('function');
-    });
-
-    test('should handle multiple keyboard events correctly', () => {
-      if (!mockTextarea) return;
-
-      const events = [
-        { key: 'Enter', ctrlKey: true },
-        { key: 'Escape', ctrlKey: false },
-        { key: 'Tab', ctrlKey: false }
-      ];
-
-      events.forEach(eventData => {
-        const event = new KeyboardEvent('keydown', {
-          ...eventData,
-          bubbles: true
-        });
-
-        // Should not throw errors when handling various key events
-        expect(() => {
-          mockTextarea.dispatchEvent(event);
-        }).not.toThrow();
-      });
-    });
-  });
-
-  describe('Keyboard shortcuts accessibility', () => {
-    test('should provide keyboard alternatives to mouse actions', () => {
-      // This test ensures keyboard accessibility is maintained
-      const shortcuts = [
-        { key: 'Enter', ctrlKey: true, action: 'apply' },
-        { key: 'Escape', ctrlKey: false, action: 'cancel' }
-      ];
-
-      shortcuts.forEach(shortcut => {
-        expect(shortcut.key).toBeDefined();
-        expect(shortcut.action).toBeDefined();
-      });
-    });
-
-    test('should work with screen readers and assistive technology', () => {
-      if (!mockTextarea) return;
-
-      // Test ARIA attributes and accessibility features
-      mockTextarea.setAttribute('aria-label', 'Edit section content');
-      mockTextarea.setAttribute('role', 'textbox');
-
-      expect(mockTextarea.getAttribute('aria-label')).toBeTruthy();
-      expect(mockTextarea.getAttribute('role')).toBe('textbox');
-    });
-  });
-});
--- a/capabilities/testdrive-jsui/js/tests/refactor-test-runner.js
+++ b/capabilities/testdrive-jsui/js/tests/refactor-test-runner.js
@@ -1,216 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * TDD Test Runner for JavaScript Refactoring
- *
- * Drives component extraction and testing during architecture refactoring.
- * Ensures all functionality remains stable while achieving separation of concerns.
- */
-
-class RefactorTestRunner {
-    constructor() {
-        this.tests = [];
-        this.passed = 0;
-        this.failed = 0;
-        this.currentSuite = null;
-        this.setupDOM();
-    }
-
-    setupDOM() {
-        // Set up minimal DOM environment for testing
-        if (typeof document === 'undefined') {
-            const { JSDOM } = require('jsdom');
-            const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>', {
-                url: 'http://localhost',
-                pretendToBeVisual: true,
-                resources: 'usable'
-            });
-
-            global.window = dom.window;
-            global.document = dom.window.document;
-            global.HTMLElement = dom.window.HTMLElement;
-            global.Event = dom.window.Event;
-            global.CustomEvent = dom.window.CustomEvent;
-
-            // Only set navigator if it doesn't exist
-            if (typeof global.navigator === 'undefined') {
-                global.navigator = dom.window.navigator;
-            }
-        }
-    }
-
-    describe(suiteName, fn) {
-        console.log(`\n📁 ${suiteName}`);
-        this.currentSuite = suiteName;
-        fn();
-        this.currentSuite = null;
-    }
-
-    it(testName, fn) {
-        const fullName = this.currentSuite ? `${this.currentSuite}: ${testName}` : testName;
-
-        try {
-            fn();
-            console.log(`  ✅ ${testName}`);
-            this.passed++;
-        } catch (error) {
-            console.log(`  ❌ ${testName}`);
-            console.log(`     Error: ${error.message}`);
-            if (error.stack) {
-                console.log(`     Stack: ${error.stack.split('\n')[1]?.trim()}`);
-            }
-            this.failed++;
-        }
-    }
-
-    expect(actual) {
-        return {
-            toBe: (expected) => {
-                if (actual !== expected) {
-                    throw new Error(`Expected ${expected}, got ${actual}`);
-                }
-            },
-            toBeTruthy: () => {
-                if (!actual) {
-                    throw new Error(`Expected truthy value, got ${actual}`);
-                }
-            },
-            toBeFalsy: () => {
-                if (actual) {
-                    throw new Error(`Expected falsy value, got ${actual}`);
-                }
-            },
-            toEqual: (expected) => {
-                if (JSON.stringify(actual) !== JSON.stringify(expected)) {
-                    throw new Error(`Expected ${JSON.stringify(expected)}, got ${JSON.stringify(actual)}`);
-                }
-            },
-            toContain: (expected) => {
-                if (!actual.includes(expected)) {
-                    throw new Error(`Expected ${actual} to contain ${expected}`);
-                }
-            },
-            toHaveProperty: (property) => {
-                if (!(property in actual)) {
-                    throw new Error(`Expected object to have property ${property}`);
-                }
-            },
-            toBeInstanceOf: (expectedClass) => {
-                if (!(actual instanceof expectedClass)) {
-                    throw new Error(`Expected instance of ${expectedClass.name}, got ${actual.constructor.name}`);
-                }
-            }
-        };
-    }
-
-    /**
-     * Test that a component can be extracted from the monolith without breaking functionality
-     */
-    testComponentExtraction(componentName, extractFn, originalTests) {
-        this.describe(`Component Extraction: ${componentName}`, () => {
-            this.it('should extract without syntax errors', () => {
-                try {
-                    const component = extractFn();
-                    this.expect(component).toBeTruthy();
-                } catch (error) {
-                    throw new Error(`Component extraction failed: ${error.message}`);
-                }
-            });
-
-            this.it('should maintain original API', () => {
-                const component = extractFn();
-                originalTests.forEach(test => {
-                    try {
-                        test(component);
-                    } catch (error) {
-                        throw new Error(`API compatibility test failed: ${error.message}`);
-                    }
-                });
-            });
-        });
-    }
-
-    /**
-     * Test component integration after extraction
-     */
-    testComponentIntegration(components, integrationTests) {
-        this.describe('Component Integration', () => {
-            integrationTests.forEach((test, index) => {
-                this.it(`integration test ${index + 1}`, () => {
-                    test(components);
-                });
-            });
-        });
-    }
-
-    /**
-     * Setup test environment with mock dependencies
-     */
-    setupTestEnvironment() {
-        // Create test container
-        const container = document.createElement('div');
-        container.id = 'test-container';
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        // Mock any global dependencies
-        global.mockSectionManager = {
-            sections: new Map(),
-            createSectionsFromMarkdown: () => [],
-            startEditing: () => true,
-            stopEditing: () => true,
-            getAllSections: () => []
-        };
-
-        return { container };
-    }
-
-    /**
-     * Cleanup test environment
-     */
-    cleanupTestEnvironment() {
-        const container = document.getElementById('test-container');
-        if (container) {
-            container.remove();
-        }
-
-        // Clear any global mocks
-        delete global.mockSectionManager;
-    }
-
-    async run() {
-        console.log('🧪 TDD Refactoring Test Runner Starting...\n');
-
-        const startTime = Date.now();
-
-        // Run all collected tests
-        // Tests will be added by importing component test files
-
-        const endTime = Date.now();
-        const duration = endTime - startTime;
-
-        console.log(`\n📊 Test Results:`);
-        console.log(`   ✅ Passed: ${this.passed}`);
-        console.log(`   ❌ Failed: ${this.failed}`);
-        console.log(`   ⏱️  Duration: ${duration}ms`);
-
-        if (this.failed > 0) {
-            console.log(`\n❌ ${this.failed} test(s) failed. Refactoring should not proceed.`);
-            process.exit(1);
-        } else {
-            console.log(`\n✅ All tests passed! Refactoring is safe to continue.`);
-        }
-    }
-}
-
-// Export for use in component tests
-if (typeof module !== 'undefined' && module.exports) {
-    module.exports = { RefactorTestRunner };
-}
-
-// Export for browser use
-if (typeof window !== 'undefined') {
-    window.RefactorTestRunner = RefactorTestRunner;
-}
-
-module.exports = RefactorTestRunner;
--- a/capabilities/testdrive-jsui/js/tests/section-splitting.test.js
+++ b/capabilities/testdrive-jsui/js/tests/section-splitting.test.js
@@ -1,267 +0,0 @@
-/**
- * Section Splitting Functionality Tests
- *
- * Tests dynamic section splitting when headings are detected
- * Based on functionality from history/javascript-dev-tests/test_section_splitting.js
- */
-
-describe('Section Splitting', () => {
-  let sectionManager;
-
-  beforeEach(() => {
-    // Setup DOM
-    document.body.innerHTML = `
-      <div id="content">
-        <div class="section" data-section-id="main-section">
-          <div class="section-content">
-            <p>Original content</p>
-          </div>
-        </div>
-      </div>
-    `;
-
-    // Load components
-    require('../core/section-manager.js');
-
-    if (global.SectionManager) {
-      sectionManager = new global.SectionManager();
-    }
-  });
-
-  afterEach(() => {
-    document.body.innerHTML = '';
-    jest.clearAllMocks();
-  });
-
-  describe('Heading detection', () => {
-    test('should detect new headings in content', () => {
-      const textWithHeading = `
-        This is some content.
-
-        # New Heading
-
-        This should be a new section.
-      `;
-
-      // Test heading detection with regex
-      const lines = textWithHeading.trim().split('\n');
-      const headingLine = lines.find(line => /^#+ /.test(line.trim()));
-      expect(headingLine).toBeTruthy();
-      expect(headingLine.trim()).toBe('# New Heading');
-    });
-
-    test('should identify different heading levels', () => {
-      const headingTests = [
-        { text: '# Heading 1', level: 1 },
-        { text: '## Heading 2', level: 2 },
-        { text: '### Heading 3', level: 3 },
-        { text: '#### Heading 4', level: 4 }
-      ];
-
-      headingTests.forEach(({ text, level }) => {
-        const match = text.match(/^(#+) /);
-        expect(match).toBeTruthy();
-        if (match) {
-          expect(match[1].length).toBe(level);
-        }
-      });
-    });
-
-    test('should distinguish headings from regular text', () => {
-      const testCases = [
-        { text: '# This is a heading', isHeading: true },
-        { text: 'This is not a heading', isHeading: false },
-        { text: 'Neither is this # hash in middle', isHeading: false },
-        { text: '## Another heading', isHeading: true }
-      ];
-
-      testCases.forEach(({ text, isHeading }) => {
-        const match = /^#+\s/.test(text.trim());
-        expect(match).toBe(isHeading);
-      });
-    });
-  });
-
-  describe('Section splitting logic', () => {
-    test('should split content when heading is detected', () => {
-      const originalContent = 'Original content without headings';
-      const newContent = `
-        ${originalContent}
-
-        # New Section
-
-        New section content
-      `;
-
-      // Simulate section splitting logic
-      const parts = newContent.split(/\n(?=#)/);
-
-      if (parts.length > 1) {
-        expect(parts.length).toBeGreaterThan(1);
-        expect(parts[0]).toContain('Original content');
-        expect(parts[1]).toContain('# New Section');
-      }
-    });
-
-    test('should preserve content when no headings are present', () => {
-      const content = 'Just regular content without any headings';
-      const parts = content.split(/\n(?=#)/);
-
-      expect(parts.length).toBe(1);
-      expect(parts[0]).toBe(content);
-    });
-
-    test('should handle multiple headings correctly', () => {
-      const contentWithMultipleHeadings = `Initial content
-
-# First Heading
-First section content
-
-## Second Heading
-Second section content
-
-# Third Heading
-Third section content`;
-
-      // Split on lines that start with headings
-      const parts = contentWithMultipleHeadings.split(/\n(?=#)/);
-
-      // Should split into multiple sections
-      expect(parts.length).toBeGreaterThanOrEqual(2);
-
-      // Find heading lines
-      const headings = contentWithMultipleHeadings.match(/^#+.*$/gm);
-      expect(headings).toBeTruthy();
-      expect(headings.length).toBe(3);
-    });
-  });
-
-  describe('SectionManager integration', () => {
-    test('should have handleSectionSplit method', () => {
-      if (!sectionManager) {
-        console.warn('SectionManager not available, skipping test');
-        return;
-      }
-
-      expect(typeof sectionManager.handleSectionSplit).toBe('function');
-    });
-
-    test('should maintain section state during splits', () => {
-      if (!sectionManager) return;
-
-      const originalSectionCount = document.querySelectorAll('.section').length;
-
-      // Mock section splitting
-      const mockNewSection = document.createElement('div');
-      mockNewSection.className = 'section';
-      mockNewSection.setAttribute('data-section-id', 'split-section');
-
-      if (originalSectionCount > 0) {
-        expect(originalSectionCount).toBeGreaterThan(0);
-      }
-    });
-  });
-
-  describe('Dynamic section creation', () => {
-    test('should create new section elements when splitting', () => {
-      const sectionContent = `
-        Original content
-
-        # New Section Title
-
-        New section content
-      `;
-
-      // Simulate section creation
-      const newSection = document.createElement('div');
-      newSection.className = 'section';
-      newSection.setAttribute('data-section-id', 'generated-section-id');
-
-      const contentDiv = document.createElement('div');
-      contentDiv.className = 'section-content';
-      contentDiv.textContent = 'New section content';
-
-      newSection.appendChild(contentDiv);
-
-      expect(newSection.className).toBe('section');
-      expect(newSection.getAttribute('data-section-id')).toBeTruthy();
-      expect(newSection.querySelector('.section-content')).toBeTruthy();
-    });
-
-    test('should generate unique section IDs', () => {
-      const headingText = 'My New Section';
-
-      // Simulate ID generation from heading
-      const sectionId = headingText
-        .toLowerCase()
-        .replace(/[^a-z0-9]+/g, '-')
-        .replace(/^-+|-+$/g, '');
-
-      expect(sectionId).toBe('my-new-section');
-    });
-
-    test('should preserve section hierarchy', () => {
-      const hierarchicalContent = `
-        # Main Section
-        Main content
-
-        ## Subsection
-        Sub content
-
-        ### Sub-subsection
-        Sub-sub content
-      `;
-
-      const headings = hierarchicalContent.match(/^#+.*$/gm);
-
-      if (headings) {
-        expect(headings.length).toBe(3);
-        expect(headings[0]).toMatch(/^# /);
-        expect(headings[1]).toMatch(/^## /);
-        expect(headings[2]).toMatch(/^### /);
-      }
-    });
-  });
-
-  describe('Section splitting edge cases', () => {
-    test('should handle empty headings gracefully', () => {
-      const contentWithEmptyHeading = `
-        Content before
-
-        #
-
-        Content after
-      `;
-
-      const parts = contentWithEmptyHeading.split(/\n(?=#)/);
-      expect(parts.length).toBeGreaterThanOrEqual(1);
-    });
-
-    test('should handle headings at the start of content', () => {
-      const contentStartingWithHeading = `# First Heading
-        Content for first section
-
-        # Second Heading
-        Content for second section
-      `;
-
-      const parts = contentStartingWithHeading.split(/\n(?=#)/);
-      expect(parts[0]).toContain('# First Heading');
-    });
-
-    test('should handle malformed headings', () => {
-      const malformedHeadings = [
-        '#NoSpace',
-        '# ',
-        '########## Too many hashes',
-        'Not a heading # at all'
-      ];
-
-      malformedHeadings.forEach(text => {
-        const isValidHeading = /^#{1,6}\s+\S/.test(text);
-        // Most should be invalid except properly formatted ones
-        expect(typeof isValidHeading).toBe('boolean');
-      });
-    });
-  });
-});
--- a/capabilities/testdrive-jsui/js/tests/setup.js
+++ b/capabilities/testdrive-jsui/js/tests/setup.js
@@ -1,139 +0,0 @@
-/**
- * Jest Test Setup for TestDrive-JSUI
- *
- * Sets up the testing environment for JavaScript UI components.
- * Provides DOM mocking, global utilities, and test helpers.
- */
-
-// Mock DOM globals that might be missing in JSDOM
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}));
-
-global.IntersectionObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}));
-
-// Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation(query => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addListener: jest.fn(), // deprecated
-    removeListener: jest.fn(), // deprecated
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-
-// Mock local storage
-const localStorageMock = {
-  getItem: jest.fn(),
-  setItem: jest.fn(),
-  removeItem: jest.fn(),
-  clear: jest.fn(),
-};
-global.localStorage = localStorageMock;
-
-// Mock session storage
-const sessionStorageMock = {
-  getItem: jest.fn(),
-  setItem: jest.fn(),
-  removeItem: jest.fn(),
-  clear: jest.fn(),
-};
-global.sessionStorage = sessionStorageMock;
-
-// Global test utilities
-global.testUtils = {
-  /**
-   * Create a mock DOM element with specified tag and attributes
-   */
-  createElement: (tag, attributes = {}) => {
-    const element = document.createElement(tag);
-    Object.entries(attributes).forEach(([key, value]) => {
-      element.setAttribute(key, value);
-    });
-    return element;
-  },
-
-  /**
-   * Create a test markdown content div
-   */
-  createMarkdownContent: (content = '# Test Content') => {
-    const div = document.createElement('div');
-    div.id = 'markdown-content';
-    div.innerHTML = content;
-    return div;
-  },
-
-  /**
-   * Wait for next tick (useful for async operations)
-   */
-  nextTick: () => new Promise(resolve => setTimeout(resolve, 0)),
-
-  /**
-   * Simulate user interaction events
-   */
-  simulateEvent: (element, eventType, eventProperties = {}) => {
-    const event = new Event(eventType, { bubbles: true, ...eventProperties });
-    Object.entries(eventProperties).forEach(([key, value]) => {
-      event[key] = value;
-    });
-    element.dispatchEvent(event);
-    return event;
-  },
-
-  /**
-   * Clean up DOM after each test
-   */
-  cleanupDOM: () => {
-    document.body.innerHTML = '';
-    document.head.innerHTML = '';
-  }
-};
-
-// Setup and teardown
-beforeEach(() => {
-  // Reset mocks
-  jest.clearAllMocks();
-
-  // Reset localStorage/sessionStorage
-  localStorageMock.getItem.mockClear();
-  localStorageMock.setItem.mockClear();
-  localStorageMock.removeItem.mockClear();
-  localStorageMock.clear.mockClear();
-
-  sessionStorageMock.getItem.mockClear();
-  sessionStorageMock.setItem.mockClear();
-  sessionStorageMock.removeItem.mockClear();
-  sessionStorageMock.clear.mockClear();
-});
-
-afterEach(() => {
-  // Clean up DOM
-  global.testUtils.cleanupDOM();
-
-  // Clean up any timers
-  jest.runOnlyPendingTimers();
-  jest.useRealTimers();
-});
-
-// Console helpers for test debugging
-global.console = {
-  ...console,
-  // Keep these methods for test debugging
-  log: console.log,
-  warn: console.warn,
-  error: console.error,
-  // Mock these to avoid noise in tests
-  info: jest.fn(),
-  debug: jest.fn(),
-};
--- a/capabilities/testdrive-jsui/js/tests/test-component-integration.js
+++ b/capabilities/testdrive-jsui/js/tests/test-component-integration.js
@@ -1,521 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Comprehensive Component Integration Test
- *
- * Tests that extracted components work together properly.
- * Verifies the complete workflow: Section Creation → Rendering → Editing → Saving
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-runner.describe('Component Integration Tests', () => {
-
-    runner.it('should load all extracted components', () => {
-        try {
-            // Load extracted components
-            const sectionModule = require('../core/section-manager.js');
-            const domModule = require('../components/dom-renderer.js');
-
-            runner.expect(sectionModule.SectionManager).toBeTruthy();
-            runner.expect(sectionModule.Section).toBeTruthy();
-            runner.expect(domModule.DOMRenderer).toBeTruthy();
-            runner.expect(domModule.FloatingMenu).toBeTruthy();
-
-            // Set globals for other tests
-            global.ExtractedSectionManager = sectionModule.SectionManager;
-            global.ExtractedSection = sectionModule.Section;
-            global.ExtractedDOMRenderer = domModule.DOMRenderer;
-            global.ExtractedFloatingMenu = domModule.FloatingMenu;
-            global.ExtractedEditState = sectionModule.EditState;
-
-        } catch (error) {
-            throw new Error(`Failed to load extracted components: ${error.message}`);
-        }
-    });
-
-    runner.it('should support complete section creation workflow', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-
-        // Setup
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Test workflow: Create sections from markdown
-        const testMarkdown = `# Main Heading
-This is the introduction content.
-
-## Subheading One
-Content for first subsection.
-
-![Test Image](https://example.com/image.jpg)
-
-## Subheading Two
-Content for second subsection.`;
-
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-
-
-        // Verify sections were created
-        // Expected: heading+paragraph, heading+paragraph, image, heading+paragraph = 4 sections
-        runner.expect(sections.length).toBe(4);
-        runner.expect(sections[0].type).toBe('heading');
-        runner.expect(sections[2].type).toBe('image');
-
-        // Verify DOM rendering
-        domRenderer.renderAllSections(sections);
-        const renderedElements = container.querySelectorAll('.ui-edit-section');
-        runner.expect(renderedElements.length).toBe(sections.length);
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-
-    runner.it('should support complete editing workflow', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const EditState = global.ExtractedEditState;
-
-        // Setup
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Create and render sections
-        const testMarkdown = '# Test Heading\nOriginal content here.';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-        const section = sectionManager.sections.get(sectionId);
-
-        // Test workflow: Start editing
-        runner.expect(section.state).toBe(EditState.ORIGINAL);
-        runner.expect(section.isEditing()).toBeFalsy();
-
-        const content = sectionManager.startEditing(sectionId);
-        runner.expect(content).toContain('Test Heading');
-        runner.expect(section.isEditing()).toBeTruthy();
-        runner.expect(section.state).toBe(EditState.EDITING);
-
-        // Test workflow: Update content
-        const newContent = '# Updated Heading\nModified content here.';
-        sectionManager.updateContent(sectionId, newContent);
-        runner.expect(section.editingMarkdown).toBe(newContent);
-
-        // Test workflow: Accept changes
-        sectionManager.acceptChanges(sectionId);
-        runner.expect(section.currentMarkdown).toBe(newContent);
-        runner.expect(section.state).toBe(EditState.SAVED);
-        runner.expect(section.isEditing()).toBeFalsy();
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-
-    runner.it('should support accept/cancel button functionality', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-
-        // Setup
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Create and render sections
-        const testMarkdown = '# Test Heading\nOriginal content here.';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-        const section = sectionManager.sections.get(sectionId);
-
-        // Start editing to trigger floating menu with buttons
-        sectionManager.startEditing(sectionId);
-
-        // Check if floating menu exists
-        runner.expect(domRenderer.currentFloatingMenu).toBeTruthy();
-        runner.expect(domRenderer.currentFloatingMenu.isVisible).toBeTruthy();
-
-        // Find buttons in the floating menu
-        const menuElement = domRenderer.currentFloatingMenu.element;
-        runner.expect(menuElement).toBeTruthy();
-
-        const buttons = menuElement.querySelectorAll('button');
-        runner.expect(buttons.length >= 2).toBeTruthy(); // At least Accept and Cancel buttons
-
-        const acceptBtn = Array.from(buttons).find(btn => btn.textContent === 'Accept');
-        const cancelBtn = Array.from(buttons).find(btn => btn.textContent === 'Cancel');
-
-        runner.expect(acceptBtn).toBeTruthy();
-        runner.expect(cancelBtn).toBeTruthy();
-
-        // Test Accept button functionality
-        runner.expect(section.isEditing()).toBeTruthy();
-
-        // Simulate updating content and clicking Accept
-        const textarea = menuElement.querySelector('textarea');
-        runner.expect(textarea).toBeTruthy();
-        textarea.value = '# Updated Heading\nUpdated content via button.';
-
-        acceptBtn.click();
-
-        // After clicking Accept, section should be saved and menu hidden
-        runner.expect(section.isEditing()).toBeFalsy();
-        runner.expect(section.currentMarkdown).toContain('Updated Heading');
-        runner.expect(domRenderer.currentFloatingMenu).toBeFalsy();
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-
-    runner.it('should support cancel button functionality', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-
-        // Setup
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Create and render sections
-        const testMarkdown = '# Original Heading\nOriginal content here.';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-        const section = sectionManager.sections.get(sectionId);
-
-        // Start editing
-        sectionManager.startEditing(sectionId);
-
-        // Find buttons in the floating menu
-        const menuElement = domRenderer.currentFloatingMenu.element;
-        const cancelBtn = Array.from(menuElement.querySelectorAll('button')).find(btn => btn.textContent === 'Cancel');
-
-        runner.expect(cancelBtn).toBeTruthy();
-        runner.expect(section.isEditing()).toBeTruthy();
-
-        // Simulate changing content but then canceling
-        const textarea = menuElement.querySelector('textarea');
-        textarea.value = '# Changed Heading\nThis should be discarded.';
-
-        cancelBtn.click();
-
-        // After clicking Cancel, section should not be saved and menu hidden
-        runner.expect(section.isEditing()).toBeFalsy();
-        runner.expect(section.currentMarkdown).toContain('Original Heading'); // Original content preserved
-        runner.expect(domRenderer.currentFloatingMenu).toBeFalsy();
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-
-    runner.it('should support event-driven communication', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-
-        // Setup
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Track events
-        let sectionsCreatedEvent = null;
-        let editStartedEvent = null;
-
-        sectionManager.on('sections-created', (data) => {
-            sectionsCreatedEvent = data;
-        });
-
-        sectionManager.on('edit-started', (data) => {
-            editStartedEvent = data;
-        });
-
-        // Test event: sections-created
-        const testMarkdown = '# Test\nContent';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-
-        runner.expect(sectionsCreatedEvent).toBeTruthy();
-        runner.expect(sectionsCreatedEvent.sections).toEqual(sections);
-        runner.expect(sectionsCreatedEvent.count).toBe(1);
-
-        // Test event: edit-started
-        const sectionId = sections[0].id;
-        sectionManager.startEditing(sectionId);
-
-        runner.expect(editStartedEvent).toBeTruthy();
-        runner.expect(editStartedEvent.sectionId).toBe(sectionId);
-        runner.expect(editStartedEvent.content).toContain('Test');
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-
-    runner.it('should support section type detection and rendering', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const Section = global.ExtractedSection;
-
-        // Setup
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Test different section types
-        const testMarkdown = `# Heading Section
-Regular paragraph content.
-
-![Image Section](https://example.com/test.jpg)
-
-\`\`\`javascript
-// Code section
-console.log('test');
-\`\`\``;
-
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-
-
-        // Verify type detection - adjusted for actual parsing behavior
-        // Expected: heading+paragraph, image, code = 3 sections
-        runner.expect(sections[0].type).toBe('heading'); // Combined heading+paragraph
-        runner.expect(sections[1].type).toBe('image');   // Image section
-        runner.expect(sections[2].type).toBe('code');    // Code section
-
-        // Verify image detection
-        runner.expect(sections[1].isImage()).toBeTruthy(); // Image is now at index 1
-        runner.expect(sections[0].isImage()).toBeFalsy();
-
-        // Verify rendering handles different types
-        domRenderer.renderAllSections(sections);
-        const renderedElements = container.querySelectorAll('.ui-edit-section');
-        runner.expect(renderedElements.length).toBe(sections.length);
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-
-    runner.it('should support FloatingMenu integration', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const FloatingMenu = global.ExtractedFloatingMenu;
-
-        // Setup
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Create and render sections
-        const testMarkdown = '# Test Heading\nTest content';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-
-        // Test showing editor (which uses FloatingMenu)
-        domRenderer.showEditor(sectionId, 'test content');
-
-        // Verify floating menu state
-        runner.expect(domRenderer.currentFloatingMenu).toBeTruthy();
-        runner.expect(domRenderer.currentFloatingMenu.sectionId).toBe(sectionId);
-        runner.expect(domRenderer.currentFloatingMenu.isVisible).toBeTruthy();
-        runner.expect(domRenderer.editingSections.has(sectionId)).toBeTruthy();
-
-        // Test hiding editor
-        domRenderer.hideCurrentEditor();
-        runner.expect(domRenderer.currentFloatingMenu).toBeFalsy();
-        runner.expect(domRenderer.editingSections.has(sectionId)).toBeFalsy();
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-
-    runner.it('should support complete click-to-edit workflow', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-
-        // Setup
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Create and render sections
-        const testMarkdown = '# Test Heading\nTest content for editing';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-        const element = domRenderer.findSectionElement(sectionId);
-
-        // Simulate click event
-        const clickEvent = new Event('click', { bubbles: true });
-        Object.defineProperty(clickEvent, 'target', { value: element });
-
-        // Test complete workflow
-        domRenderer.handleSectionClick(clickEvent);
-
-        // Verify editing state was triggered
-        const section = sectionManager.sections.get(sectionId);
-        runner.expect(section.isEditing()).toBeTruthy();
-        runner.expect(domRenderer.editingSections.has(sectionId)).toBeTruthy();
-        runner.expect(domRenderer.currentFloatingMenu).toBeTruthy();
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-
-    runner.it('should support document status tracking', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-
-        const sectionManager = new SectionManager();
-        const container = document.createElement('div');
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Test initial status
-        let status = sectionManager.getDocumentStatus();
-        runner.expect(status.totalSections).toBe(0);
-        runner.expect(status.editingSections).toBe(0);
-
-        // Create sections
-        const testMarkdown = '# Section 1\nContent 1\n\n# Section 2\nContent 2';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-
-        status = sectionManager.getDocumentStatus();
-        runner.expect(status.totalSections).toBe(2);
-        runner.expect(status.editingSections).toBe(2); // Bug compatibility (isEditing property exists)
-
-        // Test getAllSections
-        const allSections = sectionManager.getAllSections();
-        runner.expect(allSections.length).toBe(2);
-        runner.expect(allSections[0].currentMarkdown).toContain('Section 1');
-        runner.expect(allSections[1].currentMarkdown).toContain('Section 2');
-    });
-
-    runner.it('should support event tracking and analytics', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-
-        const container = document.createElement('div');
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Test event tracking
-        domRenderer.trackEvent('test-event', { data: 'test' });
-        domRenderer.trackEvent('section-click', { sectionId: 'test-123' });
-
-        const stats = domRenderer.getEventStats();
-        runner.expect(stats.totalEvents).toBe(1); // Only section-click is tracked in stats
-        runner.expect(stats.stats['section-click']).toBe(1);
-        runner.expect(stats.recentEvents.length).toBe(2);
-        runner.expect(stats.recentEvents[0].type).toBe('test-event');
-        runner.expect(stats.recentEvents[1].type).toBe('section-click');
-    });
-
-    // Integration stress test
-    runner.it('should handle complex document with multiple operations', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-
-        // Setup
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        // Complex document
-        const complexMarkdown = `# Document Title
-Introduction paragraph with some content.
-
-## Section A
-Content for section A with details.
-
-![Test Image](https://example.com/test.jpg)
-
-### Subsection A.1
-More detailed content here.
-
-\`\`\`javascript
-function test() {
-    console.log('code block');
-}
-\`\`\`
-
-## Section B
-Final section content.`;
-
-        // Create and render
-        const sections = sectionManager.createSectionsFromMarkdown(complexMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        runner.expect(sections.length).toBe(6); // Adjusted based on actual parsing
-
-        // Test editing multiple sections
-        const firstSection = sections[0];
-        const imageSection = sections.find(s => s.isImage());
-        const codeSection = sections.find(s => s.type === 'code');
-
-        // Edit first section
-        sectionManager.startEditing(firstSection.id);
-        sectionManager.updateContent(firstSection.id, '# Updated Title\nUpdated intro.');
-        sectionManager.acceptChanges(firstSection.id);
-
-        // Edit image section
-        sectionManager.startEditing(imageSection.id);
-        sectionManager.updateContent(imageSection.id, '![Updated Image](https://example.com/new.jpg)');
-        sectionManager.acceptChanges(imageSection.id);
-
-        // Verify changes
-        runner.expect(firstSection.currentMarkdown).toContain('Updated Title');
-        runner.expect(imageSection.currentMarkdown).toContain('Updated Image');
-
-        // Verify document reconstruction
-        const finalMarkdown = sectionManager.getDocumentMarkdown();
-        runner.expect(finalMarkdown).toContain('Updated Title');
-        runner.expect(finalMarkdown).toContain('Updated Image');
-        runner.expect(finalMarkdown).toContain('Section B');
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-});
-
-module.exports = runner;
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Running Component Integration Tests');
-    runner.run().then(() => {
-        console.log('✅ Component integration tests completed');
-    });
-}
--- a/capabilities/testdrive-jsui/js/tests/test-debugpanel-extraction.js
+++ b/capabilities/testdrive-jsui/js/tests/test-debugpanel-extraction.js
@@ -1,191 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * TDD Test for Debug Panel Component Extraction
- *
- * Tests the extraction of DebugPanel from the monolithic editor.js
- * DebugPanel handles debug message display and management.
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-// Define expected DebugPanel API
-const EXPECTED_DEBUGPANEL_API = [
-    'constructor',
-    'toggle',
-    'update',
-    'clear',
-    'addMessage',
-    'show',
-    'hide',
-    'getMessageCount',
-    'getRecentMessages'
-];
-
-runner.describe('DebugPanel Component Extraction', () => {
-
-    runner.it('should define expected API methods', () => {
-        const expectedMethods = EXPECTED_DEBUGPANEL_API;
-        runner.expect(expectedMethods.length).toBe(9);
-        runner.expect(expectedMethods).toContain('toggle');
-        runner.expect(expectedMethods).toContain('update');
-        runner.expect(expectedMethods).toContain('addMessage');
-    });
-
-    runner.it('should load extracted DebugPanel component', () => {
-        // Load the extracted component
-        delete require.cache[require.resolve('../components/debug-panel.js')];
-
-        try {
-            const module = require('../components/debug-panel.js');
-            runner.expect(module.DebugPanel).toBeTruthy();
-
-            // Set global for other tests
-            global.ExtractedDebugPanel = module.DebugPanel;
-        } catch (error) {
-            throw new Error(`Failed to load extracted DebugPanel: ${error.message}`);
-        }
-    });
-
-    runner.it('should preserve constructor functionality', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        const debugPanel = new DebugPanel();
-        runner.expect(debugPanel).toBeInstanceOf(DebugPanel);
-        runner.expect(debugPanel.messages).toBeInstanceOf(Array);
-        runner.expect(debugPanel.isActive).toBeFalsy();
-    });
-
-    runner.it('should preserve message handling functionality', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        const debugPanel = new DebugPanel();
-
-        // Test adding messages
-        debugPanel.addMessage('Test message', 'INFO');
-        runner.expect(debugPanel.getMessageCount()).toBe(1);
-
-        const recentMessages = debugPanel.getRecentMessages(1);
-        runner.expect(recentMessages.length).toBe(1);
-        runner.expect(recentMessages[0].message).toBe('Test message');
-        runner.expect(recentMessages[0].category).toBe('INFO');
-    });
-
-    runner.it('should preserve toggle functionality', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        // Create container element
-        const container = document.createElement('div');
-        container.id = 'debug-messages-container';
-        container.style.display = 'none';
-        document.body.appendChild(container);
-
-        const debugButton = document.createElement('button');
-        debugButton.id = 'toggle-debug';
-        debugButton.textContent = '🔍 Debug';
-        document.body.appendChild(debugButton);
-
-        const debugPanel = new DebugPanel();
-
-        // Test toggle on
-        debugPanel.toggle();
-        runner.expect(debugPanel.isActive).toBeTruthy();
-
-        // Test toggle off
-        debugPanel.toggle();
-        runner.expect(debugPanel.isActive).toBeFalsy();
-
-        // Cleanup
-        document.body.removeChild(container);
-        document.body.removeChild(debugButton);
-    });
-
-    runner.it('should preserve update functionality', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        const container = document.createElement('div');
-        container.id = 'debug-messages-container';
-        document.body.appendChild(container);
-
-        const debugButton = document.createElement('button');
-        debugButton.id = 'toggle-debug';
-        debugButton.textContent = '🔍 Debug';
-        document.body.appendChild(debugButton);
-
-        const debugPanel = new DebugPanel();
-        debugPanel.show();
-
-        debugPanel.addMessage('Test message 1', 'INFO');
-        debugPanel.addMessage('Test message 2', 'ERROR');
-        debugPanel.update();
-
-        runner.expect(container.innerHTML.length > 100).toBeTruthy();
-        runner.expect(container.innerHTML).toContain('Test message 1');
-        runner.expect(container.innerHTML).toContain('Test message 2');
-
-        // Cleanup
-        document.body.removeChild(container);
-        document.body.removeChild(debugButton);
-    });
-
-    runner.it('should preserve clear functionality', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        const debugPanel = new DebugPanel();
-
-        debugPanel.addMessage('Test message 1', 'INFO');
-        debugPanel.addMessage('Test message 2', 'ERROR');
-        runner.expect(debugPanel.getMessageCount()).toBe(2);
-
-        debugPanel.clear();
-        runner.expect(debugPanel.getMessageCount()).toBe(0);
-    });
-
-    runner.it('should have core debug panel methods', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        const debugPanel = new DebugPanel();
-
-        // Should have core methods
-        runner.expect(typeof debugPanel.toggle === 'function').toBeTruthy();
-        runner.expect(typeof debugPanel.update === 'function').toBeTruthy();
-        runner.expect(typeof debugPanel.addMessage === 'function').toBeTruthy();
-        runner.expect(typeof debugPanel.clear === 'function').toBeTruthy();
-    });
-
-    runner.it('should handle message categories properly', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        const debugPanel = new DebugPanel();
-
-        // Test different message categories
-        debugPanel.addMessage('Info message', 'INFO');
-        debugPanel.addMessage('Warning message', 'WARNING');
-        debugPanel.addMessage('Error message', 'ERROR');
-        debugPanel.addMessage('Success message', 'SUCCESS');
-
-        const messages = debugPanel.getRecentMessages(4);
-        runner.expect(messages.length).toBe(4);
-
-        const categories = messages.map(m => m.category);
-        runner.expect(categories).toContain('INFO');
-        runner.expect(categories).toContain('WARNING');
-        runner.expect(categories).toContain('ERROR');
-        runner.expect(categories).toContain('SUCCESS');
-    });
-});
-
-module.exports = {
-    runner,
-    EXPECTED_DEBUGPANEL_API
-};
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Testing DebugPanel Component Extraction');
-    runner.run().then(() => {
-        console.log('✅ DebugPanel extraction tests completed');
-    });
-}
--- a/capabilities/testdrive-jsui/js/tests/test-debugpanel-integration.js
+++ b/capabilities/testdrive-jsui/js/tests/test-debugpanel-integration.js
@@ -1,210 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * DebugPanel Integration Test
- *
- * Tests that the extracted DebugPanel component integrates properly
- * with the existing SectionManager and DOMRenderer components.
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-runner.describe('DebugPanel Integration Tests', () => {
-
-    runner.it('should load all extracted components including DebugPanel', () => {
-        try {
-            // Load extracted components
-            const sectionModule = require('../core/section-manager.js');
-            const domModule = require('../components/dom-renderer.js');
-            const debugModule = require('../components/debug-panel.js');
-
-            runner.expect(sectionModule.SectionManager).toBeTruthy();
-            runner.expect(domModule.DOMRenderer).toBeTruthy();
-            runner.expect(debugModule.DebugPanel).toBeTruthy();
-
-            // Set globals for other tests
-            global.ExtractedSectionManager = sectionModule.SectionManager;
-            global.ExtractedDOMRenderer = domModule.DOMRenderer;
-            global.ExtractedDebugPanel = debugModule.DebugPanel;
-
-        } catch (error) {
-            throw new Error(`Failed to load extracted components: ${error.message}`);
-        }
-    });
-
-    runner.it('should support debug panel with section editing workflow', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        // Setup DOM elements
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const debugContainer = document.createElement('div');
-        debugContainer.id = 'debug-messages-container';
-        debugContainer.style.display = 'none';
-        document.body.appendChild(debugContainer);
-
-        const debugButton = document.createElement('button');
-        debugButton.id = 'toggle-debug';
-        debugButton.textContent = '🔍 Debug';
-        document.body.appendChild(debugButton);
-
-        // Create components
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-        const debugPanel = new DebugPanel();
-
-        // Test workflow: Create sections and debug them
-        const testMarkdown = '# Test Heading\nTest content for debugging';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        // Add debug messages
-        debugPanel.addMessage('Section created: ' + sections[0].id, 'INFO');
-        debugPanel.addMessage('DOM rendered successfully', 'SUCCESS');
-
-        runner.expect(debugPanel.getMessageCount()).toBe(2);
-
-        // Test showing debug panel
-        debugPanel.show();
-        runner.expect(debugPanel.isActive).toBeTruthy();
-
-        // Test debug panel content
-        const messages = debugPanel.getRecentMessages(2);
-        runner.expect(messages[0].message).toContain('Section created');
-        runner.expect(messages[1].message).toContain('DOM rendered');
-
-        // Cleanup
-        document.body.removeChild(container);
-        document.body.removeChild(debugContainer);
-        document.body.removeChild(debugButton);
-    });
-
-    runner.it('should support debug panel clearing and message management', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        const debugPanel = new DebugPanel();
-
-        // Add multiple messages
-        for (let i = 0; i < 10; i++) {
-            debugPanel.addMessage(`Test message ${i}`, i % 2 === 0 ? 'INFO' : 'WARNING');
-        }
-
-        runner.expect(debugPanel.getMessageCount()).toBe(10);
-
-        // Test getting recent messages
-        const recentFive = debugPanel.getRecentMessages(5);
-        runner.expect(recentFive.length).toBe(5);
-        runner.expect(recentFive[4].message).toContain('Test message 9');
-
-        // Test clearing
-        debugPanel.clear();
-        runner.expect(debugPanel.getMessageCount()).toBe(0);
-    });
-
-    runner.it('should handle debug panel DOM integration properly', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        // Setup DOM
-        const debugContainer = document.createElement('div');
-        debugContainer.id = 'debug-messages-container';
-        debugContainer.style.display = 'none';
-        document.body.appendChild(debugContainer);
-
-        const debugButton = document.createElement('button');
-        debugButton.id = 'toggle-debug';
-        debugButton.textContent = '🔍 Debug';
-        debugButton.style.background = '#6c757d';
-        document.body.appendChild(debugButton);
-
-        const debugPanel = new DebugPanel();
-
-        // Test initial state
-        runner.expect(debugPanel.isActive).toBeFalsy();
-        runner.expect(debugContainer.style.display).toBe('none');
-
-        // Test toggle on
-        debugPanel.toggle();
-        runner.expect(debugPanel.isActive).toBeTruthy();
-        runner.expect(debugContainer.style.display).toBe('block');
-        runner.expect(debugButton.textContent).toContain('Debug (ON)');
-
-        // Test toggle off
-        debugPanel.toggle();
-        runner.expect(debugPanel.isActive).toBeFalsy();
-        runner.expect(debugContainer.style.display).toBe('none');
-        runner.expect(debugButton.textContent).toBe('🔍 Debug');
-
-        // Cleanup
-        document.body.removeChild(debugContainer);
-        document.body.removeChild(debugButton);
-    });
-
-    runner.it('should handle missing DOM elements gracefully', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        const debugPanel = new DebugPanel();
-
-        // Try to toggle without DOM elements (should not throw)
-        try {
-            debugPanel.toggle();
-            debugPanel.show();
-            debugPanel.hide();
-            debugPanel.update();
-            runner.expect(true).toBeTruthy(); // If we get here, no errors were thrown
-        } catch (error) {
-            throw new Error(`DebugPanel should handle missing DOM gracefully: ${error.message}`);
-        }
-    });
-
-    runner.it('should support event-driven debug message addition', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DebugPanel = global.ExtractedDebugPanel;
-
-        const sectionManager = new SectionManager();
-        const debugPanel = new DebugPanel();
-
-        // Listen to section manager events and add debug messages
-        let eventCount = 0;
-
-        sectionManager.on('sections-created', (data) => {
-            debugPanel.addMessage(`Sections created: ${data.count} sections`, 'INFO');
-            eventCount++;
-        });
-
-        sectionManager.on('edit-started', (data) => {
-            debugPanel.addMessage(`Edit started for section: ${data.sectionId}`, 'DEBUG');
-            eventCount++;
-        });
-
-        // Create sections
-        const testMarkdown = '# Test\nContent';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-
-        // Start editing
-        sectionManager.startEditing(sections[0].id);
-
-        // Verify debug messages were added
-        runner.expect(eventCount).toBe(2);
-        runner.expect(debugPanel.getMessageCount()).toBe(2);
-
-        const messages = debugPanel.getRecentMessages(2);
-        runner.expect(messages[0].message).toContain('Sections created');
-        runner.expect(messages[1].message).toContain('Edit started');
-    });
-});
-
-module.exports = runner;
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Running DebugPanel Integration Tests');
-    runner.run().then(() => {
-        console.log('✅ DebugPanel integration tests completed');
-    });
-}
--- a/capabilities/testdrive-jsui/js/tests/test-documentcontrols-extraction.js
+++ b/capabilities/testdrive-jsui/js/tests/test-documentcontrols-extraction.js
@@ -1,218 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * TDD Test for Document Controls Component Extraction
- *
- * Tests the extraction of DocumentControls from the monolithic editor.js
- * DocumentControls handles the floating control panel and its actions.
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-// Define expected DocumentControls API
-const EXPECTED_DOCUMENTCONTROLS_API = [
-    'constructor',
-    'create',
-    'destroy',
-    'show',
-    'hide',
-    'addButton',
-    'removeButton',
-    'setEventHandlers',
-    'updateStatus',
-    'getControlPanel'
-];
-
-runner.describe('DocumentControls Component Extraction', () => {
-
-    runner.it('should define expected API methods', () => {
-        const expectedMethods = EXPECTED_DOCUMENTCONTROLS_API;
-        runner.expect(expectedMethods.length).toBe(10);
-        runner.expect(expectedMethods).toContain('create');
-        runner.expect(expectedMethods).toContain('addButton');
-        runner.expect(expectedMethods).toContain('setEventHandlers');
-    });
-
-    runner.it('should load extracted DocumentControls component', () => {
-        // Load the extracted component
-        delete require.cache[require.resolve('../components/document-controls.js')];
-
-        try {
-            const module = require('../components/document-controls.js');
-            runner.expect(module.DocumentControls).toBeTruthy();
-
-            // Set global for other tests
-            global.ExtractedDocumentControls = module.DocumentControls;
-        } catch (error) {
-            throw new Error(`Failed to load extracted DocumentControls: ${error.message}`);
-        }
-    });
-
-    runner.it('should preserve constructor functionality', () => {
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        const controls = new DocumentControls();
-        runner.expect(controls).toBeInstanceOf(DocumentControls);
-        runner.expect(controls.controlPanel).toBeFalsy(); // Initially null
-        runner.expect(controls.buttons).toBeInstanceOf(Map);
-    });
-
-    runner.it('should preserve control panel creation functionality', () => {
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        const controls = new DocumentControls();
-        controls.create();
-
-        const panel = controls.getControlPanel();
-        runner.expect(panel).toBeTruthy();
-        runner.expect(panel.id).toBe('markitect-global-controls');
-
-        // Check that panel is added to DOM
-        const domPanel = document.getElementById('markitect-global-controls');
-        runner.expect(domPanel).toBeTruthy();
-
-        // Cleanup
-        controls.destroy();
-    });
-
-    runner.it('should preserve button creation functionality', () => {
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        const controls = new DocumentControls();
-        controls.create();
-
-        // Default buttons should be created
-        runner.expect(controls.buttons.has('save-document')).toBeTruthy();
-        runner.expect(controls.buttons.has('reset-all')).toBeTruthy();
-        runner.expect(controls.buttons.has('show-status')).toBeTruthy();
-        runner.expect(controls.buttons.has('toggle-debug')).toBeTruthy();
-
-        // Check DOM elements exist
-        runner.expect(document.getElementById('save-document')).toBeTruthy();
-        runner.expect(document.getElementById('reset-all')).toBeTruthy();
-        runner.expect(document.getElementById('show-status')).toBeTruthy();
-        runner.expect(document.getElementById('toggle-debug')).toBeTruthy();
-
-        // Cleanup
-        controls.destroy();
-    });
-
-    runner.it('should support custom button addition', () => {
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        const controls = new DocumentControls();
-        controls.create();
-
-        // Add custom button
-        const customButton = controls.addButton('custom-test', '🎯 Test', '#ff6600');
-        runner.expect(customButton).toBeTruthy();
-        runner.expect(customButton.id).toBe('custom-test');
-        runner.expect(customButton.textContent).toBe('🎯 Test');
-
-        // Check button is in map and DOM
-        runner.expect(controls.buttons.has('custom-test')).toBeTruthy();
-        runner.expect(document.getElementById('custom-test')).toBeTruthy();
-
-        // Cleanup
-        controls.destroy();
-    });
-
-    runner.it('should support event handler configuration', () => {
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        const controls = new DocumentControls();
-        controls.create();
-
-        let saveClicked = false;
-        let resetClicked = false;
-
-        const handlers = {
-            'save-document': () => { saveClicked = true; },
-            'reset-all': () => { resetClicked = true; }
-        };
-
-        controls.setEventHandlers(handlers);
-
-        // Simulate button clicks
-        const saveBtn = document.getElementById('save-document');
-        const resetBtn = document.getElementById('reset-all');
-
-        saveBtn.click();
-        resetBtn.click();
-
-        runner.expect(saveClicked).toBeTruthy();
-        runner.expect(resetClicked).toBeTruthy();
-
-        // Cleanup
-        controls.destroy();
-    });
-
-    runner.it('should support show/hide functionality', () => {
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        const controls = new DocumentControls();
-        controls.create();
-
-        const panel = controls.getControlPanel();
-
-        // Test hiding
-        controls.hide();
-        runner.expect(panel.style.display).toBe('none');
-
-        // Test showing
-        controls.show();
-        runner.expect(panel.style.display).toBe('block');
-
-        // Cleanup
-        controls.destroy();
-    });
-
-    runner.it('should preserve destroy functionality', () => {
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        const controls = new DocumentControls();
-        controls.create();
-
-        // Verify panel exists
-        runner.expect(document.getElementById('markitect-global-controls')).toBeTruthy();
-
-        // Destroy
-        controls.destroy();
-
-        // Verify panel is removed
-        runner.expect(document.getElementById('markitect-global-controls')).toBeFalsy();
-        runner.expect(controls.controlPanel).toBeFalsy();
-    });
-
-    runner.it('should support status updates', () => {
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        const controls = new DocumentControls();
-        controls.create();
-
-        // Test status update
-        controls.updateStatus({ totalSections: 5, editingSections: 2 });
-
-        // The status should be reflected in the panel (implementation specific)
-        const panel = controls.getControlPanel();
-        runner.expect(panel).toBeTruthy();
-
-        // Cleanup
-        controls.destroy();
-    });
-});
-
-module.exports = {
-    runner,
-    EXPECTED_DOCUMENTCONTROLS_API
-};
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Testing DocumentControls Component Extraction');
-    runner.run().then(() => {
-        console.log('✅ DocumentControls extraction tests completed');
-    });
-}
--- a/capabilities/testdrive-jsui/js/tests/test-domrenderer-extraction.js
+++ b/capabilities/testdrive-jsui/js/tests/test-domrenderer-extraction.js
@@ -1,212 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * TDD Test for DOMRenderer Component Extraction
- *
- * Tests the extraction of DOMRenderer from the monolithic editor.js
- * DOMRenderer handles all DOM interactions and UI rendering.
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-// Define expected DOMRenderer API
-const EXPECTED_DOMRENDERER_API = [
-    'constructor',
-    'renderAllSections',
-    'renderSection',
-    'showEditor',
-    'hideCurrentEditor',
-    'showImageEditor',
-    'findSectionElement',
-    'handleSectionClick',
-    'setupSectionElement',
-    'trackEvent',
-    'getEventStats'
-    // Note: addGlobalControls and debug methods are on MarkitectCleanEditor, not DOMRenderer
-];
-
-runner.describe('DOMRenderer Component Extraction', () => {
-
-    runner.it('should define expected API methods', () => {
-        const expectedMethods = EXPECTED_DOMRENDERER_API;
-        runner.expect(expectedMethods.length).toBe(11);
-        runner.expect(expectedMethods).toContain('renderAllSections');
-        runner.expect(expectedMethods).toContain('showEditor');
-        runner.expect(expectedMethods).toContain('handleSectionClick');
-    });
-
-    runner.it('should extract from monolithic editor.js', () => {
-        // Load the monolithic editor.js to extract DOMRenderer
-        delete require.cache[require.resolve('/home/worsch/markitect_project/markitect/static/editor.js')];
-
-        try {
-            const editorModule = require('/home/worsch/markitect_project/markitect/static/editor.js');
-            runner.expect(editorModule.DOMRenderer).toBeTruthy();
-            // Set global for other tests
-            global.DOMRenderer = editorModule.DOMRenderer;
-            global.SectionManager = editorModule.SectionManager;
-        } catch (error) {
-            throw new Error(`Failed to load monolithic editor.js: ${error.message}`);
-        }
-    });
-
-    runner.it('should preserve DOMRenderer constructor functionality', () => {
-        const DOMRenderer = global.DOMRenderer;
-        const SectionManager = global.SectionManager;
-
-        const container = document.createElement('div');
-        const sectionManager = new SectionManager();
-
-        const renderer = new DOMRenderer(sectionManager, container);
-        runner.expect(renderer).toBeInstanceOf(DOMRenderer);
-        runner.expect(renderer.sectionManager).toBe(sectionManager);
-        runner.expect(renderer.container).toBe(container);
-    });
-
-    runner.it('should preserve section rendering functionality', () => {
-        const DOMRenderer = global.DOMRenderer;
-        const SectionManager = global.SectionManager;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        const testMarkdown = '# Test Heading\nTest content';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-
-        // This should not throw an error
-        renderer.renderAllSections(sections);
-
-        // Check that some content was rendered
-        runner.expect(container.innerHTML.length).toBe(container.innerHTML.length); // Basic sanity check
-    });
-
-    runner.it('should preserve findSectionElement functionality', () => {
-        const DOMRenderer = global.DOMRenderer;
-        const SectionManager = global.SectionManager;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        const testMarkdown = '# Test Heading\nTest content';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        renderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-        const element = renderer.findSectionElement(sectionId);
-
-        // Should find an element or return null (not throw error)
-        runner.expect(typeof element === 'object').toBeTruthy();
-    });
-
-    runner.it('should preserve event tracking functionality', () => {
-        const DOMRenderer = global.DOMRenderer;
-        const SectionManager = global.SectionManager;
-
-        const container = document.createElement('div');
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        // Should have trackEvent method
-        runner.expect(typeof renderer.trackEvent === 'function').toBeTruthy();
-
-        // Should be able to track an event
-        renderer.trackEvent('test-event', { data: 'test' });
-
-        // Should have getEventStats method
-        runner.expect(typeof renderer.getEventStats === 'function').toBeTruthy();
-
-        const stats = renderer.getEventStats();
-        runner.expect(typeof stats === 'object').toBeTruthy();
-    });
-
-    runner.it('should preserve editor showing functionality', () => {
-        const DOMRenderer = global.DOMRenderer;
-        const SectionManager = global.SectionManager;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        const testMarkdown = '# Test Heading\nTest content';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        renderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-
-        // showEditor should not throw error
-        try {
-            renderer.showEditor(sectionId, 'test content');
-            runner.expect(true).toBeTruthy(); // If we get here, no error was thrown
-        } catch (error) {
-            // Some errors are expected if DOM structure isn't complete
-            runner.expect(typeof error.message === 'string').toBeTruthy();
-        }
-    });
-
-    runner.it('should have core DOM rendering methods', () => {
-        const DOMRenderer = global.DOMRenderer;
-        const SectionManager = global.SectionManager;
-
-        const container = document.createElement('div');
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        // Should have core methods
-        runner.expect(typeof renderer.renderAllSections === 'function').toBeTruthy();
-        runner.expect(typeof renderer.showEditor === 'function').toBeTruthy();
-        runner.expect(typeof renderer.findSectionElement === 'function').toBeTruthy();
-        runner.expect(typeof renderer.trackEvent === 'function').toBeTruthy();
-    });
-});
-
-// Export API tests for use during extraction
-const DOMRENDERER_API_TESTS = [
-    (DOMRenderer, SectionManager) => {
-        const container = document.createElement('div');
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-        if (!renderer.sectionManager) {
-            throw new Error('sectionManager property missing');
-        }
-    },
-    (DOMRenderer, SectionManager) => {
-        const container = document.createElement('div');
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-        if (typeof renderer.renderAllSections !== 'function') {
-            throw new Error('renderAllSections method missing');
-        }
-    },
-    (DOMRenderer, SectionManager) => {
-        const container = document.createElement('div');
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-        if (typeof renderer.showEditor !== 'function') {
-            throw new Error('showEditor method missing');
-        }
-    }
-];
-
-module.exports = {
-    runner,
-    EXPECTED_DOMRENDERER_API,
-    DOMRENDERER_API_TESTS
-};
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Testing DOMRenderer Component Extraction');
-    runner.run().then(() => {
-        console.log('✅ DOMRenderer extraction tests completed');
-    });
-}
--- a/capabilities/testdrive-jsui/js/tests/test-environment.test.js
+++ b/capabilities/testdrive-jsui/js/tests/test-environment.test.js
@@ -1,24 +0,0 @@
-/**
- * Environment Test - Verifies Jest setup is working correctly
- */
-
-describe('Test Environment', () => {
-    test('should have JSDOM environment available', () => {
-        expect(global.document).toBeDefined();
-        expect(global.window).toBeDefined();
-        expect(document.createElement).toBeDefined();
-    });
-
-    test('should be able to create DOM elements', () => {
-        const div = document.createElement('div');
-        div.textContent = 'Test content';
-        expect(div.tagName).toBe('DIV');
-        expect(div.textContent).toBe('Test content');
-    });
-
-    test('should have content container available', () => {
-        const contentEl = document.getElementById('content');
-        expect(contentEl).toBeDefined();
-        expect(contentEl.tagName).toBe('DIV');
-    });
-});
--- a/capabilities/testdrive-jsui/js/tests/test-extracted-domrenderer.js
+++ b/capabilities/testdrive-jsui/js/tests/test-extracted-domrenderer.js
@@ -1,271 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * TDD Test for Extracted DOMRenderer Component
- *
- * Tests the extracted DOMRenderer component independently from the monolith.
- * Verifies that core functionality is preserved after extraction.
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-runner.describe('Extracted DOMRenderer Component', () => {
-
-    runner.it('should load extracted DOMRenderer component', () => {
-        // Load the extracted component
-        delete require.cache[require.resolve('../components/dom-renderer.js')];
-
-        try {
-            const module = require('../components/dom-renderer.js');
-            runner.expect(module.DOMRenderer).toBeTruthy();
-            runner.expect(module.FloatingMenu).toBeTruthy();
-
-            // Set globals for other tests
-            global.ExtractedDOMRenderer = module.DOMRenderer;
-            global.ExtractedFloatingMenu = module.FloatingMenu;
-        } catch (error) {
-            throw new Error(`Failed to load extracted DOMRenderer: ${error.message}`);
-        }
-    });
-
-    runner.it('should preserve constructor functionality', () => {
-        const DOMRenderer = global.ExtractedDOMRenderer;
-
-        // Load SectionManager from our extracted core
-        const sectionModule = require('../core/section-manager.js');
-        const SectionManager = sectionModule.SectionManager;
-
-        const container = document.createElement('div');
-        const sectionManager = new SectionManager();
-
-        const renderer = new DOMRenderer(sectionManager, container);
-        runner.expect(renderer).toBeInstanceOf(DOMRenderer);
-        runner.expect(renderer.sectionManager).toBe(sectionManager);
-        runner.expect(renderer.container).toBe(container);
-        runner.expect(renderer.editingSections).toBeInstanceOf(Set);
-    });
-
-    runner.it('should preserve section rendering functionality', () => {
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const sectionModule = require('../core/section-manager.js');
-        const SectionManager = sectionModule.SectionManager;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        const testMarkdown = '# Test Heading\nTest content';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-
-        // This should not throw an error
-        renderer.renderAllSections(sections);
-
-        // Check that content was rendered
-        runner.expect(container.innerHTML.length > 100).toBeTruthy();
-        runner.expect(container.innerHTML).toContain('Test Heading');
-    });
-
-    runner.it('should preserve findSectionElement functionality', () => {
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const sectionModule = require('../core/section-manager.js');
-        const SectionManager = sectionModule.SectionManager;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        const testMarkdown = '# Test Heading\nTest content';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        renderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-        const element = renderer.findSectionElement(sectionId);
-
-        runner.expect(element).toBeTruthy();
-        runner.expect(element.getAttribute('data-section-id')).toBe(sectionId);
-    });
-
-    runner.it('should preserve event tracking functionality', () => {
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const sectionModule = require('../core/section-manager.js');
-        const SectionManager = sectionModule.SectionManager;
-
-        const container = document.createElement('div');
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        // Should have trackEvent method
-        runner.expect(typeof renderer.trackEvent === 'function').toBeTruthy();
-
-        // Should be able to track an event
-        renderer.trackEvent('test-event', { data: 'test' });
-
-        // Should have getEventStats method
-        runner.expect(typeof renderer.getEventStats === 'function').toBeTruthy();
-
-        const stats = renderer.getEventStats();
-        runner.expect(typeof stats === 'object').toBeTruthy();
-        runner.expect(stats).toHaveProperty('stats');
-        runner.expect(stats).toHaveProperty('totalEvents');
-        runner.expect(stats).toHaveProperty('recentEvents');
-    });
-
-    runner.it('should preserve editor showing functionality', () => {
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const sectionModule = require('../core/section-manager.js');
-        const SectionManager = sectionModule.SectionManager;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        const testMarkdown = '# Test Heading\nTest content';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        renderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-
-        // showEditor should not throw error
-        try {
-            renderer.showEditor(sectionId, 'test content');
-            runner.expect(true).toBeTruthy(); // If we get here, no error was thrown
-
-            // Check that editing state was set
-            runner.expect(renderer.editingSections.has(sectionId)).toBeTruthy();
-        } catch (error) {
-            throw new Error(`showEditor failed: ${error.message}`);
-        }
-    });
-
-    runner.it('should preserve FloatingMenu functionality', () => {
-        const FloatingMenu = global.ExtractedFloatingMenu;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const sectionModule = require('../core/section-manager.js');
-        const SectionManager = sectionModule.SectionManager;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        const testMarkdown = '# Test Heading\nTest content';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        renderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-        const floatingMenu = new FloatingMenu(sectionId, 'text', renderer);
-
-        runner.expect(floatingMenu.sectionId).toBe(sectionId);
-        runner.expect(floatingMenu.type).toBe('text');
-        runner.expect(floatingMenu.renderer).toBe(renderer);
-        runner.expect(floatingMenu.isVisible).toBeFalsy();
-
-        // Test show/hide functionality
-        const content = document.createElement('div');
-        content.textContent = 'Test content';
-
-        floatingMenu.show(content);
-        runner.expect(floatingMenu.isVisible).toBeTruthy();
-
-        floatingMenu.hide();
-        runner.expect(floatingMenu.isVisible).toBeFalsy();
-    });
-
-    runner.it('should handle section click events', () => {
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const sectionModule = require('../core/section-manager.js');
-        const SectionManager = sectionModule.SectionManager;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-
-        const sectionManager = new SectionManager();
-        const renderer = new DOMRenderer(sectionManager, container);
-
-        const testMarkdown = '# Test Heading\nTest content';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        renderer.renderAllSections(sections);
-
-        const sectionId = sections[0].id;
-        const element = renderer.findSectionElement(sectionId);
-
-        // Simulate a click event
-        const clickEvent = new Event('click', { bubbles: true });
-        Object.defineProperty(clickEvent, 'target', { value: element });
-
-        // Should not throw error
-        try {
-            renderer.handleSectionClick(clickEvent);
-            runner.expect(true).toBeTruthy();
-        } catch (error) {
-            throw new Error(`handleSectionClick failed: ${error.message}`);
-        }
-    });
-
-    // Comparative test - verify extracted component behaves similarly to original
-    runner.it('should behave similarly to original monolithic component', () => {
-        // Load both components
-        const originalModule = require('/home/worsch/markitect_project/markitect/static/editor.js');
-        const extractedModule = require('../components/dom-renderer.js');
-        const sectionModule = require('../core/section-manager.js');
-
-        const originalSectionManager = new originalModule.SectionManager();
-        const extractedSectionManager = new sectionModule.SectionManager();
-
-        const originalContainer = document.createElement('div');
-        originalContainer.innerHTML = '<div id="markdown-content"></div>';
-
-        const extractedContainer = document.createElement('div');
-        extractedContainer.innerHTML = '<div id="markdown-content"></div>';
-
-        const originalRenderer = new originalModule.DOMRenderer(originalSectionManager, originalContainer);
-        const extractedRenderer = new extractedModule.DOMRenderer(extractedSectionManager, extractedContainer);
-
-        const testMarkdown = '# Test\nContent\n\n## Subheading\nMore content';
-
-        // Create sections with both
-        const originalSections = originalSectionManager.createSectionsFromMarkdown(testMarkdown);
-        const extractedSections = extractedSectionManager.createSectionsFromMarkdown(testMarkdown);
-
-        // Render with both
-        originalRenderer.renderAllSections(originalSections);
-        extractedRenderer.renderAllSections(extractedSections);
-
-        // Should have rendered content
-        runner.expect(originalContainer.innerHTML.length > 100).toBeTruthy();
-        runner.expect(extractedContainer.innerHTML.length > 100).toBeTruthy();
-
-        // Should have same number of section elements
-        const originalSectionElements = originalContainer.querySelectorAll('.ui-edit-section');
-        const extractedSectionElements = extractedContainer.querySelectorAll('.ui-edit-section');
-
-        runner.expect(extractedSectionElements.length).toBe(originalSectionElements.length);
-
-        // Should have similar event stats structure
-        const originalStats = originalRenderer.getEventStats();
-        const extractedStats = extractedRenderer.getEventStats();
-
-        runner.expect(extractedStats).toHaveProperty('stats');
-        runner.expect(extractedStats).toHaveProperty('totalEvents');
-        runner.expect(extractedStats).toHaveProperty('recentEvents');
-    });
-});
-
-module.exports = runner;
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Testing Extracted DOMRenderer Component');
-    runner.run().then(() => {
-        console.log('✅ Extracted DOMRenderer tests completed');
-    });
-}
--- a/capabilities/testdrive-jsui/js/tests/test-extracted-section-manager.js
+++ b/capabilities/testdrive-jsui/js/tests/test-extracted-section-manager.js
@@ -1,226 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * TDD Test for Extracted SectionManager Component
- *
- * Tests the extracted SectionManager component independently from the monolith.
- * Verifies that all functionality is preserved after extraction.
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-runner.describe('Extracted SectionManager Component', () => {
-
-    runner.it('should load extracted SectionManager component', () => {
-        // Load the extracted component
-        delete require.cache[require.resolve('../core/section-manager.js')];
-
-        try {
-            const module = require('../core/section-manager.js');
-            runner.expect(module.SectionManager).toBeTruthy();
-            runner.expect(module.Section).toBeTruthy();
-            runner.expect(module.EditState).toBeTruthy();
-            runner.expect(module.SectionType).toBeTruthy();
-
-            // Set globals for other tests
-            global.ExtractedSectionManager = module.SectionManager;
-            global.ExtractedSection = module.Section;
-            global.ExtractedEditState = module.EditState;
-            global.ExtractedSectionType = module.SectionType;
-        } catch (error) {
-            throw new Error(`Failed to load extracted SectionManager: ${error.message}`);
-        }
-    });
-
-    runner.it('should preserve constructor functionality', () => {
-        const SectionManager = global.ExtractedSectionManager;
-
-        const manager = new SectionManager();
-        runner.expect(manager).toBeInstanceOf(SectionManager);
-        runner.expect(manager.sections).toBeInstanceOf(Map);
-        runner.expect(manager.listeners).toBeInstanceOf(Map);
-    });
-
-    runner.it('should preserve section creation functionality', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const manager = new SectionManager();
-
-        const testMarkdown = `# Heading 1\nContent 1\n\n## Heading 2\nContent 2`;
-        const sections = manager.createSectionsFromMarkdown(testMarkdown);
-
-        runner.expect(Array.isArray(sections)).toBeTruthy();
-        runner.expect(sections.length).toBe(2);
-        runner.expect(sections[0].currentMarkdown).toContain('Heading 1');
-        runner.expect(sections[1].currentMarkdown).toContain('Heading 2');
-    });
-
-    runner.it('should preserve section editing functionality', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const manager = new SectionManager();
-
-        const sections = manager.createSectionsFromMarkdown('# Test\nContent');
-        const sectionId = sections[0].id;
-
-        // Test start editing
-        const content = manager.startEditing(sectionId);
-        runner.expect(content).toContain('Test');
-
-        const section = manager.sections.get(sectionId);
-        runner.expect(section.isEditing()).toBeTruthy();
-
-        // Test stop editing
-        section.stopEditing();
-        runner.expect(section.isEditing()).toBeFalsy();
-    });
-
-    runner.it('should preserve event system functionality', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const manager = new SectionManager();
-
-        let eventFired = false;
-        let eventData = null;
-
-        manager.on('test-event', (data) => {
-            eventFired = true;
-            eventData = data;
-        });
-
-        manager.emit('test-event', { test: 'data' });
-
-        runner.expect(eventFired).toBeTruthy();
-        runner.expect(eventData).toEqual({ test: 'data' });
-    });
-
-    runner.it('should preserve document status functionality', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const manager = new SectionManager();
-
-        manager.createSectionsFromMarkdown('# Test\nContent');
-        const status = manager.getDocumentStatus();
-
-        runner.expect(status).toHaveProperty('totalSections');
-        runner.expect(status).toHaveProperty('editingSections');
-        runner.expect(status.totalSections).toBe(1);
-    });
-
-    runner.it('should preserve getAllSections functionality', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const manager = new SectionManager();
-
-        const testMarkdown = '# One\nContent\n\n# Two\nMore content';
-        manager.createSectionsFromMarkdown(testMarkdown);
-
-        const allSections = manager.getAllSections();
-        runner.expect(Array.isArray(allSections)).toBeTruthy();
-        runner.expect(allSections.length).toBe(2);
-    });
-
-    runner.it('should preserve section splitting functionality', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const manager = new SectionManager();
-
-        const sections = manager.createSectionsFromMarkdown('# Original\nContent');
-        const sectionId = sections[0].id;
-
-        const newContent = '# Split 1\nContent 1\n\n# Split 2\nContent 2';
-        const newSections = manager.handleSectionSplit(sectionId, newContent);
-
-        runner.expect(Array.isArray(newSections)).toBeTruthy();
-        runner.expect(newSections.length).toBe(2);
-        runner.expect(manager.sections.has(sectionId)).toBeFalsy(); // Original removed
-    });
-
-    runner.it('should preserve Section class functionality', () => {
-        const Section = global.ExtractedSection;
-        const EditState = global.ExtractedEditState;
-
-        const section = new Section('test-id', '# Test Content', 'heading');
-
-        runner.expect(section.id).toBe('test-id');
-        runner.expect(section.currentMarkdown).toBe('# Test Content');
-        runner.expect(section.type).toBe('heading');
-        runner.expect(section.state).toBe(EditState.ORIGINAL);
-    });
-
-    runner.it('should preserve Section ID generation', () => {
-        const Section = global.ExtractedSection;
-
-        const id1 = Section.generateId('# Test Heading', 0);
-        const id2 = Section.generateId('# Different Heading', 1);
-
-        runner.expect(typeof id1 === 'string').toBeTruthy();
-        runner.expect(typeof id2 === 'string').toBeTruthy();
-        runner.expect(id1).toContain('section-');
-        runner.expect(id2).toContain('section-');
-        runner.expect(id1 !== id2).toBeTruthy(); // Should be unique
-    });
-
-    runner.it('should preserve Section type detection', () => {
-        const Section = global.ExtractedSection;
-        const SectionType = global.ExtractedSectionType;
-
-        runner.expect(Section.detectType('# Heading')).toBe(SectionType.HEADING);
-        runner.expect(Section.detectType('![Image](url)')).toBe(SectionType.IMAGE);
-        runner.expect(Section.detectType('```code```')).toBe(SectionType.CODE);
-        runner.expect(Section.detectType('Regular paragraph')).toBe(SectionType.PARAGRAPH);
-    });
-
-    // Comparative test - verify extracted component behaves identically to original
-    runner.it('should behave identically to original monolithic component', () => {
-        // Load both components
-        const originalModule = require('/home/worsch/markitect_project/markitect/static/editor.js');
-        const extractedModule = require('../core/section-manager.js');
-
-        const originalManager = new originalModule.SectionManager();
-        const extractedManager = new extractedModule.SectionManager();
-
-        const testMarkdown = '# Test\nContent\n\n## Subheading\nMore content';
-
-        // Debug: Check what each component produces
-        console.log('Creating sections with original component...');
-        const originalSections = originalManager.createSectionsFromMarkdown(testMarkdown);
-        console.log(`Original produced ${originalSections.length} sections`);
-
-        console.log('Creating sections with extracted component...');
-        const extractedSections = extractedManager.createSectionsFromMarkdown(testMarkdown);
-        console.log(`Extracted produced ${extractedSections.length} sections`);
-
-        if (originalSections.length > 0) {
-            console.log('Original first section:', originalSections[0].currentMarkdown);
-        }
-        if (extractedSections.length > 0) {
-            console.log('Extracted first section:', extractedSections[0].currentMarkdown);
-        }
-
-        // Should have same number of sections
-        runner.expect(extractedSections.length).toBe(originalSections.length);
-
-        // Should have same content
-        for (let i = 0; i < originalSections.length; i++) {
-            runner.expect(extractedSections[i].currentMarkdown).toBe(originalSections[i].currentMarkdown);
-            runner.expect(extractedSections[i].type).toBe(originalSections[i].type);
-        }
-
-        // Should have same document status structure
-        const originalStatus = originalManager.getDocumentStatus();
-        const extractedStatus = extractedManager.getDocumentStatus();
-
-        console.log('Original status:', originalStatus);
-        console.log('Extracted status:', extractedStatus);
-
-        runner.expect(extractedStatus.totalSections).toBe(originalStatus.totalSections);
-        runner.expect(extractedStatus.editingSections).toBe(originalStatus.editingSections);
-    });
-});
-
-module.exports = runner;
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Testing Extracted SectionManager Component');
-    runner.run().then(() => {
-        console.log('✅ Extracted SectionManager tests completed');
-    });
-}
--- a/capabilities/testdrive-jsui/js/tests/test-full-integration.js
+++ b/capabilities/testdrive-jsui/js/tests/test-full-integration.js
@@ -1,305 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Full Integration Test
- *
- * Tests that all extracted components (SectionManager, DOMRenderer,
- * DebugPanel, DocumentControls) work together as a complete system.
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-runner.describe('Full Component Integration Tests', () => {
-
-    runner.it('should load all extracted components', () => {
-        try {
-            // Load all extracted components
-            const sectionModule = require('../core/section-manager.js');
-            const domModule = require('../components/dom-renderer.js');
-            const debugModule = require('../components/debug-panel.js');
-            const controlsModule = require('../components/document-controls.js');
-
-            runner.expect(sectionModule.SectionManager).toBeTruthy();
-            runner.expect(domModule.DOMRenderer).toBeTruthy();
-            runner.expect(debugModule.DebugPanel).toBeTruthy();
-            runner.expect(controlsModule.DocumentControls).toBeTruthy();
-
-            // Set globals for other tests
-            global.ExtractedSectionManager = sectionModule.SectionManager;
-            global.ExtractedDOMRenderer = domModule.DOMRenderer;
-            global.ExtractedDebugPanel = debugModule.DebugPanel;
-            global.ExtractedDocumentControls = controlsModule.DocumentControls;
-
-        } catch (error) {
-            throw new Error(`Failed to load extracted components: ${error.message}`);
-        }
-    });
-
-    runner.it('should support complete document editing workflow with all components', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const DebugPanel = global.ExtractedDebugPanel;
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        // Setup DOM container
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        // Create all components
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-        const debugPanel = new DebugPanel();
-        const documentControls = new DocumentControls();
-
-        // Setup document controls
-        documentControls.create();
-
-        // Wire up event handlers for debugging
-        sectionManager.on('sections-created', (data) => {
-            debugPanel.addMessage(`Created ${data.count} sections`, 'INFO');
-        });
-
-        sectionManager.on('edit-started', (data) => {
-            debugPanel.addMessage(`Edit started for section: ${data.sectionId}`, 'DEBUG');
-        });
-
-        // Test workflow: Create document
-        const testMarkdown = `# Document Title
-Introduction paragraph with some content.
-
-## Section A
-Content for section A with details.
-
-![Test Image](https://example.com/test.jpg)
-
-### Subsection A.1
-More detailed content here.`;
-
-        // Create sections
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        runner.expect(sections.length).toBe(4);
-
-        // Render sections
-        domRenderer.renderAllSections(sections);
-        const renderedElements = container.querySelectorAll('.ui-edit-section');
-        runner.expect(renderedElements.length).toBe(sections.length);
-
-        // Test editing workflow
-        const firstSection = sections[0];
-        sectionManager.startEditing(firstSection.id);
-        runner.expect(firstSection.isEditing()).toBeTruthy();
-
-        // Check debug messages were created
-        runner.expect(debugPanel.getMessageCount()).toBe(2); // sections-created + edit-started
-
-        // Test document controls functionality
-        const controlPanel = documentControls.getControlPanel();
-        runner.expect(controlPanel).toBeTruthy();
-        runner.expect(document.getElementById('save-document')).toBeTruthy();
-        runner.expect(document.getElementById('toggle-debug')).toBeTruthy();
-
-        // Cleanup
-        document.body.removeChild(container);
-        documentControls.destroy();
-    });
-
-    runner.it('should support debug panel integration with document controls', () => {
-        const DebugPanel = global.ExtractedDebugPanel;
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        // Create components
-        const debugPanel = new DebugPanel();
-        const documentControls = new DocumentControls();
-
-        // Setup document controls
-        documentControls.create();
-
-        // Setup debug panel toggle handler
-        const handlers = {
-            'toggle-debug': () => debugPanel.toggle()
-        };
-        documentControls.setEventHandlers(handlers);
-
-        // Test debug toggle functionality
-        const debugButton = documentControls.getButton('toggle-debug');
-        runner.expect(debugButton).toBeTruthy();
-
-        // Add some debug messages
-        debugPanel.addMessage('Test message 1', 'INFO');
-        debugPanel.addMessage('Test message 2', 'ERROR');
-
-        // Simulate button click to show debug panel
-        debugButton.click();
-        runner.expect(debugPanel.isActive).toBeTruthy();
-
-        // Simulate button click to hide debug panel
-        debugButton.click();
-        runner.expect(debugPanel.isActive).toBeFalsy();
-
-        // Cleanup
-        documentControls.destroy();
-    });
-
-    runner.it('should support event-driven communication between all components', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const DebugPanel = global.ExtractedDebugPanel;
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        // Setup container
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        // Create components
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-        const debugPanel = new DebugPanel();
-        const documentControls = new DocumentControls();
-
-        documentControls.create();
-
-        // Setup comprehensive event handling
-        let eventLog = [];
-
-        sectionManager.on('sections-created', (data) => {
-            eventLog.push(`sections-created: ${data.count} sections`);
-            debugPanel.addMessage(`Sections created: ${data.count}`, 'INFO');
-        });
-
-        sectionManager.on('edit-started', (data) => {
-            eventLog.push(`edit-started: ${data.sectionId}`);
-            debugPanel.addMessage(`Edit started: ${data.sectionId}`, 'DEBUG');
-        });
-
-        sectionManager.on('changes-accepted', (data) => {
-            eventLog.push(`changes-accepted: ${data.sectionId}`);
-            debugPanel.addMessage(`Changes accepted: ${data.sectionId}`, 'SUCCESS');
-        });
-
-        // Test complete workflow
-        const testMarkdown = '# Test\nContent for testing';
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        // Start editing
-        sectionManager.startEditing(sections[0].id);
-        sectionManager.updateContent(sections[0].id, '# Updated Test\nUpdated content');
-        sectionManager.acceptChanges(sections[0].id);
-
-        // Verify events were logged
-        runner.expect(eventLog.length).toBe(3);
-        runner.expect(eventLog[0]).toContain('sections-created');
-        runner.expect(eventLog[1]).toContain('edit-started');
-        runner.expect(eventLog[2]).toContain('changes-accepted');
-
-        // Verify debug messages were created
-        runner.expect(debugPanel.getMessageCount()).toBe(3);
-
-        // Test document controls status update
-        const status = sectionManager.getDocumentStatus();
-        documentControls.updateStatus(status);
-        runner.expect(documentControls.lastStatus).toBeTruthy();
-
-        // Cleanup
-        document.body.removeChild(container);
-        documentControls.destroy();
-    });
-
-    runner.it('should handle error scenarios gracefully across components', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const DebugPanel = global.ExtractedDebugPanel;
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        // Test component creation without proper DOM setup
-        const debugPanel = new DebugPanel();
-        const documentControls = new DocumentControls();
-
-        // These should not throw errors
-        try {
-            debugPanel.toggle(); // No DOM elements
-            debugPanel.update(); // No DOM elements
-            documentControls.show(); // No control panel created yet
-            documentControls.hide(); // No control panel created yet
-
-            runner.expect(true).toBeTruthy(); // If we get here, no errors were thrown
-        } catch (error) {
-            throw new Error(`Components should handle missing DOM gracefully: ${error.message}`);
-        }
-
-        // Test section manager with invalid input
-        const sectionManager = new SectionManager();
-        const sections = sectionManager.createSectionsFromMarkdown('');
-        runner.expect(sections.length).toBe(0);
-
-        // Test DOM renderer with invalid container
-        try {
-            const invalidRenderer = new DOMRenderer(sectionManager, null);
-            runner.expect(invalidRenderer.container).toBeFalsy();
-        } catch (error) {
-            // This is acceptable - constructor might validate input
-            runner.expect(typeof error.message === 'string').toBeTruthy();
-        }
-    });
-
-    runner.it('should support scalable architecture with component lifecycle', () => {
-        const SectionManager = global.ExtractedSectionManager;
-        const DOMRenderer = global.ExtractedDOMRenderer;
-        const DebugPanel = global.ExtractedDebugPanel;
-        const DocumentControls = global.ExtractedDocumentControls;
-
-        // Test multiple instances
-        const sectionManager1 = new SectionManager();
-        const sectionManager2 = new SectionManager();
-        const debugPanel1 = new DebugPanel();
-        const debugPanel2 = new DebugPanel();
-
-        // Each should be independent
-        debugPanel1.addMessage('Message from panel 1', 'INFO');
-        debugPanel2.addMessage('Message from panel 2', 'ERROR');
-
-        runner.expect(debugPanel1.getMessageCount()).toBe(1);
-        runner.expect(debugPanel2.getMessageCount()).toBe(1);
-
-        // Test section managers are independent
-        const sections1 = sectionManager1.createSectionsFromMarkdown('# Document 1');
-        const sections2 = sectionManager2.createSectionsFromMarkdown('# Document 2');
-
-        runner.expect(sections1.length).toBe(1);
-        runner.expect(sections2.length).toBe(1);
-        runner.expect(sections1[0]).toBeTruthy();
-        runner.expect(sections2[0]).toBeTruthy();
-
-        // IDs should be different (each section gets unique ID)
-        const id1 = sections1[0].id;
-        const id2 = sections2[0].id;
-        runner.expect(id1 !== id2).toBeTruthy();
-
-        // Test document controls lifecycle
-        const controls1 = new DocumentControls();
-        const controls2 = new DocumentControls();
-
-        controls1.create();
-        runner.expect(document.getElementById('markitect-global-controls')).toBeTruthy();
-
-        controls2.create(); // Should replace the first one
-        runner.expect(document.getElementById('markitect-global-controls')).toBeTruthy();
-
-        controls2.destroy();
-        runner.expect(document.getElementById('markitect-global-controls')).toBeFalsy();
-    });
-});
-
-module.exports = runner;
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Running Full Component Integration Tests');
-    runner.run().then(() => {
-        console.log('✅ Full integration tests completed');
-    });
-}
--- a/capabilities/testdrive-jsui/js/tests/test-real-user-functionality.js
+++ b/capabilities/testdrive-jsui/js/tests/test-real-user-functionality.js
@@ -1,285 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Real User Functionality Tests
- *
- * This test file validates the actual functionality that users experience,
- * not just internal API calls. It tests the complete user workflow.
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-runner.describe('Real User Functionality Tests', () => {
-
-    runner.it('should allow users to edit content and see changes in DOM', () => {
-        // Load all extracted components
-        const sectionModule = require('../core/section-manager.js');
-        const domModule = require('../components/dom-renderer.js');
-        const debugModule = require('../components/debug-panel.js');
-        const controlsModule = require('../components/document-controls.js');
-
-        const { SectionManager } = sectionModule;
-        const { DOMRenderer } = domModule;
-        const { DebugPanel } = debugModule;
-        const { DocumentControls } = controlsModule;
-
-        // Setup DOM container
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        // Create components
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-        const debugPanel = new DebugPanel();
-        const documentControls = new DocumentControls();
-
-        // Setup document controls
-        documentControls.create();
-
-        // Create sections from test markdown
-        const testMarkdown = `# Original Title\nOriginal content that should be editable.`;
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        const firstSection = sections[0];
-        const sectionElement = container.querySelector(`[data-section-id="${firstSection.id}"]`);
-
-        // Verify original content is rendered
-        runner.expect(sectionElement.innerHTML).toContain('Original Title');
-
-        // Simulate user clicking on section
-        const clickEvent = new Event('click', { bubbles: true });
-        sectionElement.dispatchEvent(clickEvent);
-
-        // Verify editing state is active
-        runner.expect(firstSection.isEditing()).toBeTruthy();
-
-        // Find the floating menu and edit controls
-        const floatingMenu = document.querySelector('.ui-edit-floating-menu');
-        runner.expect(floatingMenu).toBeTruthy();
-
-        const textarea = floatingMenu.querySelector('textarea');
-        const acceptButton = Array.from(floatingMenu.querySelectorAll('button')).find(btn => btn.textContent.includes('Accept'));
-
-        runner.expect(textarea).toBeTruthy();
-        runner.expect(acceptButton).toBeTruthy();
-
-        // Simulate user editing content
-        const newContent = '# Updated Title\nCompletely new content added by user.';
-        textarea.value = newContent;
-
-        // Simulate user clicking accept
-        acceptButton.click();
-
-        // Verify section is no longer editing
-        runner.expect(firstSection.isEditing()).toBeFalsy();
-
-        // Verify floating menu is gone
-        const menuAfterAccept = document.querySelector('.ui-edit-floating-menu');
-        runner.expect(menuAfterAccept).toBeFalsy();
-
-        // CRITICAL TEST: Verify DOM was actually updated with new content
-        const updatedElement = container.querySelector(`[data-section-id="${firstSection.id}"]`);
-        runner.expect(updatedElement.innerHTML).toContain('Updated Title');
-        runner.expect(updatedElement.innerHTML).toContain('Completely new content');
-        runner.expect(updatedElement.innerHTML).not.toContain('Original Title');
-
-        // Cleanup
-        document.body.removeChild(container);
-        documentControls.destroy();
-    });
-
-    runner.it('should allow users to reset all changes', () => {
-        // Setup similar to above
-        const sectionModule = require('../core/section-manager.js');
-        const domModule = require('../components/dom-renderer.js');
-        const controlsModule = require('../components/document-controls.js');
-
-        const { SectionManager } = sectionModule;
-        const { DOMRenderer } = domModule;
-        const { DocumentControls } = controlsModule;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-        const documentControls = new DocumentControls();
-
-        documentControls.create();
-
-        // Create and modify content
-        const testMarkdown = `# Test Section\nOriginal content for reset test.`;
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        const firstSection = sections[0];
-
-        // Make changes to the section
-        sectionManager.startEditing(firstSection.id);
-        sectionManager.updateContent(firstSection.id, '# Modified Title\nModified content.');
-        sectionManager.acceptChanges(firstSection.id);
-
-        // Verify changes are applied
-        let sectionElement = container.querySelector(`[data-section-id="${firstSection.id}"]`);
-        runner.expect(sectionElement.innerHTML).toContain('Modified Title');
-        runner.expect(firstSection.hasChanges()).toBeTruthy();
-
-        // Test reset functionality
-        const resetButton = documentControls.getButton('reset-all');
-        runner.expect(resetButton).toBeTruthy();
-
-        // Click reset button
-        resetButton.click();
-
-        // Verify content is reset
-        sectionElement = container.querySelector(`[data-section-id="${firstSection.id}"]`);
-        runner.expect(sectionElement.innerHTML).toContain('Test Section');
-        runner.expect(sectionElement.innerHTML).not.toContain('Modified Title');
-        runner.expect(firstSection.hasChanges()).toBeFalsy();
-
-        // Cleanup
-        document.body.removeChild(container);
-        documentControls.destroy();
-    });
-
-    runner.it('should handle cancel operations correctly', () => {
-        const sectionModule = require('../core/section-manager.js');
-        const domModule = require('../components/dom-renderer.js');
-
-        const { SectionManager } = sectionModule;
-        const { DOMRenderer } = domModule;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-
-        const testMarkdown = `# Cancel Test\nContent that should remain unchanged.`;
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        const firstSection = sections[0];
-        const originalContent = firstSection.currentMarkdown;
-
-        // Start editing
-        const sectionElement = container.querySelector(`[data-section-id="${firstSection.id}"]`);
-        sectionElement.click();
-
-        // Make changes but cancel them
-        const floatingMenu = document.querySelector('.ui-edit-floating-menu');
-        const textarea = floatingMenu.querySelector('textarea');
-        const cancelButton = Array.from(floatingMenu.querySelectorAll('button')).find(btn => btn.textContent.includes('Cancel'));
-
-        textarea.value = '# This should be cancelled\nThis content should not appear.';
-        cancelButton.click();
-
-        // Verify content is unchanged
-        const unchangedElement = container.querySelector(`[data-section-id="${firstSection.id}"]`);
-        runner.expect(unchangedElement.innerHTML).toContain('Cancel Test');
-        runner.expect(unchangedElement.innerHTML).not.toContain('This should be cancelled');
-        runner.expect(firstSection.currentMarkdown).toBe(originalContent);
-
-        // Cleanup
-        document.body.removeChild(container);
-    });
-
-    runner.it('should validate the complete editing workflow', () => {
-        // This test validates the entire user experience end-to-end
-        const sectionModule = require('../core/section-manager.js');
-        const domModule = require('../components/dom-renderer.js');
-        const debugModule = require('../components/debug-panel.js');
-        const controlsModule = require('../components/document-controls.js');
-
-        const { SectionManager } = sectionModule;
-        const { DOMRenderer } = domModule;
-        const { DebugPanel } = debugModule;
-        const { DocumentControls } = controlsModule;
-
-        const container = document.createElement('div');
-        container.innerHTML = '<div id="markdown-content"></div>';
-        document.body.appendChild(container);
-
-        const sectionManager = new SectionManager();
-        const domRenderer = new DOMRenderer(sectionManager, container);
-        const debugPanel = new DebugPanel();
-        const documentControls = new DocumentControls();
-
-        documentControls.create();
-
-        // Multi-section document
-        const testMarkdown = `# Document Title
-Introduction paragraph.
-
-## Section A
-Content for section A.
-
-## Section B
-Content for section B.`;
-
-        const sections = sectionManager.createSectionsFromMarkdown(testMarkdown);
-        domRenderer.renderAllSections(sections);
-
-        // Verify all sections are rendered
-        const renderedSections = container.querySelectorAll('.ui-edit-section');
-        runner.expect(renderedSections.length).toBe(sections.length);
-
-        // Test editing multiple sections
-        const firstSection = sections[0];
-        const secondSection = sections[2]; // Section A
-
-        // Edit first section
-        renderedSections[0].click();
-        let floatingMenu = document.querySelector('.ui-edit-floating-menu');
-        let textarea = floatingMenu.querySelector('textarea');
-        let acceptButton = Array.from(floatingMenu.querySelectorAll('button')).find(btn => btn.textContent.includes('Accept'));
-
-        textarea.value = '# Updated Document Title\nUpdated introduction.';
-        acceptButton.click();
-
-        // Edit second section
-        renderedSections[2].click();
-        floatingMenu = document.querySelector('.ui-edit-floating-menu');
-        textarea = floatingMenu.querySelector('textarea');
-        acceptButton = Array.from(floatingMenu.querySelectorAll('button')).find(btn => btn.textContent.includes('Accept'));
-
-        textarea.value = '## Updated Section A\nCompletely new content for section A.';
-        acceptButton.click();
-
-        // Verify both sections were updated
-        const updatedSections = container.querySelectorAll('.ui-edit-section');
-        runner.expect(updatedSections[0].innerHTML).toContain('Updated Document Title');
-        runner.expect(updatedSections[2].innerHTML).toContain('Updated Section A');
-
-        // Test reset restores all sections
-        const resetButton = documentControls.getButton('reset-all');
-        resetButton.click();
-
-        const resetSections = container.querySelectorAll('.ui-edit-section');
-        runner.expect(resetSections[0].innerHTML).toContain('Document Title');
-        runner.expect(resetSections[0].innerHTML).not.toContain('Updated Document Title');
-        runner.expect(resetSections[2].innerHTML).toContain('Section A');
-        runner.expect(resetSections[2].innerHTML).not.toContain('Updated Section A');
-
-        // Cleanup
-        document.body.removeChild(container);
-        documentControls.destroy();
-    });
-});
-
-module.exports = runner;
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Running Real User Functionality Tests');
-    runner.run().then(() => {
-        console.log('✅ Real user functionality tests completed');
-        console.log('These tests validate what users actually experience, not just internal APIs');
-    });
-}
--- a/capabilities/testdrive-jsui/js/tests/test-section-manager-extraction.js
+++ b/capabilities/testdrive-jsui/js/tests/test-section-manager-extraction.js
@@ -1,196 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * TDD Test for SectionManager Component Extraction
- *
- * Tests the extraction of SectionManager from the monolithic editor.js
- * Ensures all functionality is preserved during refactoring.
- */
-
-const RefactorTestRunner = require('./refactor-test-runner.js');
-
-const runner = new RefactorTestRunner();
-
-// First, let's define what the SectionManager API should look like
-const EXPECTED_SECTION_MANAGER_API = [
-    'constructor',
-    'createSectionsFromMarkdown',
-    'startEditing',
-    'stopEditing',
-    'getAllSections',
-    'sections', // Map property, not method
-    'getDocumentStatus',
-    'getDocumentMarkdown',
-    'on', // event system
-    'emit', // event system
-    'handleSectionSplit',
-    'updateContent',
-    'acceptChanges',
-    'cancelChanges',
-    'resetSection'
-];
-
-runner.describe('SectionManager Component Extraction', () => {
-
-    runner.it('should define expected API methods', () => {
-        // This test defines what we expect from the extracted SectionManager
-        const expectedMethods = EXPECTED_SECTION_MANAGER_API;
-        runner.expect(expectedMethods.length).toBe(15);
-        runner.expect(expectedMethods).toContain('createSectionsFromMarkdown');
-        runner.expect(expectedMethods).toContain('startEditing');
-        runner.expect(expectedMethods).toContain('stopEditing');
-    });
-
-    runner.it('should extract from monolithic editor.js', () => {
-        // Load the monolithic editor.js to extract SectionManager
-        delete require.cache[require.resolve('/home/worsch/markitect_project/markitect/static/editor.js')];
-
-        try {
-            const editorModule = require('/home/worsch/markitect_project/markitect/static/editor.js');
-            runner.expect(editorModule.SectionManager).toBeTruthy();
-            // Set global for other tests
-            global.SectionManager = editorModule.SectionManager;
-            global.Section = editorModule.Section;
-            global.EditState = editorModule.EditState;
-        } catch (error) {
-            throw new Error(`Failed to load monolithic editor.js: ${error.message}`);
-        }
-    });
-
-    runner.it('should preserve SectionManager constructor functionality', () => {
-        const SectionManager = global.SectionManager;
-
-        const manager = new SectionManager();
-        runner.expect(manager).toBeInstanceOf(SectionManager);
-        runner.expect(manager.sections).toBeInstanceOf(Map);
-    });
-
-    runner.it('should preserve createSectionsFromMarkdown functionality', () => {
-        const SectionManager = global.SectionManager;
-        const manager = new SectionManager();
-
-        const testMarkdown = `# Heading 1\nContent 1\n\n## Heading 2\nContent 2`;
-        const sections = manager.createSectionsFromMarkdown(testMarkdown);
-
-        runner.expect(Array.isArray(sections)).toBeTruthy();
-        runner.expect(sections.length).toBe(2);
-        runner.expect(sections[0].currentMarkdown).toContain('Heading 1');
-        runner.expect(sections[1].currentMarkdown).toContain('Heading 2');
-    });
-
-    runner.it('should preserve section editing state management', () => {
-        const SectionManager = global.SectionManager;
-        const manager = new SectionManager();
-
-        const sections = manager.createSectionsFromMarkdown('# Test\nContent');
-        const sectionId = sections[0].id;
-
-        // Test start editing
-        runner.expect(manager.startEditing(sectionId)).toBeTruthy();
-        const section = manager.sections.get(sectionId);
-        runner.expect(section.isEditing()).toBeTruthy();
-
-        // Test stop editing
-        section.stopEditing();
-        runner.expect(section.isEditing()).toBeFalsy();
-    });
-
-    runner.it('should preserve event system functionality', () => {
-        const SectionManager = global.SectionManager;
-        const manager = new SectionManager();
-
-        let eventFired = false;
-        let eventData = null;
-
-        manager.on('test-event', (data) => {
-            eventFired = true;
-            eventData = data;
-        });
-
-        manager.emit('test-event', { test: 'data' });
-
-        runner.expect(eventFired).toBeTruthy();
-        runner.expect(eventData).toEqual({ test: 'data' });
-    });
-
-    runner.it('should preserve document status functionality', () => {
-        const SectionManager = global.SectionManager;
-        const manager = new SectionManager();
-
-        manager.createSectionsFromMarkdown('# Test\nContent');
-        const status = manager.getDocumentStatus();
-
-        runner.expect(status).toHaveProperty('totalSections');
-        runner.expect(status).toHaveProperty('editingSections');
-        runner.expect(status.totalSections).toBe(1);
-    });
-
-    runner.it('should preserve getAllSections functionality', () => {
-        const SectionManager = global.SectionManager;
-        const manager = new SectionManager();
-
-        const testMarkdown = '# One\nContent\n\n# Two\nMore content';
-        manager.createSectionsFromMarkdown(testMarkdown);
-
-        const allSections = manager.getAllSections();
-        runner.expect(Array.isArray(allSections)).toBeTruthy();
-        runner.expect(allSections.length).toBe(2);
-    });
-
-    runner.it('should preserve section splitting functionality', () => {
-        const SectionManager = global.SectionManager;
-        const manager = new SectionManager();
-
-        const sections = manager.createSectionsFromMarkdown('# Original\nContent');
-        const sectionId = sections[0].id;
-
-        const newContent = '# Split 1\nContent 1\n\n# Split 2\nContent 2';
-        const newSections = manager.handleSectionSplit(sectionId, newContent);
-
-        runner.expect(Array.isArray(newSections)).toBeTruthy();
-        runner.expect(newSections.length).toBe(2);
-        runner.expect(manager.sections.has(sectionId)).toBeFalsy(); // Original removed
-    });
-});
-
-// Export API tests for use during extraction
-const SECTION_MANAGER_API_TESTS = [
-    (SectionManager) => {
-        const manager = new SectionManager();
-        if (!manager.sections || !(manager.sections instanceof Map)) {
-            throw new Error('sections property missing or not a Map');
-        }
-    },
-    (SectionManager) => {
-        const manager = new SectionManager();
-        if (typeof manager.createSectionsFromMarkdown !== 'function') {
-            throw new Error('createSectionsFromMarkdown method missing');
-        }
-    },
-    (SectionManager) => {
-        const manager = new SectionManager();
-        if (typeof manager.startEditing !== 'function') {
-            throw new Error('startEditing method missing');
-        }
-    },
-    (SectionManager) => {
-        const manager = new SectionManager();
-        if (typeof manager.stopEditing !== 'function') {
-            throw new Error('stopEditing method missing');
-        }
-    }
-];
-
-module.exports = {
-    runner,
-    EXPECTED_SECTION_MANAGER_API,
-    SECTION_MANAGER_API_TESTS
-};
-
-// Run tests if called directly
-if (require.main === module) {
-    console.log('🧪 Testing SectionManager Component Extraction');
-    runner.run().then(() => {
-        console.log('✅ SectionManager extraction tests completed');
-    });
-}
--- a/capabilities/testdrive-jsui/node_modules/.bin/acorn
+++ b/capabilities/testdrive-jsui/node_modules/.bin/acorn
@@ -1 +0,0 @@
-../acorn/bin/acorn
--- a/capabilities/testdrive-jsui/node_modules/.bin/baseline-browser-mapping
+++ b/capabilities/testdrive-jsui/node_modules/.bin/baseline-browser-mapping
@@ -1 +0,0 @@
-../baseline-browser-mapping/dist/cli.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/browserslist
+++ b/capabilities/testdrive-jsui/node_modules/.bin/browserslist
@@ -1 +0,0 @@
-../browserslist/cli.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/create-jest
+++ b/capabilities/testdrive-jsui/node_modules/.bin/create-jest
@@ -1 +0,0 @@
-../create-jest/bin/create-jest.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/escodegen
+++ b/capabilities/testdrive-jsui/node_modules/.bin/escodegen
@@ -1 +0,0 @@
-../escodegen/bin/escodegen.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/esgenerate
+++ b/capabilities/testdrive-jsui/node_modules/.bin/esgenerate
@@ -1 +0,0 @@
-../escodegen/bin/esgenerate.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/eslint
+++ b/capabilities/testdrive-jsui/node_modules/.bin/eslint
@@ -1 +0,0 @@
-../eslint/bin/eslint.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/esparse
+++ b/capabilities/testdrive-jsui/node_modules/.bin/esparse
@@ -1 +0,0 @@
-../esprima/bin/esparse.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/esvalidate
+++ b/capabilities/testdrive-jsui/node_modules/.bin/esvalidate
@@ -1 +0,0 @@
-../esprima/bin/esvalidate.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/import-local-fixture
+++ b/capabilities/testdrive-jsui/node_modules/.bin/import-local-fixture
@@ -1 +0,0 @@
-../import-local/fixtures/cli.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/jest
+++ b/capabilities/testdrive-jsui/node_modules/.bin/jest
@@ -1 +0,0 @@
-../jest/bin/jest.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/js-yaml
+++ b/capabilities/testdrive-jsui/node_modules/.bin/js-yaml
@@ -1 +0,0 @@
-../js-yaml/bin/js-yaml.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/jsesc
+++ b/capabilities/testdrive-jsui/node_modules/.bin/jsesc
@@ -1 +0,0 @@
-../jsesc/bin/jsesc
--- a/capabilities/testdrive-jsui/node_modules/.bin/json5
+++ b/capabilities/testdrive-jsui/node_modules/.bin/json5
@@ -1 +0,0 @@
-../json5/lib/cli.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/node-which
+++ b/capabilities/testdrive-jsui/node_modules/.bin/node-which
@@ -1 +0,0 @@
-../which/bin/node-which
--- a/capabilities/testdrive-jsui/node_modules/.bin/parser
+++ b/capabilities/testdrive-jsui/node_modules/.bin/parser
@@ -1 +0,0 @@
-../@babel/parser/bin/babel-parser.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/regjsparser
+++ b/capabilities/testdrive-jsui/node_modules/.bin/regjsparser
@@ -1 +0,0 @@
-../regjsparser/bin/parser
--- a/capabilities/testdrive-jsui/node_modules/.bin/resolve
+++ b/capabilities/testdrive-jsui/node_modules/.bin/resolve
@@ -1 +0,0 @@
-../resolve/bin/resolve
--- a/capabilities/testdrive-jsui/node_modules/.bin/rimraf
+++ b/capabilities/testdrive-jsui/node_modules/.bin/rimraf
@@ -1 +0,0 @@
-../rimraf/bin.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/semver
+++ b/capabilities/testdrive-jsui/node_modules/.bin/semver
@@ -1 +0,0 @@
-../semver/bin/semver.js
--- a/capabilities/testdrive-jsui/node_modules/.bin/tsc
+++ b/capabilities/testdrive-jsui/node_modules/.bin/tsc
@@ -1 +0,0 @@
-../typescript/bin/tsc
--- a/capabilities/testdrive-jsui/node_modules/.bin/tsserver
+++ b/capabilities/testdrive-jsui/node_modules/.bin/tsserver
@@ -1 +0,0 @@
-../typescript/bin/tsserver
--- a/capabilities/testdrive-jsui/node_modules/.bin/update-browserslist-db
+++ b/capabilities/testdrive-jsui/node_modules/.bin/update-browserslist-db
@@ -1 +0,0 @@
-../update-browserslist-db/cli.js
--- a/capabilities/testdrive-jsui/node_modules/.package-lock.json
+++ b/capabilities/testdrive-jsui/node_modules/.package-lock.json
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/LICENSE
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/LICENSE
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 asamuzaK (Kazz)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/README.md
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/README.md
@@ -1,316 +0,0 @@
-# CSS color
-
-[![build](https://github.com/asamuzaK/cssColor/actions/workflows/node.js.yml/badge.svg)](https://github.com/asamuzaK/cssColor/actions/workflows/node.js.yml)
-[![CodeQL](https://github.com/asamuzaK/cssColor/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/asamuzaK/cssColor/actions/workflows/github-code-scanning/codeql)
-[![npm (scoped)](https://img.shields.io/npm/v/@asamuzakjp/css-color)](https://www.npmjs.com/package/@asamuzakjp/css-color)
-
-Resolve and convert CSS colors.
-
-## Install
-
-```console
-npm i @asamuzakjp/css-color
-```
-
-## Usage
-
-```javascript
-import { convert, resolve, utils } from '@asamuzakjp/css-color';
-
-const resolvedValue = resolve(
-  'color-mix(in oklab, lch(67.5345 42.5 258.2), color(srgb 0 0.5 0))'
-);
-// 'oklab(0.620754 -0.0931934 -0.00374881)'
-
-const convertedValue = covert.colorToHex('lab(46.2775% -47.5621 48.5837)');
-// '#008000'
-
-const result = utils.isColor('green');
-// true
-```
-
-<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
-
-### resolve(color, opt)
-
-resolves CSS color
-
-#### Parameters
-
- `color` **[string][133]** color value
-  - system colors are not supported
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.currentColor` **[string][133]?**
-    - color to use for `currentcolor` keyword
-    - if omitted, it will be treated as a missing color,
-      i.e. `rgb(none none none / none)`
-  - `opt.customProperty` **[object][135]?**
-    - custom properties
-    - pair of `--` prefixed property name as a key and it's value,
-      e.g.
-      ```javascript
-      const opt = {
-        customProperty: {
-          '--some-color': '#008000',
-          '--some-length': '16px'
-        }
-      };
-      ```
-    - and/or `callback` function to get the value of the custom property,
-      e.g.
-      ```javascript
-      const node = document.getElementById('foo');
-      const opt = {
-        customProperty: {
-          callback: node.style.getPropertyValue
-        }
-      };
-      ```
-  - `opt.dimension` **[object][135]?**
-    - dimension, e.g. for converting relative length to pixels
-    - pair of unit as a key and number in pixels as it's value,
-      e.g. suppose `1em === 12px`, `1rem === 16px` and `100vw === 1024px`, then
-      ```javascript
-      const opt = {
-        dimension: {
-          em: 12,
-          rem: 16,
-          vw: 10.24
-        }
-      };
-      ```
-    - and/or `callback` function to get the value as a number in pixels,
-      e.g.
-      ```javascript
-      const opt = {
-        dimension: {
-          callback: unit => {
-            switch (unit) {
-              case 'em':
-                return 12;
-              case 'rem':
-                return 16;
-              case 'vw':
-                return 10.24;
-              default:
-                return;
-            }
-          }
-        }
-      };
-      ```
-  - `opt.format` **[string][133]?**
-    - output format, one of below
-      - `computedValue` (default), [computed value][139] of the color
-      - `specifiedValue`, [specified value][140] of the color
-      - `hex`, hex color notation, i.e. `#rrggbb`
-      - `hexAlpha`, hex color notation with alpha channel, i.e. `#rrggbbaa`
-
-Returns **[string][133]?** one of `rgba?()`, `#rrggbb(aa)?`, `color-name`, `color(color-space r g b / alpha)`, `color(color-space x y z / alpha)`, `(ok)?lab(l a b / alpha)`, `(ok)?lch(l c h / alpha)`, `'(empty-string)'`, `null`
-
- in `computedValue`, values are numbers, however `rgb()` values are integers
- in `specifiedValue`, returns `empty string` for unknown and/or invalid color
- in `hex`, returns `null` for `transparent`, and also returns `null` if any of `r`, `g`, `b`, `alpha` is not a number
- in `hexAlpha`, returns `#00000000` for `transparent`, however returns `null` if any of `r`, `g`, `b`, `alpha` is not a number
-
-### convert
-
-Contains various color conversion functions.
-
-### convert.numberToHex(value)
-
-convert number to hex string
-
-#### Parameters
-
- `value` **[number][134]** color value
-
-Returns **[string][133]** hex string: 00..ff
-
-### convert.colorToHex(value, opt)
-
-convert color to hex
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.alpha` **[boolean][136]?** return in #rrggbbaa notation
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-
-Returns **[string][133]** #rrggbb(aa)?
-
-### convert.colorToHsl(value, opt)
-
-convert color to hsl
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-
-Returns **[Array][137]<[number][134]>** \[h, s, l, alpha]
-
-### convert.colorToHwb(value, opt)
-
-convert color to hwb
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-
-Returns **[Array][137]<[number][134]>** \[h, w, b, alpha]
-
-### convert.colorToLab(value, opt)
-
-convert color to lab
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-
-Returns **[Array][137]<[number][134]>** \[l, a, b, alpha]
-
-### convert.colorToLch(value, opt)
-
-convert color to lch
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-
-Returns **[Array][137]<[number][134]>** \[l, c, h, alpha]
-
-### convert.colorToOklab(value, opt)
-
-convert color to oklab
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-
-Returns **[Array][137]<[number][134]>** \[l, a, b, alpha]
-
-### convert.colorToOklch(value, opt)
-
-convert color to oklch
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-
-Returns **[Array][137]<[number][134]>** \[l, c, h, alpha]
-
-### convert.colorToRgb(value, opt)
-
-convert color to rgb
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-
-Returns **[Array][137]<[number][134]>** \[r, g, b, alpha]
-
-### convert.colorToXyz(value, opt)
-
-convert color to xyz
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-  - `opt.d50` **[boolean][136]?** xyz in d50 white point
-
-Returns **[Array][137]<[number][134]>** \[x, y, z, alpha]
-
-### convert.colorToXyzD50(value, opt)
-
-convert color to xyz-d50
-
-#### Parameters
-
- `value` **[string][133]** color value
- `opt` **[object][135]?** options (optional, default `{}`)
-  - `opt.customProperty` **[object][135]?**
-    - custom properties, see `resolve()` function above
-  - `opt.dimension` **[object][135]?**
-    - dimension, see `resolve()` function above
-
-Returns **[Array][137]<[number][134]>** \[x, y, z, alpha]
-
-### utils
-
-Contains utility functions.
-
-### utils.isColor(color)
-
-is valid color type
-
-#### Parameters
-
- `color` **[string][133]** color value
-  - system colors are not supported
-
-Returns **[boolean][136]**
-
-## Acknowledgments
-
-The following resources have been of great help in the development of the CSS color.
-
- [csstools/postcss-plugins](https://github.com/csstools/postcss-plugins)
- [lru-cache](https://github.com/isaacs/node-lru-cache)
-
---
-
-Copyright (c) 2024 [asamuzaK (Kazz)](https://github.com/asamuzaK/)
-
-[133]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[134]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
-[135]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[136]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
-[137]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
-[138]: https://w3c.github.io/csswg-drafts/css-color-4/#color-conversion-code
-[139]: https://developer.mozilla.org/en-US/docs/Web/CSS/computed_value
-[140]: https://developer.mozilla.org/en-US/docs/Web/CSS/specified_value
-[141]: https://www.npmjs.com/package/@csstools/css-calc
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/node_modules/lru-cache/LICENSE
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/node_modules/lru-cache/LICENSE
@@ -1,15 +0,0 @@
-The ISC License
-
-Copyright (c) 2010-2023 Isaac Z. Schlueter and Contributors
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted, provided that the above
-copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
-WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
-ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
-WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
-ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR
-IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/node_modules/lru-cache/README.md
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/node_modules/lru-cache/README.md
@@ -1,331 +0,0 @@
-# lru-cache
-
-A cache object that deletes the least-recently-used items.
-
-Specify a max number of the most recently used items that you
-want to keep, and this cache will keep that many of the most
-recently accessed items.
-
-This is not primarily a TTL cache, and does not make strong TTL
-guarantees. There is no preemptive pruning of expired items by
-default, but you _may_ set a TTL on the cache or on a single
-`set`. If you do so, it will treat expired items as missing, and
-delete them when fetched. If you are more interested in TTL
-caching than LRU caching, check out
-[@isaacs/ttlcache](http://npm.im/@isaacs/ttlcache).
-
-As of version 7, this is one of the most performant LRU
-implementations available in JavaScript, and supports a wide
-diversity of use cases. However, note that using some of the
-features will necessarily impact performance, by causing the
-cache to have to do more work. See the "Performance" section
-below.
-
-## Installation
-
-```bash
-npm install lru-cache --save
-```
-
-## Usage
-
-```js
-// hybrid module, either works
-import { LRUCache } from 'lru-cache'
-// or:
-const { LRUCache } = require('lru-cache')
-// or in minified form for web browsers:
-import { LRUCache } from 'http://unpkg.com/lru-cache@9/dist/mjs/index.min.mjs'
-
-// At least one of 'max', 'ttl', or 'maxSize' is required, to prevent
-// unsafe unbounded storage.
-//
-// In most cases, it's best to specify a max for performance, so all
-// the required memory allocation is done up-front.
-//
-// All the other options are optional, see the sections below for
-// documentation on what each one does.  Most of them can be
-// overridden for specific items in get()/set()
-const options = {
-  max: 500,
-
-  // for use with tracking overall storage size
-  maxSize: 5000,
-  sizeCalculation: (value, key) => {
-    return 1
-  },
-
-  // for use when you need to clean up something when objects
-  // are evicted from the cache
-  dispose: (value, key) => {
-    freeFromMemoryOrWhatever(value)
-  },
-
-  // how long to live in ms
-  ttl: 1000 * 60 * 5,
-
-  // return stale items before removing from cache?
-  allowStale: false,
-
-  updateAgeOnGet: false,
-  updateAgeOnHas: false,
-
-  // async method to use for cache.fetch(), for
-  // stale-while-revalidate type of behavior
-  fetchMethod: async (
-    key,
-    staleValue,
-    { options, signal, context }
-  ) => {},
-}
-
-const cache = new LRUCache(options)
-
-cache.set('key', 'value')
-cache.get('key') // "value"
-
-// non-string keys ARE fully supported
-// but note that it must be THE SAME object, not
-// just a JSON-equivalent object.
-var someObject = { a: 1 }
-cache.set(someObject, 'a value')
-// Object keys are not toString()-ed
-cache.set('[object Object]', 'a different value')
-assert.equal(cache.get(someObject), 'a value')
-// A similar object with same keys/values won't work,
-// because it's a different object identity
-assert.equal(cache.get({ a: 1 }), undefined)
-
-cache.clear() // empty the cache
-```
-
-If you put more stuff in the cache, then less recently used items
-will fall out. That's what an LRU cache is.
-
-For full description of the API and all options, please see [the
-LRUCache typedocs](https://isaacs.github.io/node-lru-cache/)
-
-## Storage Bounds Safety
-
-This implementation aims to be as flexible as possible, within
-the limits of safe memory consumption and optimal performance.
-
-At initial object creation, storage is allocated for `max` items.
-If `max` is set to zero, then some performance is lost, and item
-count is unbounded. Either `maxSize` or `ttl` _must_ be set if
-`max` is not specified.
-
-If `maxSize` is set, then this creates a safe limit on the
-maximum storage consumed, but without the performance benefits of
-pre-allocation. When `maxSize` is set, every item _must_ provide
-a size, either via the `sizeCalculation` method provided to the
-constructor, or via a `size` or `sizeCalculation` option provided
-to `cache.set()`. The size of every item _must_ be a positive
-integer.
-
-If neither `max` nor `maxSize` are set, then `ttl` tracking must
-be enabled. Note that, even when tracking item `ttl`, items are
-_not_ preemptively deleted when they become stale, unless
-`ttlAutopurge` is enabled. Instead, they are only purged the
-next time the key is requested. Thus, if `ttlAutopurge`, `max`,
-and `maxSize` are all not set, then the cache will potentially
-grow unbounded.
-
-In this case, a warning is printed to standard error. Future
-versions may require the use of `ttlAutopurge` if `max` and
-`maxSize` are not specified.
-
-If you truly wish to use a cache that is bound _only_ by TTL
-expiration, consider using a `Map` object, and calling
-`setTimeout` to delete entries when they expire. It will perform
-much better than an LRU cache.
-
-Here is an implementation you may use, under the same
-[license](./LICENSE) as this package:
-
-```js
-// a storage-unbounded ttl cache that is not an lru-cache
-const cache = {
-  data: new Map(),
-  timers: new Map(),
-  set: (k, v, ttl) => {
-    if (cache.timers.has(k)) {
-      clearTimeout(cache.timers.get(k))
-    }
-    cache.timers.set(
-      k,
-      setTimeout(() => cache.delete(k), ttl)
-    )
-    cache.data.set(k, v)
-  },
-  get: k => cache.data.get(k),
-  has: k => cache.data.has(k),
-  delete: k => {
-    if (cache.timers.has(k)) {
-      clearTimeout(cache.timers.get(k))
-    }
-    cache.timers.delete(k)
-    return cache.data.delete(k)
-  },
-  clear: () => {
-    cache.data.clear()
-    for (const v of cache.timers.values()) {
-      clearTimeout(v)
-    }
-    cache.timers.clear()
-  },
-}
-```
-
-If that isn't to your liking, check out
-[@isaacs/ttlcache](http://npm.im/@isaacs/ttlcache).
-
-## Storing Undefined Values
-
-This cache never stores undefined values, as `undefined` is used
-internally in a few places to indicate that a key is not in the
-cache.
-
-You may call `cache.set(key, undefined)`, but this is just
-an alias for `cache.delete(key)`. Note that this has the effect
-that `cache.has(key)` will return _false_ after setting it to
-undefined.
-
-```js
-cache.set(myKey, undefined)
-cache.has(myKey) // false!
-```
-
-If you need to track `undefined` values, and still note that the
-key is in the cache, an easy workaround is to use a sigil object
-of your own.
-
-```js
-import { LRUCache } from 'lru-cache'
-const undefinedValue = Symbol('undefined')
-const cache = new LRUCache(...)
-const mySet = (key, value) =>
-  cache.set(key, value === undefined ? undefinedValue : value)
-const myGet = (key, value) => {
-  const v = cache.get(key)
-  return v === undefinedValue ? undefined : v
-}
-```
-
-## Performance
-
-As of January 2022, version 7 of this library is one of the most
-performant LRU cache implementations in JavaScript.
-
-Benchmarks can be extremely difficult to get right. In
-particular, the performance of set/get/delete operations on
-objects will vary _wildly_ depending on the type of key used. V8
-is highly optimized for objects with keys that are short strings,
-especially integer numeric strings. Thus any benchmark which
-tests _solely_ using numbers as keys will tend to find that an
-object-based approach performs the best.
-
-Note that coercing _anything_ to strings to use as object keys is
-unsafe, unless you can be 100% certain that no other type of
-value will be used. For example:
-
-```js
-const myCache = {}
-const set = (k, v) => (myCache[k] = v)
-const get = k => myCache[k]
-
-set({}, 'please hang onto this for me')
-set('[object Object]', 'oopsie')
-```
-
-Also beware of "Just So" stories regarding performance. Garbage
-collection of large (especially: deep) object graphs can be
-incredibly costly, with several "tipping points" where it
-increases exponentially. As a result, putting that off until
-later can make it much worse, and less predictable. If a library
-performs well, but only in a scenario where the object graph is
-kept shallow, then that won't help you if you are using large
-objects as keys.
-
-In general, when attempting to use a library to improve
-performance (such as a cache like this one), it's best to choose
-an option that will perform well in the sorts of scenarios where
-you'll actually use it.
-
-This library is optimized for repeated gets and minimizing
-eviction time, since that is the expected need of a LRU. Set
-operations are somewhat slower on average than a few other
-options, in part because of that optimization. It is assumed
-that you'll be caching some costly operation, ideally as rarely
-as possible, so optimizing set over get would be unwise.
-
-If performance matters to you:
-
-1. If it's at all possible to use small integer values as keys,
-   and you can guarantee that no other types of values will be
-   used as keys, then do that, and use a cache such as
-   [lru-fast](https://npmjs.com/package/lru-fast), or
-   [mnemonist's
-   LRUCache](https://yomguithereal.github.io/mnemonist/lru-cache)
-   which uses an Object as its data store.
-
-2. Failing that, if at all possible, use short non-numeric
-   strings (ie, less than 256 characters) as your keys, and use
-   [mnemonist's
-   LRUCache](https://yomguithereal.github.io/mnemonist/lru-cache).
-
-3. If the types of your keys will be anything else, especially
-   long strings, strings that look like floats, objects, or some
-   mix of types, or if you aren't sure, then this library will
-   work well for you.
-
-   If you do not need the features that this library provides
-   (like asynchronous fetching, a variety of TTL staleness
-   options, and so on), then [mnemonist's
-   LRUMap](https://yomguithereal.github.io/mnemonist/lru-map) is
-   a very good option, and just slightly faster than this module
-   (since it does considerably less).
-
-4. Do not use a `dispose` function, size tracking, or especially
-   ttl behavior, unless absolutely needed. These features are
-   convenient, and necessary in some use cases, and every attempt
-   has been made to make the performance impact minimal, but it
-   isn't nothing.
-
-## Breaking Changes in Version 7
-
-This library changed to a different algorithm and internal data
-structure in version 7, yielding significantly better
-performance, albeit with some subtle changes as a result.
-
-If you were relying on the internals of LRUCache in version 6 or
-before, it probably will not work in version 7 and above.
-
-## Breaking Changes in Version 8
-
- The `fetchContext` option was renamed to `context`, and may no
-  longer be set on the cache instance itself.
- Rewritten in TypeScript, so pretty much all the types moved
-  around a lot.
- The AbortController/AbortSignal polyfill was removed. For this
-  reason, **Node version 16.14.0 or higher is now required**.
- Internal properties were moved to actual private class
-  properties.
- Keys and values must not be `null` or `undefined`.
- Minified export available at `'lru-cache/min'`, for both CJS
-  and MJS builds.
-
-## Breaking Changes in Version 9
-
- Named export only, no default export.
- AbortController polyfill returned, albeit with a warning when
-  used.
-
-## Breaking Changes in Version 10
-
- `cache.fetch()` return type is now `Promise<V | undefined>`
-  instead of `Promise<V | void>`. This is an irrelevant change
-  practically speaking, but can require changes for TypeScript
-  users.
-
-For more info, see the [change log](CHANGELOG.md).
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/node_modules/lru-cache/package.json
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/node_modules/lru-cache/package.json
@@ -1,116 +0,0 @@
-{
-  "name": "lru-cache",
-  "publishConfig": {
-    "tag": "legacy-v10"
-  },
-  "description": "A cache object that deletes the least-recently-used items.",
-  "version": "10.4.3",
-  "author": "Isaac Z. Schlueter <i@izs.me>",
-  "keywords": [
-    "mru",
-    "lru",
-    "cache"
-  ],
-  "sideEffects": false,
-  "scripts": {
-    "build": "npm run prepare",
-    "prepare": "tshy && bash fixup.sh",
-    "pretest": "npm run prepare",
-    "presnap": "npm run prepare",
-    "test": "tap",
-    "snap": "tap",
-    "preversion": "npm test",
-    "postversion": "npm publish",
-    "prepublishOnly": "git push origin --follow-tags",
-    "format": "prettier --write .",
-    "typedoc": "typedoc --tsconfig ./.tshy/esm.json ./src/*.ts",
-    "benchmark-results-typedoc": "bash scripts/benchmark-results-typedoc.sh",
-    "prebenchmark": "npm run prepare",
-    "benchmark": "make -C benchmark",
-    "preprofile": "npm run prepare",
-    "profile": "make -C benchmark profile"
-  },
-  "main": "./dist/commonjs/index.js",
-  "types": "./dist/commonjs/index.d.ts",
-  "tshy": {
-    "exports": {
-      ".": "./src/index.ts",
-      "./min": {
-        "import": {
-          "types": "./dist/esm/index.d.ts",
-          "default": "./dist/esm/index.min.js"
-        },
-        "require": {
-          "types": "./dist/commonjs/index.d.ts",
-          "default": "./dist/commonjs/index.min.js"
-        }
-      }
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/isaacs/node-lru-cache.git"
-  },
-  "devDependencies": {
-    "@types/node": "^20.2.5",
-    "@types/tap": "^15.0.6",
-    "benchmark": "^2.1.4",
-    "esbuild": "^0.17.11",
-    "eslint-config-prettier": "^8.5.0",
-    "marked": "^4.2.12",
-    "mkdirp": "^2.1.5",
-    "prettier": "^2.6.2",
-    "tap": "^20.0.3",
-    "tshy": "^2.0.0",
-    "tslib": "^2.4.0",
-    "typedoc": "^0.25.3",
-    "typescript": "^5.2.2"
-  },
-  "license": "ISC",
-  "files": [
-    "dist"
-  ],
-  "prettier": {
-    "semi": false,
-    "printWidth": 70,
-    "tabWidth": 2,
-    "useTabs": false,
-    "singleQuote": true,
-    "jsxSingleQuote": false,
-    "bracketSameLine": true,
-    "arrowParens": "avoid",
-    "endOfLine": "lf"
-  },
-  "tap": {
-    "node-arg": [
-      "--expose-gc"
-    ],
-    "plugin": [
-      "@tapjs/clock"
-    ]
-  },
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/commonjs/index.d.ts",
-        "default": "./dist/commonjs/index.js"
-      }
-    },
-    "./min": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.min.js"
-      },
-      "require": {
-        "types": "./dist/commonjs/index.d.ts",
-        "default": "./dist/commonjs/index.min.js"
-      }
-    }
-  },
-  "type": "module",
-  "module": "./dist/esm/index.js"
-}
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/package.json
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/package.json
@@ -1,81 +0,0 @@
-{
-  "name": "@asamuzakjp/css-color",
-  "description": "CSS color - Resolve and convert CSS colors.",
-  "author": "asamuzaK",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/asamuzaK/cssColor.git"
-  },
-  "homepage": "https://github.com/asamuzaK/cssColor#readme",
-  "bugs": {
-    "url": "https://github.com/asamuzaK/cssColor/issues"
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "type": "module",
-  "types": "dist/esm/index.d.ts",
-  "module": "dist/esm/index.js",
-  "main": "dist/cjs/index.cjs",
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/esm/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "require": {
-        "types": "./dist/cjs/index.d.cts",
-        "default": "./dist/cjs/index.cjs"
-      }
-    },
-    "./package.json": "./package.json"
-  },
-  "dependencies": {
-    "@csstools/css-calc": "^2.1.3",
-    "@csstools/css-color-parser": "^3.0.9",
-    "@csstools/css-parser-algorithms": "^3.0.4",
-    "@csstools/css-tokenizer": "^3.0.3",
-    "lru-cache": "^10.4.3"
-  },
-  "devDependencies": {
-    "@tanstack/vite-config": "^0.2.0",
-    "@vitest/coverage-istanbul": "^3.1.4",
-    "esbuild": "^0.25.4",
-    "eslint": "^9.27.0",
-    "eslint-plugin-regexp": "^2.7.0",
-    "globals": "^16.1.0",
-    "knip": "^5.56.0",
-    "neostandard": "^0.12.1",
-    "prettier": "^3.5.3",
-    "publint": "^0.3.12",
-    "rimraf": "^6.0.1",
-    "tsup": "^8.5.0",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "vitest": "^3.1.4"
-  },
-  "packageManager": "pnpm@10.11.0",
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "esbuild",
-      "unrs-resolver"
-    ]
-  },
-  "scripts": {
-    "build": "pnpm run clean && pnpm run test && pnpm run knip && pnpm run build:prod && pnpm run build:cjs && pnpm run build:browser && pnpm run publint",
-    "build:browser": "vite build -c ./vite.browser.config.ts",
-    "build:prod": "vite build",
-    "build:cjs": "tsup ./src/index.ts --format=cjs --platform=node --outDir=./dist/cjs/ --sourcemap --dts",
-    "clean": "rimraf ./coverage ./dist",
-    "knip": "knip",
-    "prettier": "prettier . --ignore-unknown --write",
-    "publint": "publint --strict",
-    "test": "pnpm run prettier && pnpm run --stream \"/^test:.*/\"",
-    "test:eslint": "eslint ./src ./test --fix",
-    "test:types": "tsc",
-    "test:unit": "vitest"
-  },
-  "version": "3.2.0"
-}
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/index.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/index.ts
@@ -1,27 +0,0 @@
-/*!
- * CSS color - Resolve, parse, convert CSS color.
- * @license MIT
- * @copyright asamuzaK (Kazz)
- * @see {@link https://github.com/asamuzaK/cssColor/blob/main/LICENSE}
- */
-
-import { cssCalc as csscalc } from './js/css-calc';
-import { isGradient } from './js/css-gradient';
-import { cssVar } from './js/css-var';
-import { extractDashedIdent, isColor as iscolor, splitValue } from './js/util';
-
-export { convert } from './js/convert';
-export { resolve } from './js/resolve';
-/* utils */
-export const utils = {
-  cssCalc: csscalc,
-  cssVar,
-  extractDashedIdent,
-  isColor: iscolor,
-  isGradient,
-  splitValue
-};
-/* TODO: remove later */
-/* alias */
-export const isColor = utils.isColor;
-export const cssCalc = utils.cssCalc;
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/cache.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/cache.ts
@@ -1,114 +0,0 @@
-/**
- * cache
- */
-
-import { LRUCache } from 'lru-cache';
-import { Options } from './typedef';
-import { valueToJsonString } from './util';
-
-/* numeric constants */
-const MAX_CACHE = 4096;
-
-/**
- * CacheItem
- */
-export class CacheItem {
-  /* private */
-  #isNull: boolean;
-  #item: unknown;
-
-  /**
-   * constructor
-   */
-  constructor(item: unknown, isNull: boolean = false) {
-    this.#item = item;
-    this.#isNull = !!isNull;
-  }
-
-  get item() {
-    return this.#item;
-  }
-
-  get isNull() {
-    return this.#isNull;
-  }
-}
-
-/**
- * NullObject
- */
-export class NullObject extends CacheItem {
-  /**
-   * constructor
-   */
-  constructor() {
-    super(Symbol('null'), true);
-  }
-}
-
-/*
- * lru cache
- */
-export const lruCache = new LRUCache({
-  max: MAX_CACHE
-});
-
-/**
- * set cache
- * @param key - cache key
- * @param value - value to cache
- * @returns void
- */
-export const setCache = (key: string, value: unknown): void => {
-  if (key) {
-    if (value === null) {
-      lruCache.set(key, new NullObject());
-    } else if (value instanceof CacheItem) {
-      lruCache.set(key, value);
-    } else {
-      lruCache.set(key, new CacheItem(value));
-    }
-  }
-};
-
-/**
- * get cache
- * @param key - cache key
- * @returns cached item or false otherwise
- */
-export const getCache = (key: string): CacheItem | boolean => {
-  if (key && lruCache.has(key)) {
-    const item = lruCache.get(key);
-    if (item instanceof CacheItem) {
-      return item;
-    }
-    // delete unexpected cached item
-    lruCache.delete(key);
-    return false;
-  }
-  return false;
-};
-
-/**
- * create cache key
- * @param keyData - key data
- * @param [opt] - options
- * @returns cache key
- */
-export const createCacheKey = (
-  keyData: Record<string, string>,
-  opt: Options = {}
-): string => {
-  const { customProperty = {}, dimension = {} } = opt;
-  let cacheKey = '';
-  if (
-    keyData &&
-    Object.keys(keyData).length &&
-    typeof customProperty.callback !== 'function' &&
-    typeof dimension.callback !== 'function'
-  ) {
-    keyData.opt = valueToJsonString(opt);
-    cacheKey = valueToJsonString(keyData);
-  }
-  return cacheKey;
-};
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/color.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/color.ts
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/common.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/common.ts
@@ -1,31 +0,0 @@
-/**
- * common
- */
-
-/* numeric constants */
-const TYPE_FROM = 8;
-const TYPE_TO = -1;
-
-/**
- * get type
- * @param o - object to check
- * @returns type of object
- */
-export const getType = (o: unknown): string =>
-  Object.prototype.toString.call(o).slice(TYPE_FROM, TYPE_TO);
-
-/**
- * is string
- * @param o - object to check
- * @returns result
- */
-export const isString = (o: unknown): o is string =>
-  typeof o === 'string' || o instanceof String;
-
-/**
- * is string or number
- * @param o - object to check
- * @returns result
- */
-export const isStringOrNumber = (o: unknown): boolean =>
-  isString(o) || typeof o === 'number';
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/constant.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/constant.ts
@@ -1,66 +0,0 @@
-/**
- * constant
- */
-
-/* values and units */
-const _DIGIT = '(?:0|[1-9]\\d*)';
-const _COMPARE = 'clamp|max|min';
-const _EXPO = 'exp|hypot|log|pow|sqrt';
-const _SIGN = 'abs|sign';
-const _STEP = 'mod|rem|round';
-const _TRIG = 'a?(?:cos|sin|tan)|atan2';
-const _MATH = `${_COMPARE}|${_EXPO}|${_SIGN}|${_STEP}|${_TRIG}`;
-const _CALC = `calc|${_MATH}`;
-const _VAR = `var|${_CALC}`;
-export const ANGLE = 'deg|g?rad|turn';
-export const LENGTH =
-  '[cm]m|[dls]?v(?:[bhiw]|max|min)|in|p[ctx]|q|r?(?:[cl]h|cap|e[mx]|ic)';
-export const NUM = `[+-]?(?:${_DIGIT}(?:\\.\\d*)?|\\.\\d+)(?:e-?${_DIGIT})?`;
-export const NUM_POSITIVE = `\\+?(?:${_DIGIT}(?:\\.\\d*)?|\\.\\d+)(?:e-?${_DIGIT})?`;
-export const NONE = 'none';
-export const PCT = `${NUM}%`;
-export const SYN_FN_CALC = `^(?:${_CALC})\\(|(?<=[*\\/\\s\\(])(?:${_CALC})\\(`;
-export const SYN_FN_MATH_START = `^(?:${_MATH})\\($`;
-export const SYN_FN_VAR = '^var\\(|(?<=[*\\/\\s\\(])var\\(';
-export const SYN_FN_VAR_START = `^(?:${_VAR})\\(`;
-
-/* colors */
-const _ALPHA = `(?:\\s*\\/\\s*(?:${NUM}|${PCT}|${NONE}))?`;
-const _ALPHA_LV3 = `(?:\\s*,\\s*(?:${NUM}|${PCT}))?`;
-const _COLOR_FUNC = '(?:ok)?l(?:ab|ch)|color|hsla?|hwb|rgba?';
-const _COLOR_KEY = '[a-z]+|#[\\da-f]{3}|#[\\da-f]{4}|#[\\da-f]{6}|#[\\da-f]{8}';
-const _CS_HUE = '(?:ok)?lch|hsl|hwb';
-const _CS_HUE_ARC = '(?:de|in)creasing|longer|shorter';
-const _NUM_ANGLE = `${NUM}(?:${ANGLE})?`;
-const _NUM_ANGLE_NONE = `(?:${NUM}(?:${ANGLE})?|${NONE})`;
-const _NUM_PCT_NONE = `(?:${NUM}|${PCT}|${NONE})`;
-export const CS_HUE = `(?:${_CS_HUE})(?:\\s(?:${_CS_HUE_ARC})\\shue)?`;
-export const CS_HUE_CAPT = `(${_CS_HUE})(?:\\s(${_CS_HUE_ARC})\\shue)?`;
-export const CS_LAB = '(?:ok)?lab';
-export const CS_LCH = '(?:ok)?lch';
-export const CS_SRGB = 'srgb(?:-linear)?';
-export const CS_RGB = `(?:a98|prophoto)-rgb|display-p3|rec2020|${CS_SRGB}`;
-export const CS_XYZ = 'xyz(?:-d(?:50|65))?';
-export const CS_RECT = `${CS_LAB}|${CS_RGB}|${CS_XYZ}`;
-export const CS_MIX = `${CS_HUE}|${CS_RECT}`;
-export const FN_COLOR = 'color(';
-export const FN_MIX = 'color-mix(';
-export const FN_REL = `(?:${_COLOR_FUNC})\\(\\s*from\\s+`;
-export const FN_REL_CAPT = `(${_COLOR_FUNC})\\(\\s*from\\s+`;
-export const FN_VAR = 'var(';
-export const SYN_FN_COLOR = `(?:${CS_RGB}|${CS_XYZ})(?:\\s+${_NUM_PCT_NONE}){3}${_ALPHA}`;
-export const SYN_FN_REL = `^${FN_REL}|(?<=[\\s])${FN_REL}`;
-export const SYN_HSL = `${_NUM_ANGLE_NONE}(?:\\s+${_NUM_PCT_NONE}){2}${_ALPHA}`;
-export const SYN_HSL_LV3 = `${_NUM_ANGLE}(?:\\s*,\\s*${PCT}){2}${_ALPHA_LV3}`;
-export const SYN_LCH = `(?:${_NUM_PCT_NONE}\\s+){2}${_NUM_ANGLE_NONE}${_ALPHA}`;
-export const SYN_MOD = `${_NUM_PCT_NONE}(?:\\s+${_NUM_PCT_NONE}){2}${_ALPHA}`;
-export const SYN_RGB_LV3 = `(?:${NUM}(?:\\s*,\\s*${NUM}){2}|${PCT}(?:\\s*,\\s*${PCT}){2})${_ALPHA_LV3}`;
-export const SYN_COLOR_TYPE = `${_COLOR_KEY}|hsla?\\(\\s*${SYN_HSL_LV3}\\s*\\)|rgba?\\(\\s*${SYN_RGB_LV3}\\s*\\)|(?:hsla?|hwb)\\(\\s*${SYN_HSL}\\s*\\)|(?:(?:ok)?lab|rgba?)\\(\\s*${SYN_MOD}\\s*\\)|(?:ok)?lch\\(\\s*${SYN_LCH}\\s*\\)|color\\(\\s*${SYN_FN_COLOR}\\s*\\)`;
-export const SYN_MIX_PART = `(?:${SYN_COLOR_TYPE})(?:\\s+${PCT})?`;
-export const SYN_MIX = `color-mix\\(\\s*in\\s+(?:${CS_MIX})\\s*,\\s*${SYN_MIX_PART}\\s*,\\s*${SYN_MIX_PART}\\s*\\)`;
-export const SYN_MIX_CAPT = `color-mix\\(\\s*in\\s+(${CS_MIX})\\s*,\\s*(${SYN_MIX_PART})\\s*,\\s*(${SYN_MIX_PART})\\s*\\)`;
-
-/* formats */
-export const VAL_COMP = 'computedValue';
-export const VAL_MIX = 'mixValue';
-export const VAL_SPEC = 'specifiedValue';
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/convert.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/convert.ts
@@ -1,469 +0,0 @@
-/**
- * convert
- */
-
-import {
-  CacheItem,
-  NullObject,
-  createCacheKey,
-  getCache,
-  setCache
-} from './cache';
-import {
-  convertColorToHsl,
-  convertColorToHwb,
-  convertColorToLab,
-  convertColorToLch,
-  convertColorToOklab,
-  convertColorToOklch,
-  convertColorToRgb,
-  numberToHexString,
-  parseColorFunc,
-  parseColorValue
-} from './color';
-import { isString } from './common';
-import { cssCalc } from './css-calc';
-import { resolveVar } from './css-var';
-import { resolveRelativeColor } from './relative-color';
-import { resolveColor } from './resolve';
-import { ColorChannels, ComputedColorChannels, Options } from './typedef';
-
-/* constants */
-import { SYN_FN_CALC, SYN_FN_REL, SYN_FN_VAR, VAL_COMP } from './constant';
-const NAMESPACE = 'convert';
-
-/* regexp */
-const REG_FN_CALC = new RegExp(SYN_FN_CALC);
-const REG_FN_REL = new RegExp(SYN_FN_REL);
-const REG_FN_VAR = new RegExp(SYN_FN_VAR);
-
-/**
- * pre process
- * @param value - CSS color value
- * @param [opt] - options
- * @returns value
- */
-export const preProcess = (
-  value: string,
-  opt: Options = {}
-): string | NullObject => {
-  if (isString(value)) {
-    value = value.trim();
-    if (!value) {
-      return new NullObject();
-    }
-  } else {
-    return new NullObject();
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'preProcess',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    if (cachedResult.isNull) {
-      return cachedResult as NullObject;
-    }
-    return cachedResult.item as string;
-  }
-  if (REG_FN_VAR.test(value)) {
-    const resolvedValue = resolveVar(value, opt);
-    if (isString(resolvedValue)) {
-      value = resolvedValue;
-    } else {
-      setCache(cacheKey, null);
-      return new NullObject();
-    }
-  }
-  if (REG_FN_REL.test(value)) {
-    const resolvedValue = resolveRelativeColor(value, opt);
-    if (isString(resolvedValue)) {
-      value = resolvedValue;
-    } else {
-      setCache(cacheKey, null);
-      return new NullObject();
-    }
-  } else if (REG_FN_CALC.test(value)) {
-    value = cssCalc(value, opt);
-  }
-  if (value.startsWith('color-mix')) {
-    const clonedOpt = structuredClone(opt);
-    clonedOpt.format = VAL_COMP;
-    clonedOpt.nullable = true;
-    const resolvedValue = resolveColor(value, clonedOpt);
-    setCache(cacheKey, resolvedValue);
-    return resolvedValue;
-  }
-  setCache(cacheKey, value);
-  return value;
-};
-
-/**
- * convert number to hex string
- * @param value - numeric value
- * @returns hex string: 00..ff
- */
-export const numberToHex = (value: number): string => {
-  const hex = numberToHexString(value);
-  return hex;
-};
-
-/**
- * convert color to hex
- * @param value - CSS color value
- * @param [opt] - options
- * @param [opt.alpha] - enable alpha channel
- * @returns #rrggbb | #rrggbbaa | null
- */
-export const colorToHex = (value: string, opt: Options = {}): string | null => {
-  if (isString(value)) {
-    const resolvedValue = preProcess(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      return null;
-    }
-    value = resolvedValue.toLowerCase();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const { alpha = false } = opt;
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'colorToHex',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    if (cachedResult.isNull) {
-      return null;
-    }
-    return cachedResult.item as string;
-  }
-  let hex;
-  opt.nullable = true;
-  if (alpha) {
-    opt.format = 'hexAlpha';
-    hex = resolveColor(value, opt);
-  } else {
-    opt.format = 'hex';
-    hex = resolveColor(value, opt);
-  }
-  if (isString(hex)) {
-    setCache(cacheKey, hex);
-    return hex;
-  }
-  setCache(cacheKey, null);
-  return null;
-};
-
-/**
- * convert color to hsl
- * @param value - CSS color value
- * @param [opt] - options
- * @returns ColorChannels - [h, s, l, alpha]
- */
-export const colorToHsl = (value: string, opt: Options = {}): ColorChannels => {
-  if (isString(value)) {
-    const resolvedValue = preProcess(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      return [0, 0, 0, 0];
-    }
-    value = resolvedValue.toLowerCase();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'colorToHsl',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as ColorChannels;
-  }
-  opt.format = 'hsl';
-  const hsl = convertColorToHsl(value, opt) as ColorChannels;
-  setCache(cacheKey, hsl);
-  return hsl;
-};
-
-/**
- * convert color to hwb
- * @param value - CSS color value
- * @param [opt] - options
- * @returns ColorChannels - [h, w, b, alpha]
- */
-export const colorToHwb = (value: string, opt: Options = {}): ColorChannels => {
-  if (isString(value)) {
-    const resolvedValue = preProcess(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      return [0, 0, 0, 0];
-    }
-    value = resolvedValue.toLowerCase();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'colorToHwb',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as ColorChannels;
-  }
-  opt.format = 'hwb';
-  const hwb = convertColorToHwb(value, opt) as ColorChannels;
-  setCache(cacheKey, hwb);
-  return hwb;
-};
-
-/**
- * convert color to lab
- * @param value - CSS color value
- * @param [opt] - options
- * @returns ColorChannels - [l, a, b, alpha]
- */
-export const colorToLab = (value: string, opt: Options = {}): ColorChannels => {
-  if (isString(value)) {
-    const resolvedValue = preProcess(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      return [0, 0, 0, 0];
-    }
-    value = resolvedValue.toLowerCase();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'colorToLab',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as ColorChannels;
-  }
-  const lab = convertColorToLab(value, opt) as ColorChannels;
-  setCache(cacheKey, lab);
-  return lab;
-};
-
-/**
- * convert color to lch
- * @param value - CSS color value
- * @param [opt] - options
- * @returns ColorChannels - [l, c, h, alpha]
- */
-export const colorToLch = (value: string, opt: Options = {}): ColorChannels => {
-  if (isString(value)) {
-    const resolvedValue = preProcess(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      return [0, 0, 0, 0];
-    }
-    value = resolvedValue.toLowerCase();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'colorToLch',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as ColorChannels;
-  }
-  const lch = convertColorToLch(value, opt) as ColorChannels;
-  setCache(cacheKey, lch);
-  return lch;
-};
-
-/**
- * convert color to oklab
- * @param value - CSS color value
- * @param [opt] - options
- * @returns ColorChannels - [l, a, b, alpha]
- */
-export const colorToOklab = (
-  value: string,
-  opt: Options = {}
-): ColorChannels => {
-  if (isString(value)) {
-    const resolvedValue = preProcess(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      return [0, 0, 0, 0];
-    }
-    value = resolvedValue.toLowerCase();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'colorToOklab',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as ColorChannels;
-  }
-  const lab = convertColorToOklab(value, opt) as ColorChannels;
-  setCache(cacheKey, lab);
-  return lab;
-};
-
-/**
- * convert color to oklch
- * @param value - CSS color value
- * @param [opt] - options
- * @returns ColorChannels - [l, c, h, alpha]
- */
-export const colorToOklch = (
-  value: string,
-  opt: Options = {}
-): ColorChannels => {
-  if (isString(value)) {
-    const resolvedValue = preProcess(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      return [0, 0, 0, 0];
-    }
-    value = resolvedValue.toLowerCase();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'colorToOklch',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as ColorChannels;
-  }
-  const lch = convertColorToOklch(value, opt) as ColorChannels;
-  setCache(cacheKey, lch);
-  return lch;
-};
-
-/**
- * convert color to rgb
- * @param value - CSS color value
- * @param [opt] - options
- * @returns ColorChannels - [r, g, b, alpha]
- */
-export const colorToRgb = (value: string, opt: Options = {}): ColorChannels => {
-  if (isString(value)) {
-    const resolvedValue = preProcess(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      return [0, 0, 0, 0];
-    }
-    value = resolvedValue.toLowerCase();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'colorToRgb',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as ColorChannels;
-  }
-  const rgb = convertColorToRgb(value, opt) as ColorChannels;
-  setCache(cacheKey, rgb);
-  return rgb;
-};
-
-/**
- * convert color to xyz
- * @param value - CSS color value
- * @param [opt] - options
- * @returns ColorChannels - [x, y, z, alpha]
- */
-export const colorToXyz = (value: string, opt: Options = {}): ColorChannels => {
-  if (isString(value)) {
-    const resolvedValue = preProcess(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      return [0, 0, 0, 0];
-    }
-    value = resolvedValue.toLowerCase();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'colorToXyz',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as ColorChannels;
-  }
-  let xyz;
-  if (value.startsWith('color(')) {
-    [, ...xyz] = parseColorFunc(value, opt) as ComputedColorChannels;
-  } else {
-    [, ...xyz] = parseColorValue(value, opt) as ComputedColorChannels;
-  }
-  setCache(cacheKey, xyz);
-  return xyz as ColorChannels;
-};
-
-/**
- * convert color to xyz-d50
- * @param value - CSS color value
- * @param [opt] - options
- * @returns ColorChannels - [x, y, z, alpha]
- */
-export const colorToXyzD50 = (
-  value: string,
-  opt: Options = {}
-): ColorChannels => {
-  opt.d50 = true;
-  return colorToXyz(value, opt);
-};
-
-/* convert */
-export const convert = {
-  colorToHex,
-  colorToHsl,
-  colorToHwb,
-  colorToLab,
-  colorToLch,
-  colorToOklab,
-  colorToOklch,
-  colorToRgb,
-  colorToXyz,
-  colorToXyzD50,
-  numberToHex
-};
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/css-calc.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/css-calc.ts
@@ -1,965 +0,0 @@
-/**
- * css-calc
- */
-
-import { calc } from '@csstools/css-calc';
-import { CSSToken, TokenType, tokenize } from '@csstools/css-tokenizer';
-import {
-  CacheItem,
-  NullObject,
-  createCacheKey,
-  getCache,
-  setCache
-} from './cache';
-import { isString, isStringOrNumber } from './common';
-import { resolveVar } from './css-var';
-import { roundToPrecision } from './util';
-import { MatchedRegExp, Options } from './typedef';
-
-/* constants */
-import {
-  ANGLE,
-  LENGTH,
-  NUM,
-  SYN_FN_CALC,
-  SYN_FN_MATH_START,
-  SYN_FN_VAR,
-  SYN_FN_VAR_START,
-  VAL_SPEC
-} from './constant';
-const {
-  CloseParen: PAREN_CLOSE,
-  Comment: COMMENT,
-  Dimension: DIM,
-  EOF,
-  Function: FUNC,
-  OpenParen: PAREN_OPEN,
-  Whitespace: W_SPACE
-} = TokenType;
-const NAMESPACE = 'css-calc';
-
-/* numeric constants */
-const TRIA = 3;
-const HEX = 16;
-const MAX_PCT = 100;
-
-/* regexp */
-const REG_FN_CALC = new RegExp(SYN_FN_CALC);
-const REG_FN_CALC_NUM = new RegExp(`^calc\\((${NUM})\\)$`);
-const REG_FN_MATH_START = new RegExp(SYN_FN_MATH_START);
-const REG_FN_VAR = new RegExp(SYN_FN_VAR);
-const REG_FN_VAR_START = new RegExp(SYN_FN_VAR_START);
-const REG_OPERATOR = /\s[*+/-]\s/;
-const REG_TYPE_DIM = new RegExp(`^(${NUM})(${ANGLE}|${LENGTH})$`);
-const REG_TYPE_DIM_PCT = new RegExp(`^(${NUM})(${ANGLE}|${LENGTH}|%)$`);
-const REG_TYPE_PCT = new RegExp(`^(${NUM})%$`);
-
-/**
- * Calclator
- */
-export class Calculator {
-  /* private */
-  // number
-  #hasNum: boolean;
-  #numSum: number[];
-  #numMul: number[];
-  // percentage
-  #hasPct: boolean;
-  #pctSum: number[];
-  #pctMul: number[];
-  // dimension
-  #hasDim: boolean;
-  #dimSum: string[];
-  #dimSub: string[];
-  #dimMul: string[];
-  #dimDiv: string[];
-  // et cetra
-  #hasEtc: boolean;
-  #etcSum: string[];
-  #etcSub: string[];
-  #etcMul: string[];
-  #etcDiv: string[];
-
-  /**
-   * constructor
-   */
-  constructor() {
-    // number
-    this.#hasNum = false;
-    this.#numSum = [];
-    this.#numMul = [];
-    // percentage
-    this.#hasPct = false;
-    this.#pctSum = [];
-    this.#pctMul = [];
-    // dimension
-    this.#hasDim = false;
-    this.#dimSum = [];
-    this.#dimSub = [];
-    this.#dimMul = [];
-    this.#dimDiv = [];
-    // et cetra
-    this.#hasEtc = false;
-    this.#etcSum = [];
-    this.#etcSub = [];
-    this.#etcMul = [];
-    this.#etcDiv = [];
-  }
-
-  get hasNum() {
-    return this.#hasNum;
-  }
-
-  set hasNum(value: boolean) {
-    this.#hasNum = !!value;
-  }
-
-  get numSum() {
-    return this.#numSum;
-  }
-
-  get numMul() {
-    return this.#numMul;
-  }
-
-  get hasPct() {
-    return this.#hasPct;
-  }
-
-  set hasPct(value: boolean) {
-    this.#hasPct = !!value;
-  }
-
-  get pctSum() {
-    return this.#pctSum;
-  }
-
-  get pctMul() {
-    return this.#pctMul;
-  }
-
-  get hasDim() {
-    return this.#hasDim;
-  }
-
-  set hasDim(value: boolean) {
-    this.#hasDim = !!value;
-  }
-
-  get dimSum() {
-    return this.#dimSum;
-  }
-
-  get dimSub() {
-    return this.#dimSub;
-  }
-
-  get dimMul() {
-    return this.#dimMul;
-  }
-
-  get dimDiv() {
-    return this.#dimDiv;
-  }
-
-  get hasEtc() {
-    return this.#hasEtc;
-  }
-
-  set hasEtc(value: boolean) {
-    this.#hasEtc = !!value;
-  }
-
-  get etcSum() {
-    return this.#etcSum;
-  }
-
-  get etcSub() {
-    return this.#etcSub;
-  }
-
-  get etcMul() {
-    return this.#etcMul;
-  }
-
-  get etcDiv() {
-    return this.#etcDiv;
-  }
-
-  /**
-   * clear values
-   * @returns void
-   */
-  clear() {
-    // number
-    this.#hasNum = false;
-    this.#numSum = [];
-    this.#numMul = [];
-    // percentage
-    this.#hasPct = false;
-    this.#pctSum = [];
-    this.#pctMul = [];
-    // dimension
-    this.#hasDim = false;
-    this.#dimSum = [];
-    this.#dimSub = [];
-    this.#dimMul = [];
-    this.#dimDiv = [];
-    // et cetra
-    this.#hasEtc = false;
-    this.#etcSum = [];
-    this.#etcSub = [];
-    this.#etcMul = [];
-    this.#etcDiv = [];
-  }
-
-  /**
-   * sort values
-   * @param values - values
-   * @returns sorted values
-   */
-  sort(values: string[] = []): string[] {
-    const arr = [...values];
-    if (arr.length > 1) {
-      arr.sort((a, b) => {
-        let res;
-        if (REG_TYPE_DIM_PCT.test(a) && REG_TYPE_DIM_PCT.test(b)) {
-          const [, valA, unitA] = a.match(REG_TYPE_DIM_PCT) as MatchedRegExp;
-          const [, valB, unitB] = b.match(REG_TYPE_DIM_PCT) as MatchedRegExp;
-          if (unitA === unitB) {
-            if (Number(valA) === Number(valB)) {
-              res = 0;
-            } else if (Number(valA) > Number(valB)) {
-              res = 1;
-            } else {
-              res = -1;
-            }
-          } else if (unitA > unitB) {
-            res = 1;
-          } else {
-            res = -1;
-          }
-        } else {
-          if (a === b) {
-            res = 0;
-          } else if (a > b) {
-            res = 1;
-          } else {
-            res = -1;
-          }
-        }
-        return res;
-      });
-    }
-    return arr;
-  }
-
-  /**
-   * multiply values
-   * @returns resolved value
-   */
-  multiply(): string {
-    const value = [];
-    let num;
-    if (this.#hasNum) {
-      num = 1;
-      for (const i of this.#numMul) {
-        num *= i;
-        if (num === 0 || !Number.isFinite(num) || Number.isNaN(num)) {
-          break;
-        }
-      }
-      if (!this.#hasPct && !this.#hasDim && !this.hasEtc) {
-        if (Number.isFinite(num)) {
-          num = roundToPrecision(num, HEX);
-        }
-        value.push(num);
-      }
-    }
-    if (this.#hasPct) {
-      if (typeof num !== 'number') {
-        num = 1;
-      }
-      for (const i of this.#pctMul) {
-        num *= i;
-        if (num === 0 || !Number.isFinite(num) || Number.isNaN(num)) {
-          break;
-        }
-      }
-      if (Number.isFinite(num)) {
-        num = `${roundToPrecision(num, HEX)}%`;
-      }
-      if (!this.#hasDim && !this.hasEtc) {
-        value.push(num);
-      }
-    }
-    if (this.#hasDim) {
-      let dim = '';
-      let mul = '';
-      let div = '';
-      if (this.#dimMul.length) {
-        if (this.#dimMul.length === 1) {
-          [mul] = this.#dimMul as [string];
-        } else {
-          mul = `${this.sort(this.#dimMul).join(' * ')}`;
-        }
-      }
-      if (this.#dimDiv.length) {
-        if (this.#dimDiv.length === 1) {
-          [div] = this.#dimDiv as [string];
-        } else {
-          div = `${this.sort(this.#dimDiv).join(' * ')}`;
-        }
-      }
-      if (Number.isFinite(num)) {
-        if (mul) {
-          if (div) {
-            if (div.includes('*')) {
-              dim = calc(`calc(${num} * ${mul} / (${div}))`, {
-                toCanonicalUnits: true
-              });
-            } else {
-              dim = calc(`calc(${num} * ${mul} / ${div})`, {
-                toCanonicalUnits: true
-              });
-            }
-          } else {
-            dim = calc(`calc(${num} * ${mul})`, {
-              toCanonicalUnits: true
-            });
-          }
-        } else if (div.includes('*')) {
-          dim = calc(`calc(${num} / (${div}))`, {
-            toCanonicalUnits: true
-          });
-        } else {
-          dim = calc(`calc(${num} / ${div})`, {
-            toCanonicalUnits: true
-          });
-        }
-        value.push(dim.replace(/^calc/, ''));
-      } else {
-        if (!value.length && num !== undefined) {
-          value.push(num);
-        }
-        if (mul) {
-          if (div) {
-            if (div.includes('*')) {
-              dim = calc(`calc(${mul} / (${div}))`, {
-                toCanonicalUnits: true
-              });
-            } else {
-              dim = calc(`calc(${mul} / ${div})`, {
-                toCanonicalUnits: true
-              });
-            }
-          } else {
-            dim = calc(`calc(${mul})`, {
-              toCanonicalUnits: true
-            });
-          }
-          if (value.length) {
-            value.push('*', dim.replace(/^calc/, ''));
-          } else {
-            value.push(dim.replace(/^calc/, ''));
-          }
-        } else {
-          dim = calc(`calc(${div})`, {
-            toCanonicalUnits: true
-          });
-          if (value.length) {
-            value.push('/', dim.replace(/^calc/, ''));
-          } else {
-            value.push('1', '/', dim.replace(/^calc/, ''));
-          }
-        }
-      }
-    }
-    if (this.#hasEtc) {
-      if (this.#etcMul.length) {
-        if (!value.length && num !== undefined) {
-          value.push(num);
-        }
-        const mul = this.sort(this.#etcMul).join(' * ');
-        if (value.length) {
-          value.push(`* ${mul}`);
-        } else {
-          value.push(`${mul}`);
-        }
-      }
-      if (this.#etcDiv.length) {
-        const div = this.sort(this.#etcDiv).join(' * ');
-        if (div.includes('*')) {
-          if (value.length) {
-            value.push(`/ (${div})`);
-          } else {
-            value.push(`1 / (${div})`);
-          }
-        } else if (value.length) {
-          value.push(`/ ${div}`);
-        } else {
-          value.push(`1 / ${div}`);
-        }
-      }
-    }
-    if (value.length) {
-      return value.join(' ');
-    }
-    return '';
-  }
-
-  /**
-   * sum values
-   * @returns resolved value
-   */
-  sum(): string {
-    const value = [];
-    if (this.#hasNum) {
-      let num = 0;
-      for (const i of this.#numSum) {
-        num += i;
-        if (!Number.isFinite(num) || Number.isNaN(num)) {
-          break;
-        }
-      }
-      value.push(num);
-    }
-    if (this.#hasPct) {
-      let num: number | string = 0;
-      for (const i of this.#pctSum) {
-        num += i;
-        if (!Number.isFinite(num)) {
-          break;
-        }
-      }
-      if (Number.isFinite(num)) {
-        num = `${num}%`;
-      }
-      if (value.length) {
-        value.push(`+ ${num}`);
-      } else {
-        value.push(num);
-      }
-    }
-    if (this.#hasDim) {
-      let dim, sum, sub;
-      if (this.#dimSum.length) {
-        sum = this.sort(this.#dimSum).join(' + ');
-      }
-      if (this.#dimSub.length) {
-        sub = this.sort(this.#dimSub).join(' + ');
-      }
-      if (sum) {
-        if (sub) {
-          if (sub.includes('-')) {
-            dim = calc(`calc(${sum} - (${sub}))`, {
-              toCanonicalUnits: true
-            });
-          } else {
-            dim = calc(`calc(${sum} - ${sub})`, {
-              toCanonicalUnits: true
-            });
-          }
-        } else {
-          dim = calc(`calc(${sum})`, {
-            toCanonicalUnits: true
-          });
-        }
-      } else {
-        dim = calc(`calc(-1 * (${sub}))`, {
-          toCanonicalUnits: true
-        });
-      }
-      if (value.length) {
-        value.push('+', dim.replace(/^calc/, ''));
-      } else {
-        value.push(dim.replace(/^calc/, ''));
-      }
-    }
-    if (this.#hasEtc) {
-      if (this.#etcSum.length) {
-        const sum = this.sort(this.#etcSum)
-          .map(item => {
-            let res;
-            if (
-              REG_OPERATOR.test(item) &&
-              !item.startsWith('(') &&
-              !item.endsWith(')')
-            ) {
-              res = `(${item})`;
-            } else {
-              res = item;
-            }
-            return res;
-          })
-          .join(' + ');
-        if (value.length) {
-          if (this.#etcSum.length > 1) {
-            value.push(`+ (${sum})`);
-          } else {
-            value.push(`+ ${sum}`);
-          }
-        } else {
-          value.push(`${sum}`);
-        }
-      }
-      if (this.#etcSub.length) {
-        const sub = this.sort(this.#etcSub)
-          .map(item => {
-            let res;
-            if (
-              REG_OPERATOR.test(item) &&
-              !item.startsWith('(') &&
-              !item.endsWith(')')
-            ) {
-              res = `(${item})`;
-            } else {
-              res = item;
-            }
-            return res;
-          })
-          .join(' + ');
-        if (value.length) {
-          if (this.#etcSub.length > 1) {
-            value.push(`- (${sub})`);
-          } else {
-            value.push(`- ${sub}`);
-          }
-        } else if (this.#etcSub.length > 1) {
-          value.push(`-1 * (${sub})`);
-        } else {
-          value.push(`-1 * ${sub}`);
-        }
-      }
-    }
-    if (value.length) {
-      return value.join(' ');
-    }
-    return '';
-  }
-}
-
-/**
- * sort calc values
- * @param values - values to sort
- * @param [finalize] - finalize values
- * @returns sorted values
- */
-export const sortCalcValues = (
-  values: (number | string)[] = [],
-  finalize: boolean = false
-): string => {
-  if (values.length < TRIA) {
-    throw new Error(`Unexpected array length ${values.length}.`);
-  }
-  const start = values.shift();
-  if (!isString(start) || !start.endsWith('(')) {
-    throw new Error(`Unexpected token ${start}.`);
-  }
-  const end = values.pop();
-  if (end !== ')') {
-    throw new Error(`Unexpected token ${end}.`);
-  }
-  if (values.length === 1) {
-    const [value] = values;
-    if (!isStringOrNumber(value)) {
-      throw new Error(`Unexpected token ${value}.`);
-    }
-    return `${start}${value}${end}`;
-  }
-  const sortedValues = [];
-  const cal = new Calculator();
-  let operator: string = '';
-  const l = values.length;
-  for (let i = 0; i < l; i++) {
-    const value = values[i];
-    if (!isStringOrNumber(value)) {
-      throw new Error(`Unexpected token ${value}.`);
-    }
-    if (value === '*' || value === '/') {
-      operator = value;
-    } else if (value === '+' || value === '-') {
-      const sortedValue = cal.multiply();
-      if (sortedValue) {
-        sortedValues.push(sortedValue, value);
-      }
-      cal.clear();
-      operator = '';
-    } else {
-      const numValue = Number(value);
-      const strValue = `${value}`;
-      switch (operator) {
-        case '/': {
-          if (Number.isFinite(numValue)) {
-            cal.hasNum = true;
-            cal.numMul.push(1 / numValue);
-          } else if (REG_TYPE_PCT.test(strValue)) {
-            const [, val] = strValue.match(REG_TYPE_PCT) as MatchedRegExp;
-            cal.hasPct = true;
-            cal.pctMul.push((MAX_PCT * MAX_PCT) / Number(val));
-          } else if (REG_TYPE_DIM.test(strValue)) {
-            cal.hasDim = true;
-            cal.dimDiv.push(strValue);
-          } else {
-            cal.hasEtc = true;
-            cal.etcDiv.push(strValue);
-          }
-          break;
-        }
-        case '*':
-        default: {
-          if (Number.isFinite(numValue)) {
-            cal.hasNum = true;
-            cal.numMul.push(numValue);
-          } else if (REG_TYPE_PCT.test(strValue)) {
-            const [, val] = strValue.match(REG_TYPE_PCT) as MatchedRegExp;
-            cal.hasPct = true;
-            cal.pctMul.push(Number(val));
-          } else if (REG_TYPE_DIM.test(strValue)) {
-            cal.hasDim = true;
-            cal.dimMul.push(strValue);
-          } else {
-            cal.hasEtc = true;
-            cal.etcMul.push(strValue);
-          }
-        }
-      }
-    }
-    if (i === l - 1) {
-      const sortedValue = cal.multiply();
-      if (sortedValue) {
-        sortedValues.push(sortedValue);
-      }
-      cal.clear();
-      operator = '';
-    }
-  }
-  let resolvedValue = '';
-  if (finalize && (sortedValues.includes('+') || sortedValues.includes('-'))) {
-    const finalizedValues = [];
-    cal.clear();
-    operator = '';
-    const l = sortedValues.length;
-    for (let i = 0; i < l; i++) {
-      const value = sortedValues[i];
-      if (isStringOrNumber(value)) {
-        if (value === '+' || value === '-') {
-          operator = value;
-        } else {
-          const numValue = Number(value);
-          const strValue = `${value}`;
-          switch (operator) {
-            case '-': {
-              if (Number.isFinite(numValue)) {
-                cal.hasNum = true;
-                cal.numSum.push(-1 * numValue);
-              } else if (REG_TYPE_PCT.test(strValue)) {
-                const [, val] = strValue.match(REG_TYPE_PCT) as MatchedRegExp;
-                cal.hasPct = true;
-                cal.pctSum.push(-1 * Number(val));
-              } else if (REG_TYPE_DIM.test(strValue)) {
-                cal.hasDim = true;
-                cal.dimSub.push(strValue);
-              } else {
-                cal.hasEtc = true;
-                cal.etcSub.push(strValue);
-              }
-              break;
-            }
-            case '+':
-            default: {
-              if (Number.isFinite(numValue)) {
-                cal.hasNum = true;
-                cal.numSum.push(numValue);
-              } else if (REG_TYPE_PCT.test(strValue)) {
-                const [, val] = strValue.match(REG_TYPE_PCT) as MatchedRegExp;
-                cal.hasPct = true;
-                cal.pctSum.push(Number(val));
-              } else if (REG_TYPE_DIM.test(strValue)) {
-                cal.hasDim = true;
-                cal.dimSum.push(strValue);
-              } else {
-                cal.hasEtc = true;
-                cal.etcSum.push(strValue);
-              }
-            }
-          }
-        }
-      }
-      if (i === l - 1) {
-        const sortedValue = cal.sum();
-        if (sortedValue) {
-          finalizedValues.push(sortedValue);
-        }
-        cal.clear();
-        operator = '';
-      }
-    }
-    resolvedValue = finalizedValues.join(' ').replace(/\+\s-/g, '- ');
-  } else {
-    resolvedValue = sortedValues.join(' ').replace(/\+\s-/g, '- ');
-  }
-  if (
-    resolvedValue.startsWith('(') &&
-    resolvedValue.endsWith(')') &&
-    resolvedValue.lastIndexOf('(') === 0 &&
-    resolvedValue.indexOf(')') === resolvedValue.length - 1
-  ) {
-    resolvedValue = resolvedValue.replace(/^\(/, '').replace(/\)$/, '');
-  }
-  return `${start}${resolvedValue}${end}`;
-};
-
-/**
- * serialize calc
- * @param value - CSS value
- * @param [opt] - options
- * @returns serialized value
- */
-export const serializeCalc = (value: string, opt: Options = {}): string => {
-  const { format = '' } = opt;
-  if (isString(value)) {
-    if (!REG_FN_VAR_START.test(value) || format !== VAL_SPEC) {
-      return value;
-    }
-    value = value.toLowerCase().trim();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'serializeCalc',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as string;
-  }
-  const items: string[] = tokenize({ css: value })
-    .map((token: CSSToken): string => {
-      const [type, value] = token as [TokenType, string];
-      let res = '';
-      if (type !== W_SPACE && type !== COMMENT) {
-        res = value;
-      }
-      return res;
-    })
-    .filter(v => v);
-  let startIndex = items.findLastIndex((item: string) => /\($/.test(item));
-  while (startIndex) {
-    const endIndex = items.findIndex((item: unknown, index: number) => {
-      return item === ')' && index > startIndex;
-    });
-    const slicedValues: string[] = items.slice(startIndex, endIndex + 1);
-    let serializedValue: string = sortCalcValues(slicedValues);
-    if (REG_FN_VAR_START.test(serializedValue)) {
-      serializedValue = calc(serializedValue, {
-        toCanonicalUnits: true
-      });
-    }
-    items.splice(startIndex, endIndex - startIndex + 1, serializedValue);
-    startIndex = items.findLastIndex((item: string) => /\($/.test(item));
-  }
-  const serializedCalc = sortCalcValues(items, true);
-  setCache(cacheKey, serializedCalc);
-  return serializedCalc;
-};
-
-/**
- * resolve dimension
- * @param token - CSS token
- * @param [opt] - options
- * @returns resolved value
- */
-export const resolveDimension = (
-  token: CSSToken,
-  opt: Options = {}
-): string | NullObject => {
-  if (!Array.isArray(token)) {
-    throw new TypeError(`${token} is not an array.`);
-  }
-  const [, , , , detail = {}] = token;
-  const { unit, value } = detail as {
-    unit: string;
-    value: number;
-  };
-  const { dimension = {} } = opt;
-  if (unit === 'px') {
-    return `${value}${unit}`;
-  }
-  const relativeValue = Number(value);
-  if (unit && Number.isFinite(relativeValue)) {
-    let pixelValue;
-    if (Object.hasOwnProperty.call(dimension, unit)) {
-      pixelValue = dimension[unit];
-    } else if (typeof dimension.callback === 'function') {
-      pixelValue = dimension.callback(unit);
-    }
-    pixelValue = Number(pixelValue);
-    if (Number.isFinite(pixelValue)) {
-      return `${relativeValue * pixelValue}px`;
-    }
-  }
-  return new NullObject();
-};
-
-/**
- * parse tokens
- * @param tokens - CSS tokens
- * @param [opt] - options
- * @returns parsed tokens
- */
-export const parseTokens = (
-  tokens: CSSToken[],
-  opt: Options = {}
-): string[] => {
-  if (!Array.isArray(tokens)) {
-    throw new TypeError(`${tokens} is not an array.`);
-  }
-  const { format = '' } = opt;
-  const mathFunc = new Set();
-  let nest = 0;
-  const res: string[] = [];
-  while (tokens.length) {
-    const token = tokens.shift();
-    if (!Array.isArray(token)) {
-      throw new TypeError(`${token} is not an array.`);
-    }
-    const [type = '', value = ''] = token as [TokenType, string];
-    switch (type) {
-      case DIM: {
-        if (format === VAL_SPEC && !mathFunc.has(nest)) {
-          res.push(value);
-        } else {
-          const resolvedValue = resolveDimension(token, opt);
-          if (isString(resolvedValue)) {
-            res.push(resolvedValue);
-          } else {
-            res.push(value);
-          }
-        }
-        break;
-      }
-      case FUNC:
-      case PAREN_OPEN: {
-        res.push(value);
-        nest++;
-        if (REG_FN_MATH_START.test(value)) {
-          mathFunc.add(nest);
-        }
-        break;
-      }
-      case PAREN_CLOSE: {
-        if (res.length) {
-          const lastValue = res[res.length - 1];
-          if (lastValue === ' ') {
-            res.splice(-1, 1, value);
-          } else {
-            res.push(value);
-          }
-        } else {
-          res.push(value);
-        }
-        if (mathFunc.has(nest)) {
-          mathFunc.delete(nest);
-        }
-        nest--;
-        break;
-      }
-      case W_SPACE: {
-        if (res.length) {
-          const lastValue = res[res.length - 1];
-          if (
-            isString(lastValue) &&
-            !lastValue.endsWith('(') &&
-            lastValue !== ' '
-          ) {
-            res.push(value);
-          }
-        }
-        break;
-      }
-      default: {
-        if (type !== COMMENT && type !== EOF) {
-          res.push(value);
-        }
-      }
-    }
-  }
-  return res;
-};
-
-/**
- * CSS calc()
- * @param value - CSS value including calc()
- * @param [opt] - options
- * @returns resolved value
- */
-export const cssCalc = (value: string, opt: Options = {}): string => {
-  const { format = '' } = opt;
-  if (isString(value)) {
-    if (REG_FN_VAR.test(value)) {
-      if (format === VAL_SPEC) {
-        return value;
-      } else {
-        const resolvedValue = resolveVar(value, opt);
-        if (isString(resolvedValue)) {
-          return resolvedValue;
-        } else {
-          return '';
-        }
-      }
-    } else if (!REG_FN_CALC.test(value)) {
-      return value;
-    }
-    value = value.toLowerCase().trim();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'cssCalc',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as string;
-  }
-  const tokens = tokenize({ css: value });
-  const values = parseTokens(tokens, opt);
-  let resolvedValue: string = calc(values.join(''), {
-    toCanonicalUnits: true
-  });
-  if (REG_FN_VAR_START.test(value)) {
-    if (REG_TYPE_DIM_PCT.test(resolvedValue)) {
-      const [, val, unit] = resolvedValue.match(
-        REG_TYPE_DIM_PCT
-      ) as MatchedRegExp;
-      resolvedValue = `${roundToPrecision(Number(val), HEX)}${unit}`;
-    }
-    // wrap with `calc()`
-    if (
-      resolvedValue &&
-      !REG_FN_VAR_START.test(resolvedValue) &&
-      format === VAL_SPEC
-    ) {
-      resolvedValue = `calc(${resolvedValue})`;
-    }
-  }
-  if (format === VAL_SPEC) {
-    if (/\s[-+*/]\s/.test(resolvedValue) && !resolvedValue.includes('NaN')) {
-      resolvedValue = serializeCalc(resolvedValue, opt);
-    } else if (REG_FN_CALC_NUM.test(resolvedValue)) {
-      const [, val] = resolvedValue.match(REG_FN_CALC_NUM) as MatchedRegExp;
-      resolvedValue = `calc(${roundToPrecision(Number(val), HEX)})`;
-    }
-  }
-  setCache(cacheKey, resolvedValue);
-  return resolvedValue;
-};
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/css-gradient.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/css-gradient.ts
@@ -1,289 +0,0 @@
-/**
- * css-gradient
- */
-
-import { CacheItem, createCacheKey, getCache, setCache } from './cache';
-import { isString } from './common';
-import { MatchedRegExp, Options } from './typedef';
-import { isColor, splitValue } from './util';
-
-/* constants */
-import {
-  ANGLE,
-  CS_HUE,
-  CS_RECT,
-  LENGTH,
-  NUM,
-  NUM_POSITIVE,
-  PCT
-} from './constant';
-const NAMESPACE = 'css-gradient';
-const DIM_ANGLE = `${NUM}(?:${ANGLE})`;
-const DIM_ANGLE_PCT = `${DIM_ANGLE}|${PCT}`;
-const DIM_LEN = `${NUM}(?:${LENGTH})|0`;
-const DIM_LEN_PCT = `${DIM_LEN}|${PCT}`;
-const DIM_LEN_PCT_POSI = `${NUM_POSITIVE}(?:${LENGTH}|%)|0`;
-const DIM_LEN_POSI = `${NUM_POSITIVE}(?:${LENGTH})|0`;
-const CTR = 'center';
-const L_R = 'left|right';
-const T_B = 'top|bottom';
-const S_E = 'start|end';
-const AXIS_X = `${L_R}|x-(?:${S_E})`;
-const AXIS_Y = `${T_B}|y-(?:${S_E})`;
-const BLOCK = `block-(?:${S_E})`;
-const INLINE = `inline-(?:${S_E})`;
-const POS_1 = `${CTR}|${AXIS_X}|${AXIS_Y}|${BLOCK}|${INLINE}|${DIM_LEN_PCT}`;
-const POS_2 = [
-  `(?:${CTR}|${AXIS_X})\\s+(?:${CTR}|${AXIS_Y})`,
-  `(?:${CTR}|${AXIS_Y})\\s+(?:${CTR}|${AXIS_X})`,
-  `(?:${CTR}|${AXIS_X}|${DIM_LEN_PCT})\\s+(?:${CTR}|${AXIS_Y}|${DIM_LEN_PCT})`,
-  `(?:${CTR}|${BLOCK})\\s+(?:${CTR}|${INLINE})`,
-  `(?:${CTR}|${INLINE})\\s+(?:${CTR}|${BLOCK})`,
-  `(?:${CTR}|${S_E})\\s+(?:${CTR}|${S_E})`
-].join('|');
-const POS_4 = [
-  `(?:${AXIS_X})\\s+(?:${DIM_LEN_PCT})\\s+(?:${AXIS_Y})\\s+(?:${DIM_LEN_PCT})`,
-  `(?:${AXIS_Y})\\s+(?:${DIM_LEN_PCT})\\s+(?:${AXIS_X})\\s+(?:${DIM_LEN_PCT})`,
-  `(?:${BLOCK})\\s+(?:${DIM_LEN_PCT})\\s+(?:${INLINE})\\s+(?:${DIM_LEN_PCT})`,
-  `(?:${INLINE})\\s+(?:${DIM_LEN_PCT})\\s+(?:${BLOCK})\\s+(?:${DIM_LEN_PCT})`,
-  `(?:${S_E})\\s+(?:${DIM_LEN_PCT})\\s+(?:${S_E})\\s+(?:${DIM_LEN_PCT})`
-].join('|');
-const RAD_EXTENT = '(?:clos|farth)est-(?:corner|side)';
-const RAD_SIZE = [
-  `${RAD_EXTENT}(?:\\s+${RAD_EXTENT})?`,
-  `${DIM_LEN_POSI}`,
-  `(?:${DIM_LEN_PCT_POSI})\\s+(?:${DIM_LEN_PCT_POSI})`
-].join('|');
-const RAD_SHAPE = 'circle|ellipse';
-const FROM_ANGLE = `from\\s+${DIM_ANGLE}`;
-const AT_POSITION = `at\\s+(?:${POS_1}|${POS_2}|${POS_4})`;
-const TO_SIDE_CORNER = `to\\s+(?:(?:${L_R})(?:\\s(?:${T_B}))?|(?:${T_B})(?:\\s(?:${L_R}))?)`;
-const IN_COLOR_SPACE = `in\\s+(?:${CS_RECT}|${CS_HUE})`;
-
-/* type definitions */
-/**
- * @type ColorStopList - list of color stops
- */
-type ColorStopList = [string, string, ...string[]];
-
-/**
- * @typedef Gradient - parsed CSS gradient
- * @property value - input value
- * @property type - gradient type
- * @property [gradientLine] - gradient line
- * @property colorStopList - list of color stops
- */
-interface Gradient {
-  value: string;
-  type: string;
-  gradientLine?: string;
-  colorStopList: ColorStopList;
-}
-
-/* regexp */
-const REG_GRAD = /^(?:repeating-)?(?:conic|linear|radial)-gradient\(/;
-const REG_GRAD_CAPT = /^((?:repeating-)?(?:conic|linear|radial)-gradient)\(/;
-
-/**
- * get gradient type
- * @param value - gradient value
- * @returns gradient type
- */
-export const getGradientType = (value: string): string => {
-  if (isString(value)) {
-    value = value.trim();
-    if (REG_GRAD.test(value)) {
-      const [, type] = value.match(REG_GRAD_CAPT) as MatchedRegExp;
-      return type;
-    }
-  }
-  return '';
-};
-
-/**
- * validate gradient line
- * @param value - gradient line value
- * @param type - gradient type
- * @returns result
- */
-export const validateGradientLine = (value: string, type: string): boolean => {
-  if (isString(value) && isString(type)) {
-    value = value.trim();
-    type = type.trim();
-    let lineSyntax = '';
-    if (/^(?:repeating-)?linear-gradient$/.test(type)) {
-      /*
-       * <linear-gradient-line> = [
-       *   [ <angle> | to <side-or-corner> ] ||
-       *   <color-interpolation-method>
-       * ]
-       */
-      lineSyntax = [
-        `(?:${DIM_ANGLE}|${TO_SIDE_CORNER})(?:\\s+${IN_COLOR_SPACE})?`,
-        `${IN_COLOR_SPACE}(?:\\s+(?:${DIM_ANGLE}|${TO_SIDE_CORNER}))?`
-      ].join('|');
-    } else if (/^(?:repeating-)?radial-gradient$/.test(type)) {
-      /*
-       * <radial-gradient-line> = [
-       *   [ [ <radial-shape> || <radial-size> ]? [ at <position> ]? ] ||
-       *   <color-interpolation-method>]?
-       */
-      lineSyntax = [
-        `(?:${RAD_SHAPE})(?:\\s+(?:${RAD_SIZE}))?(?:\\s+${AT_POSITION})?(?:\\s+${IN_COLOR_SPACE})?`,
-        `(?:${RAD_SIZE})(?:\\s+(?:${RAD_SHAPE}))?(?:\\s+${AT_POSITION})?(?:\\s+${IN_COLOR_SPACE})?`,
-        `${AT_POSITION}(?:\\s+${IN_COLOR_SPACE})?`,
-        `${IN_COLOR_SPACE}(?:\\s+${RAD_SHAPE})(?:\\s+(?:${RAD_SIZE}))?(?:\\s+${AT_POSITION})?`,
-        `${IN_COLOR_SPACE}(?:\\s+${RAD_SIZE})(?:\\s+(?:${RAD_SHAPE}))?(?:\\s+${AT_POSITION})?`,
-        `${IN_COLOR_SPACE}(?:\\s+${AT_POSITION})?`
-      ].join('|');
-    } else if (/^(?:repeating-)?conic-gradient$/.test(type)) {
-      /*
-       * <conic-gradient-line> = [
-       *   [ [ from <angle> ]? [ at <position> ]? ] ||
-       *   <color-interpolation-method>
-       * ]
-       */
-      lineSyntax = [
-        `${FROM_ANGLE}(?:\\s+${AT_POSITION})?(?:\\s+${IN_COLOR_SPACE})?`,
-        `${AT_POSITION}(?:\\s+${IN_COLOR_SPACE})?`,
-        `${IN_COLOR_SPACE}(?:\\s+${FROM_ANGLE})?(?:\\s+${AT_POSITION})?`
-      ].join('|');
-    }
-    if (lineSyntax) {
-      const reg = new RegExp(`^(?:${lineSyntax})$`);
-      return reg.test(value);
-    }
-  }
-  return false;
-};
-
-/**
- * validate color stop list
- * @param list
- * @param type
- * @param [opt]
- * @returns result
- */
-export const validateColorStopList = (
-  list: string[],
-  type: string,
-  opt: Options = {}
-): boolean => {
-  if (Array.isArray(list) && list.length > 1) {
-    const dimension = /^(?:repeating-)?conic-gradient$/.test(type)
-      ? DIM_ANGLE_PCT
-      : DIM_LEN_PCT;
-    const regColorHint = new RegExp(`^(?:${dimension})$`);
-    const regDimension = new RegExp(`(?:\\s+(?:${dimension})){1,2}$`);
-    const arr = [];
-    for (const item of list) {
-      if (isString(item)) {
-        if (regColorHint.test(item)) {
-          arr.push('hint');
-        } else {
-          const color = item.replace(regDimension, '');
-          if (isColor(color, opt)) {
-            arr.push('color');
-          } else {
-            return false;
-          }
-        }
-      }
-    }
-    const value = arr.join(',');
-    return /^color(?:,(?:hint,)?color)+$/.test(value);
-  }
-  return false;
-};
-
-/**
- * parse CSS gradient
- * @param value - gradient value
- * @param [opt] - options
- * @returns parsed result
- */
-export const parseGradient = (
-  value: string,
-  opt: Options = {}
-): Gradient | null => {
-  if (isString(value)) {
-    value = value.trim();
-    const cacheKey: string = createCacheKey(
-      {
-        namespace: NAMESPACE,
-        name: 'parseGradient',
-        value
-      },
-      opt
-    );
-    const cachedResult = getCache(cacheKey);
-    if (cachedResult instanceof CacheItem) {
-      if (cachedResult.isNull) {
-        return null;
-      }
-      return cachedResult.item as Gradient;
-    }
-    const type = getGradientType(value);
-    const gradValue = value.replace(REG_GRAD, '').replace(/\)$/, '');
-    if (type && gradValue) {
-      const [lineOrColorStop = '', ...colorStops] = splitValue(gradValue, {
-        delimiter: ','
-      });
-      const dimension = /^(?:repeating-)?conic-gradient$/.test(type)
-        ? DIM_ANGLE_PCT
-        : DIM_LEN_PCT;
-      const regDimension = new RegExp(`(?:\\s+(?:${dimension})){1,2}$`);
-      let isColorStop = false;
-      if (regDimension.test(lineOrColorStop)) {
-        const colorStop = lineOrColorStop.replace(regDimension, '');
-        if (isColor(colorStop, opt)) {
-          isColorStop = true;
-        }
-      } else if (isColor(lineOrColorStop, opt)) {
-        isColorStop = true;
-      }
-      if (isColorStop) {
-        colorStops.unshift(lineOrColorStop);
-        const valid = validateColorStopList(colorStops, type, opt);
-        if (valid) {
-          const res: Gradient = {
-            value,
-            type,
-            colorStopList: colorStops as ColorStopList
-          };
-          setCache(cacheKey, res);
-          return res;
-        }
-      } else if (colorStops.length > 1) {
-        const gradientLine = lineOrColorStop;
-        const valid =
-          validateGradientLine(gradientLine, type) &&
-          validateColorStopList(colorStops, type, opt);
-        if (valid) {
-          const res: Gradient = {
-            value,
-            type,
-            gradientLine,
-            colorStopList: colorStops as ColorStopList
-          };
-          setCache(cacheKey, res);
-          return res;
-        }
-      }
-    }
-    setCache(cacheKey, null);
-    return null;
-  }
-  return null;
-};
-
-/**
- * is CSS gradient
- * @param value - CSS value
- * @param [opt] - options
- * @returns result
- */
-export const isGradient = (value: string, opt: Options = {}): boolean => {
-  const gradient = parseGradient(value, opt);
-  return gradient !== null;
-};
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/css-var.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/css-var.ts
@@ -1,250 +0,0 @@
-/**
- * css-var
- */
-
-import { CSSToken, TokenType, tokenize } from '@csstools/css-tokenizer';
-import {
-  CacheItem,
-  NullObject,
-  createCacheKey,
-  getCache,
-  setCache
-} from './cache';
-import { isString } from './common';
-import { cssCalc } from './css-calc';
-import { isColor } from './util';
-import { Options } from './typedef';
-
-/* constants */
-import { FN_VAR, SYN_FN_CALC, SYN_FN_VAR, VAL_SPEC } from './constant';
-const {
-  CloseParen: PAREN_CLOSE,
-  Comment: COMMENT,
-  EOF,
-  Ident: IDENT,
-  Whitespace: W_SPACE
-} = TokenType;
-const NAMESPACE = 'css-var';
-
-/* regexp */
-const REG_FN_CALC = new RegExp(SYN_FN_CALC);
-const REG_FN_VAR = new RegExp(SYN_FN_VAR);
-
-/**
- * resolve custom property
- * @param tokens - CSS tokens
- * @param [opt] - options
- * @returns result - [tokens, resolvedValue]
- */
-export function resolveCustomProperty(
-  tokens: CSSToken[],
-  opt: Options = {}
-): [CSSToken[], string] {
-  if (!Array.isArray(tokens)) {
-    throw new TypeError(`${tokens} is not an array.`);
-  }
-  const { customProperty = {} } = opt;
-  const items: string[] = [];
-  while (tokens.length) {
-    const token = tokens.shift();
-    if (!Array.isArray(token)) {
-      throw new TypeError(`${token} is not an array.`);
-    }
-    const [type, value] = token as [TokenType, string];
-    // end of var()
-    if (type === PAREN_CLOSE) {
-      break;
-    }
-    // nested var()
-    if (value === FN_VAR) {
-      const [restTokens, item] = resolveCustomProperty(tokens, opt);
-      tokens = restTokens;
-      if (item) {
-        items.push(item);
-      }
-    } else if (type === IDENT) {
-      if (value.startsWith('--')) {
-        let item;
-        if (Object.hasOwnProperty.call(customProperty, value)) {
-          item = customProperty[value] as string;
-        } else if (typeof customProperty.callback === 'function') {
-          item = customProperty.callback(value);
-        }
-        if (item) {
-          items.push(item);
-        }
-      } else if (value) {
-        items.push(value);
-      }
-    }
-  }
-  let resolveAsColor = false;
-  if (items.length > 1) {
-    const lastValue = items[items.length - 1];
-    resolveAsColor = isColor(lastValue);
-  }
-  let resolvedValue = '';
-  for (let item of items) {
-    item = item.trim();
-    if (REG_FN_VAR.test(item)) {
-      // recurse resolveVar()
-      const resolvedItem = resolveVar(item, opt);
-      if (isString(resolvedItem)) {
-        if (resolveAsColor) {
-          if (isColor(resolvedItem)) {
-            resolvedValue = resolvedItem;
-          }
-        } else {
-          resolvedValue = resolvedItem;
-        }
-      }
-    } else if (REG_FN_CALC.test(item)) {
-      item = cssCalc(item, opt);
-      if (resolveAsColor) {
-        if (isColor(item)) {
-          resolvedValue = item;
-        }
-      } else {
-        resolvedValue = item;
-      }
-    } else if (
-      item &&
-      !/^(?:inherit|initial|revert(?:-layer)?|unset)$/.test(item)
-    ) {
-      if (resolveAsColor) {
-        if (isColor(item)) {
-          resolvedValue = item;
-        }
-      } else {
-        resolvedValue = item;
-      }
-    }
-    if (resolvedValue) {
-      break;
-    }
-  }
-  return [tokens, resolvedValue];
-}
-
-/**
- * parse tokens
- * @param tokens - CSS tokens
- * @param [opt] - options
- * @returns parsed tokens
- */
-export function parseTokens(
-  tokens: CSSToken[],
-  opt: Options = {}
-): string[] | NullObject {
-  const res: string[] = [];
-  while (tokens.length) {
-    const token = tokens.shift();
-    const [type = '', value = ''] = token as [TokenType, string];
-    if (value === FN_VAR) {
-      const [restTokens, resolvedValue] = resolveCustomProperty(tokens, opt);
-      if (!resolvedValue) {
-        return new NullObject();
-      }
-      tokens = restTokens;
-      res.push(resolvedValue);
-    } else {
-      switch (type) {
-        case PAREN_CLOSE: {
-          if (res.length) {
-            const lastValue = res[res.length - 1];
-            if (lastValue === ' ') {
-              res.splice(-1, 1, value);
-            } else {
-              res.push(value);
-            }
-          } else {
-            res.push(value);
-          }
-          break;
-        }
-        case W_SPACE: {
-          if (res.length) {
-            const lastValue = res[res.length - 1];
-            if (
-              isString(lastValue) &&
-              !lastValue.endsWith('(') &&
-              lastValue !== ' '
-            ) {
-              res.push(value);
-            }
-          }
-          break;
-        }
-        default: {
-          if (type !== COMMENT && type !== EOF) {
-            res.push(value);
-          }
-        }
-      }
-    }
-  }
-  return res;
-}
-
-/**
- * resolve CSS var()
- * @param value - CSS value including var()
- * @param [opt] - options
- * @returns resolved value
- */
-export function resolveVar(
-  value: string,
-  opt: Options = {}
-): string | NullObject {
-  const { format = '' } = opt;
-  if (isString(value)) {
-    if (!REG_FN_VAR.test(value) || format === VAL_SPEC) {
-      return value;
-    }
-    value = value.trim();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'resolveVar',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    if (cachedResult.isNull) {
-      return cachedResult as NullObject;
-    }
-    return cachedResult.item as string;
-  }
-  const tokens = tokenize({ css: value });
-  const values = parseTokens(tokens, opt);
-  if (Array.isArray(values)) {
-    let color = values.join('');
-    if (REG_FN_CALC.test(color)) {
-      color = cssCalc(color, opt);
-    }
-    setCache(cacheKey, color);
-    return color;
-  } else {
-    setCache(cacheKey, null);
-    return new NullObject();
-  }
-}
-
-/**
- * CSS var()
- * @param value - CSS value including var()
- * @param [opt] - options
- * @returns resolved value
- */
-export const cssVar = (value: string, opt: Options = {}): string => {
-  const resolvedValue = resolveVar(value, opt);
-  if (isString(resolvedValue)) {
-    return resolvedValue;
-  }
-  return '';
-};
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/relative-color.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/relative-color.ts
@@ -1,580 +0,0 @@
-/**
- * relative-color
- */
-
-import { SyntaxFlag, color as colorParser } from '@csstools/css-color-parser';
-import {
-  ComponentValue,
-  parseComponentValue
-} from '@csstools/css-parser-algorithms';
-import { CSSToken, TokenType, tokenize } from '@csstools/css-tokenizer';
-import {
-  CacheItem,
-  NullObject,
-  createCacheKey,
-  getCache,
-  setCache
-} from './cache';
-import { NAMED_COLORS, convertColorToRgb } from './color';
-import { isString, isStringOrNumber } from './common';
-import { resolveDimension, serializeCalc } from './css-calc';
-import { resolveColor } from './resolve';
-import { roundToPrecision } from './util';
-import {
-  ColorChannels,
-  MatchedRegExp,
-  Options,
-  StringColorChannels
-} from './typedef';
-
-/* constants */
-import {
-  CS_LAB,
-  CS_LCH,
-  FN_REL,
-  FN_REL_CAPT,
-  FN_VAR,
-  NONE,
-  SYN_COLOR_TYPE,
-  SYN_FN_MATH_START,
-  SYN_FN_VAR,
-  SYN_MIX,
-  VAL_SPEC
-} from './constant';
-const {
-  CloseParen: PAREN_CLOSE,
-  Comment: COMMENT,
-  Dimension: DIM,
-  EOF,
-  Function: FUNC,
-  Ident: IDENT,
-  Number: NUM,
-  OpenParen: PAREN_OPEN,
-  Percentage: PCT,
-  Whitespace: W_SPACE
-} = TokenType;
-const { HasNoneKeywords: KEY_NONE } = SyntaxFlag;
-const NAMESPACE = 'relative-color';
-
-/* numeric constants */
-const OCT = 8;
-const DEC = 10;
-const HEX = 16;
-const MAX_PCT = 100;
-const MAX_RGB = 255;
-
-/* type definitions */
-/**
- * @type NumberOrStringColorChannels - color channel
- */
-type NumberOrStringColorChannels = ColorChannels & StringColorChannels;
-
-/* regexp */
-const REG_COLOR_CAPT = new RegExp(
-  `^${FN_REL}(${SYN_COLOR_TYPE}|${SYN_MIX})\\s+`
-);
-const REG_CS_HSL = /(?:hsla?|hwb)$/;
-const REG_CS_CIE = new RegExp(`^(?:${CS_LAB}|${CS_LCH})$`);
-const REG_FN_MATH_START = new RegExp(SYN_FN_MATH_START);
-const REG_FN_REL = new RegExp(FN_REL);
-const REG_FN_REL_CAPT = new RegExp(`^${FN_REL_CAPT}`);
-const REG_FN_REL_START = new RegExp(`^${FN_REL}`);
-const REG_FN_VAR = new RegExp(SYN_FN_VAR);
-
-/**
- * resolve relative color channels
- * @param tokens - CSS tokens
- * @param [opt] - options
- * @returns resolved color channels
- */
-export function resolveColorChannels(
-  tokens: CSSToken[],
-  opt: Options = {}
-): NumberOrStringColorChannels | NullObject {
-  if (!Array.isArray(tokens)) {
-    throw new TypeError(`${tokens} is not an array.`);
-  }
-  const { colorSpace = '', format = '' } = opt;
-  const colorChannels = new Map([
-    ['color', ['r', 'g', 'b', 'alpha']],
-    ['hsl', ['h', 's', 'l', 'alpha']],
-    ['hsla', ['h', 's', 'l', 'alpha']],
-    ['hwb', ['h', 'w', 'b', 'alpha']],
-    ['lab', ['l', 'a', 'b', 'alpha']],
-    ['lch', ['l', 'c', 'h', 'alpha']],
-    ['oklab', ['l', 'a', 'b', 'alpha']],
-    ['oklch', ['l', 'c', 'h', 'alpha']],
-    ['rgb', ['r', 'g', 'b', 'alpha']],
-    ['rgba', ['r', 'g', 'b', 'alpha']]
-  ]);
-  const colorChannel = colorChannels.get(colorSpace);
-  // invalid color channel
-  if (!colorChannel) {
-    return new NullObject();
-  }
-  const mathFunc = new Set();
-  const channels: [
-    (number | string)[],
-    (number | string)[],
-    (number | string)[],
-    (number | string)[]
-  ] = [[], [], [], []];
-  let i = 0;
-  let nest = 0;
-  let func = false;
-  while (tokens.length) {
-    const token = tokens.shift();
-    if (!Array.isArray(token)) {
-      throw new TypeError(`${token} is not an array.`);
-    }
-    const [type, value, , , detail] = token as [
-      TokenType,
-      string,
-      number,
-      number,
-      { value: string | number } | undefined
-    ];
-    const channel = channels[i];
-    if (Array.isArray(channel)) {
-      switch (type) {
-        case DIM: {
-          const resolvedValue = resolveDimension(token, opt);
-          if (isString(resolvedValue)) {
-            channel.push(resolvedValue);
-          } else {
-            channel.push(value);
-          }
-          break;
-        }
-        case FUNC: {
-          channel.push(value);
-          func = true;
-          nest++;
-          if (REG_FN_MATH_START.test(value)) {
-            mathFunc.add(nest);
-          }
-          break;
-        }
-        case IDENT: {
-          // invalid channel key
-          if (!colorChannel.includes(value)) {
-            return new NullObject();
-          }
-          channel.push(value);
-          if (!func) {
-            i++;
-          }
-          break;
-        }
-        case NUM: {
-          channel.push(Number(detail?.value));
-          if (!func) {
-            i++;
-          }
-          break;
-        }
-        case PAREN_OPEN: {
-          channel.push(value);
-          nest++;
-          break;
-        }
-        case PAREN_CLOSE: {
-          if (func) {
-            const lastValue = channel[channel.length - 1];
-            if (lastValue === ' ') {
-              channel.splice(-1, 1, value);
-            } else {
-              channel.push(value);
-            }
-            if (mathFunc.has(nest)) {
-              mathFunc.delete(nest);
-            }
-            nest--;
-            if (nest === 0) {
-              func = false;
-              i++;
-            }
-          }
-          break;
-        }
-        case PCT: {
-          channel.push(Number(detail?.value) / MAX_PCT);
-          if (!func) {
-            i++;
-          }
-          break;
-        }
-        case W_SPACE: {
-          if (channel.length && func) {
-            const lastValue = channel[channel.length - 1];
-            if (typeof lastValue === 'number') {
-              channel.push(value);
-            } else if (
-              isString(lastValue) &&
-              !lastValue.endsWith('(') &&
-              lastValue !== ' '
-            ) {
-              channel.push(value);
-            }
-          }
-          break;
-        }
-        default: {
-          if (type !== COMMENT && type !== EOF && func) {
-            channel.push(value);
-          }
-        }
-      }
-    }
-  }
-  const channelValues = [];
-  for (const channel of channels) {
-    if (channel.length === 1) {
-      const [resolvedValue] = channel;
-      if (isStringOrNumber(resolvedValue)) {
-        channelValues.push(resolvedValue);
-      }
-    } else if (channel.length) {
-      const resolvedValue = serializeCalc(channel.join(''), {
-        format
-      });
-      channelValues.push(resolvedValue);
-    }
-  }
-  return channelValues as NumberOrStringColorChannels;
-}
-
-/**
- * extract origin color
- * @param value - CSS color value
- * @param [opt] - options
- * @returns origin color value
- */
-export function extractOriginColor(
-  value: string,
-  opt: Options = {}
-): string | NullObject {
-  const { currentColor = '', format = '' } = opt;
-  if (isString(value)) {
-    value = value.toLowerCase().trim();
-    if (!value) {
-      return new NullObject();
-    }
-    if (!REG_FN_REL_START.test(value)) {
-      return value;
-    }
-  } else {
-    return new NullObject();
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'extractOriginColor',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    if (cachedResult.isNull) {
-      return cachedResult as NullObject;
-    }
-    return cachedResult.item as string;
-  }
-  if (/currentcolor/.test(value)) {
-    if (currentColor) {
-      value = value.replace(/currentcolor/g, currentColor);
-    } else {
-      setCache(cacheKey, null);
-      return new NullObject();
-    }
-  }
-  let colorSpace = '';
-  if (REG_FN_REL_CAPT.test(value)) {
-    [, colorSpace] = value.match(REG_FN_REL_CAPT) as MatchedRegExp;
-  }
-  opt.colorSpace = colorSpace;
-  if (REG_COLOR_CAPT.test(value)) {
-    const [, originColor] = value.match(REG_COLOR_CAPT) as MatchedRegExp;
-    const [, restValue] = value.split(originColor) as MatchedRegExp;
-    if (/^[a-z]+$/.test(originColor)) {
-      if (
-        !/^transparent$/.test(originColor) &&
-        !Object.prototype.hasOwnProperty.call(NAMED_COLORS, originColor)
-      ) {
-        setCache(cacheKey, null);
-        return new NullObject();
-      }
-    } else if (format === VAL_SPEC) {
-      const resolvedOriginColor = resolveColor(originColor, opt);
-      if (isString(resolvedOriginColor)) {
-        value = value.replace(originColor, resolvedOriginColor);
-      }
-    }
-    if (format === VAL_SPEC) {
-      const tokens = tokenize({ css: restValue });
-      const channelValues = resolveColorChannels(tokens, opt);
-      if (channelValues instanceof NullObject) {
-        setCache(cacheKey, null);
-        return channelValues;
-      }
-      const [v1, v2, v3, v4] = channelValues;
-      let channelValue = '';
-      if (isStringOrNumber(v4)) {
-        channelValue = ` ${v1} ${v2} ${v3} / ${v4})`;
-      } else {
-        channelValue = ` ${channelValues.join(' ')})`;
-      }
-      if (restValue !== channelValue) {
-        value = value.replace(restValue, channelValue);
-      }
-    }
-    // nested relative color
-  } else {
-    const [, restValue] = value.split(REG_FN_REL_START) as MatchedRegExp;
-    const tokens = tokenize({ css: restValue });
-    const originColor: string[] = [];
-    let nest = 0;
-    while (tokens.length) {
-      const [type, tokenValue] = tokens.shift() as [TokenType, string];
-      switch (type) {
-        case FUNC:
-        case PAREN_OPEN: {
-          originColor.push(tokenValue);
-          nest++;
-          break;
-        }
-        case PAREN_CLOSE: {
-          const lastValue = originColor[originColor.length - 1];
-          if (lastValue === ' ') {
-            originColor.splice(-1, 1, tokenValue);
-          } else if (isString(lastValue)) {
-            originColor.push(tokenValue);
-          }
-          nest--;
-          break;
-        }
-        case W_SPACE: {
-          const lastValue = originColor[originColor.length - 1];
-          if (
-            isString(lastValue) &&
-            !lastValue.endsWith('(') &&
-            lastValue !== ' '
-          ) {
-            originColor.push(tokenValue);
-          }
-          break;
-        }
-        default: {
-          if (type !== COMMENT && type !== EOF) {
-            originColor.push(tokenValue);
-          }
-        }
-      }
-      if (nest === 0) {
-        break;
-      }
-    }
-    const resolvedOriginColor = resolveRelativeColor(
-      originColor.join('').trim(),
-      opt
-    );
-    if (resolvedOriginColor instanceof NullObject) {
-      setCache(cacheKey, null);
-      return resolvedOriginColor;
-    }
-    const channelValues = resolveColorChannels(tokens, opt);
-    if (channelValues instanceof NullObject) {
-      setCache(cacheKey, null);
-      return channelValues;
-    }
-    const [v1, v2, v3, v4] = channelValues;
-    let channelValue = '';
-    if (isStringOrNumber(v4)) {
-      channelValue = ` ${v1} ${v2} ${v3} / ${v4})`;
-    } else {
-      channelValue = ` ${channelValues.join(' ')})`;
-    }
-    value = value.replace(restValue, `${resolvedOriginColor}${channelValue}`);
-  }
-  setCache(cacheKey, value);
-  return value;
-}
-
-/**
- * resolve relative color
- * @param value - CSS relative color value
- * @param [opt] - options
- * @returns resolved value
- */
-export function resolveRelativeColor(
-  value: string,
-  opt: Options = {}
-): string | NullObject {
-  const { format = '' } = opt;
-  if (isString(value)) {
-    if (REG_FN_VAR.test(value)) {
-      if (format === VAL_SPEC) {
-        return value;
-        // var() must be resolved before resolveRelativeColor()
-      } else {
-        throw new SyntaxError(`Unexpected token ${FN_VAR} found.`);
-      }
-    } else if (!REG_FN_REL.test(value)) {
-      return value;
-    }
-    value = value.toLowerCase().trim();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'resolveRelativeColor',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    if (cachedResult.isNull) {
-      return cachedResult as NullObject;
-    }
-    return cachedResult.item as string;
-  }
-  const originColor = extractOriginColor(value, opt);
-  if (originColor instanceof NullObject) {
-    setCache(cacheKey, null);
-    return originColor;
-  }
-  value = originColor;
-  if (format === VAL_SPEC) {
-    if (value.startsWith('rgba(')) {
-      value = value.replace(/^rgba\(/, 'rgb(');
-    } else if (value.startsWith('hsla(')) {
-      value = value.replace(/^hsla\(/, 'hsl(');
-    }
-    return value;
-  }
-  const tokens = tokenize({ css: value });
-  const components = parseComponentValue(tokens) as ComponentValue;
-  const parsedComponents = colorParser(components);
-  if (!parsedComponents) {
-    setCache(cacheKey, null);
-    return new NullObject();
-  }
-  const {
-    alpha: alphaComponent,
-    channels: channelsComponent,
-    colorNotation,
-    syntaxFlags
-  } = parsedComponents;
-  let alpha: number | string;
-  if (Number.isNaN(Number(alphaComponent))) {
-    if (syntaxFlags instanceof Set && syntaxFlags.has(KEY_NONE)) {
-      alpha = NONE;
-    } else {
-      alpha = 0;
-    }
-  } else {
-    alpha = roundToPrecision(Number(alphaComponent), OCT);
-  }
-  let v1: number | string;
-  let v2: number | string;
-  let v3: number | string;
-  [v1, v2, v3] = channelsComponent;
-  let resolvedValue;
-  if (REG_CS_CIE.test(colorNotation)) {
-    const hasNone = syntaxFlags instanceof Set && syntaxFlags.has(KEY_NONE);
-    if (Number.isNaN(v1)) {
-      if (hasNone) {
-        v1 = NONE;
-      } else {
-        v1 = 0;
-      }
-    } else {
-      v1 = roundToPrecision(v1, HEX);
-    }
-    if (Number.isNaN(v2)) {
-      if (hasNone) {
-        v2 = NONE;
-      } else {
-        v2 = 0;
-      }
-    } else {
-      v2 = roundToPrecision(v2, HEX);
-    }
-    if (Number.isNaN(v3)) {
-      if (hasNone) {
-        v3 = NONE;
-      } else {
-        v3 = 0;
-      }
-    } else {
-      v3 = roundToPrecision(v3, HEX);
-    }
-    if (alpha === 1) {
-      resolvedValue = `${colorNotation}(${v1} ${v2} ${v3})`;
-    } else {
-      resolvedValue = `${colorNotation}(${v1} ${v2} ${v3} / ${alpha})`;
-    }
-  } else if (REG_CS_HSL.test(colorNotation)) {
-    if (Number.isNaN(v1)) {
-      v1 = 0;
-    }
-    if (Number.isNaN(v2)) {
-      v2 = 0;
-    }
-    if (Number.isNaN(v3)) {
-      v3 = 0;
-    }
-    let [r, g, b] = convertColorToRgb(
-      `${colorNotation}(${v1} ${v2} ${v3} / ${alpha})`
-    ) as ColorChannels;
-    r = roundToPrecision(r / MAX_RGB, DEC);
-    g = roundToPrecision(g / MAX_RGB, DEC);
-    b = roundToPrecision(b / MAX_RGB, DEC);
-    if (alpha === 1) {
-      resolvedValue = `color(srgb ${r} ${g} ${b})`;
-    } else {
-      resolvedValue = `color(srgb ${r} ${g} ${b} / ${alpha})`;
-    }
-  } else {
-    const cs = colorNotation === 'rgb' ? 'srgb' : colorNotation;
-    const hasNone = syntaxFlags instanceof Set && syntaxFlags.has(KEY_NONE);
-    if (Number.isNaN(v1)) {
-      if (hasNone) {
-        v1 = NONE;
-      } else {
-        v1 = 0;
-      }
-    } else {
-      v1 = roundToPrecision(v1, DEC);
-    }
-    if (Number.isNaN(v2)) {
-      if (hasNone) {
-        v2 = NONE;
-      } else {
-        v2 = 0;
-      }
-    } else {
-      v2 = roundToPrecision(v2, DEC);
-    }
-    if (Number.isNaN(v3)) {
-      if (hasNone) {
-        v3 = NONE;
-      } else {
-        v3 = 0;
-      }
-    } else {
-      v3 = roundToPrecision(v3, DEC);
-    }
-    if (alpha === 1) {
-      resolvedValue = `color(${cs} ${v1} ${v2} ${v3})`;
-    } else {
-      resolvedValue = `color(${cs} ${v1} ${v2} ${v3} / ${alpha})`;
-    }
-  }
-  setCache(cacheKey, resolvedValue);
-  return resolvedValue;
-}
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/resolve.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/resolve.ts
@@ -1,379 +0,0 @@
-/**
- * resolve
- */
-
-import {
-  CacheItem,
-  NullObject,
-  createCacheKey,
-  getCache,
-  setCache
-} from './cache';
-import {
-  convertRgbToHex,
-  resolveColorFunc,
-  resolveColorMix,
-  resolveColorValue
-} from './color';
-import { isString } from './common';
-import { cssCalc } from './css-calc';
-import { resolveVar } from './css-var';
-import { resolveRelativeColor } from './relative-color';
-import {
-  ComputedColorChannels,
-  Options,
-  SpecifiedColorChannels
-} from './typedef';
-
-/* constants */
-import {
-  FN_COLOR,
-  FN_MIX,
-  SYN_FN_CALC,
-  SYN_FN_REL,
-  SYN_FN_VAR,
-  VAL_COMP,
-  VAL_SPEC
-} from './constant';
-const NAMESPACE = 'resolve';
-const RGB_TRANSPARENT = 'rgba(0, 0, 0, 0)';
-
-/* regexp */
-const REG_FN_CALC = new RegExp(SYN_FN_CALC);
-const REG_FN_REL = new RegExp(SYN_FN_REL);
-const REG_FN_VAR = new RegExp(SYN_FN_VAR);
-
-/**
- * resolve color
- * @param value - CSS color value
- * @param [opt] - options
- * @returns resolved color
- */
-export const resolveColor = (
-  value: string,
-  opt: Options = {}
-): string | NullObject => {
-  if (isString(value)) {
-    value = value.trim();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const { currentColor = '', format = VAL_COMP, nullable = false } = opt;
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'resolve',
-      value
-    },
-    opt
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    if (cachedResult.isNull) {
-      return cachedResult as NullObject;
-    }
-    return cachedResult.item as string;
-  }
-  if (REG_FN_VAR.test(value)) {
-    if (format === VAL_SPEC) {
-      setCache(cacheKey, value);
-      return value;
-    }
-    const resolvedValue = resolveVar(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      switch (format) {
-        case 'hex':
-        case 'hexAlpha': {
-          setCache(cacheKey, resolvedValue);
-          return resolvedValue;
-        }
-        default: {
-          if (nullable) {
-            setCache(cacheKey, resolvedValue);
-            return resolvedValue;
-          }
-          const res = RGB_TRANSPARENT;
-          setCache(cacheKey, res);
-          return res;
-        }
-      }
-    } else {
-      value = resolvedValue;
-    }
-  }
-  if (opt.format !== format) {
-    opt.format = format;
-  }
-  value = value.toLowerCase();
-  if (REG_FN_REL.test(value)) {
-    const resolvedValue = resolveRelativeColor(value, opt);
-    if (format === VAL_COMP) {
-      let res;
-      if (resolvedValue instanceof NullObject) {
-        if (nullable) {
-          res = resolvedValue;
-        } else {
-          res = RGB_TRANSPARENT;
-        }
-      } else {
-        res = resolvedValue;
-      }
-      setCache(cacheKey, res);
-      return res;
-    }
-    if (format === VAL_SPEC) {
-      let res = '';
-      if (resolvedValue instanceof NullObject) {
-        res = '';
-      } else {
-        res = resolvedValue;
-      }
-      setCache(cacheKey, res);
-      return res;
-    }
-    if (resolvedValue instanceof NullObject) {
-      value = '';
-    } else {
-      value = resolvedValue;
-    }
-  }
-  if (REG_FN_CALC.test(value)) {
-    value = cssCalc(value, opt);
-  }
-  let cs = '';
-  let r = NaN;
-  let g = NaN;
-  let b = NaN;
-  let alpha = NaN;
-  if (value === 'transparent') {
-    switch (format) {
-      case VAL_SPEC: {
-        setCache(cacheKey, value);
-        return value;
-      }
-      case 'hex': {
-        setCache(cacheKey, null);
-        return new NullObject();
-      }
-      case 'hexAlpha': {
-        const res = '#00000000';
-        setCache(cacheKey, res);
-        return res;
-      }
-      case VAL_COMP:
-      default: {
-        const res = RGB_TRANSPARENT;
-        setCache(cacheKey, res);
-        return res;
-      }
-    }
-  } else if (value === 'currentcolor') {
-    if (format === VAL_SPEC) {
-      setCache(cacheKey, value);
-      return value;
-    }
-    if (currentColor) {
-      let resolvedValue;
-      if (currentColor.startsWith(FN_MIX)) {
-        resolvedValue = resolveColorMix(currentColor, opt);
-      } else if (currentColor.startsWith(FN_COLOR)) {
-        resolvedValue = resolveColorFunc(currentColor, opt);
-      } else {
-        resolvedValue = resolveColorValue(currentColor, opt);
-      }
-      if (resolvedValue instanceof NullObject) {
-        setCache(cacheKey, resolvedValue);
-        return resolvedValue;
-      }
-      [cs, r, g, b, alpha] = resolvedValue as ComputedColorChannels;
-    } else if (format === VAL_COMP) {
-      const res = RGB_TRANSPARENT;
-      setCache(cacheKey, res);
-      return res;
-    }
-  } else if (format === VAL_SPEC) {
-    if (value.startsWith(FN_MIX)) {
-      const res = resolveColorMix(value, opt) as string;
-      setCache(cacheKey, res);
-      return res;
-    } else if (value.startsWith(FN_COLOR)) {
-      const [scs, rr, gg, bb, aa] = resolveColorFunc(
-        value,
-        opt
-      ) as SpecifiedColorChannels;
-      let res = '';
-      if (aa === 1) {
-        res = `color(${scs} ${rr} ${gg} ${bb})`;
-      } else {
-        res = `color(${scs} ${rr} ${gg} ${bb} / ${aa})`;
-      }
-      setCache(cacheKey, res);
-      return res;
-    } else {
-      const rgb = resolveColorValue(value, opt);
-      if (isString(rgb)) {
-        setCache(cacheKey, rgb);
-        return rgb;
-      }
-      const [scs, rr, gg, bb, aa] = rgb as SpecifiedColorChannels;
-      let res = '';
-      if (scs === 'rgb') {
-        if (aa === 1) {
-          res = `${scs}(${rr}, ${gg}, ${bb})`;
-        } else {
-          res = `${scs}a(${rr}, ${gg}, ${bb}, ${aa})`;
-        }
-      } else if (aa === 1) {
-        res = `${scs}(${rr} ${gg} ${bb})`;
-      } else {
-        res = `${scs}(${rr} ${gg} ${bb} / ${aa})`;
-      }
-      setCache(cacheKey, res);
-      return res;
-    }
-  } else if (value.startsWith(FN_MIX)) {
-    if (/currentcolor/.test(value)) {
-      if (currentColor) {
-        value = value.replace(/currentcolor/g, currentColor);
-      }
-    }
-    if (/transparent/.test(value)) {
-      value = value.replace(/transparent/g, RGB_TRANSPARENT);
-    }
-    const resolvedValue = resolveColorMix(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      setCache(cacheKey, resolvedValue);
-      return resolvedValue;
-    }
-    [cs, r, g, b, alpha] = resolvedValue as ComputedColorChannels;
-  } else if (value.startsWith(FN_COLOR)) {
-    const resolvedValue = resolveColorFunc(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      setCache(cacheKey, resolvedValue);
-      return resolvedValue;
-    }
-    [cs, r, g, b, alpha] = resolvedValue as ComputedColorChannels;
-  } else if (value) {
-    const resolvedValue = resolveColorValue(value, opt);
-    if (resolvedValue instanceof NullObject) {
-      setCache(cacheKey, resolvedValue);
-      return resolvedValue;
-    }
-    [cs, r, g, b, alpha] = resolvedValue as ComputedColorChannels;
-  }
-  let res = '';
-  switch (format) {
-    case 'hex': {
-      if (
-        Number.isNaN(r) ||
-        Number.isNaN(g) ||
-        Number.isNaN(b) ||
-        Number.isNaN(alpha) ||
-        alpha === 0
-      ) {
-        setCache(cacheKey, null);
-        return new NullObject();
-      }
-      res = convertRgbToHex([r, g, b, 1]);
-      break;
-    }
-    case 'hexAlpha': {
-      if (
-        Number.isNaN(r) ||
-        Number.isNaN(g) ||
-        Number.isNaN(b) ||
-        Number.isNaN(alpha)
-      ) {
-        setCache(cacheKey, null);
-        return new NullObject();
-      }
-      res = convertRgbToHex([r, g, b, alpha]);
-      break;
-    }
-    case VAL_COMP:
-    default: {
-      switch (cs) {
-        case 'rgb': {
-          if (alpha === 1) {
-            res = `${cs}(${r}, ${g}, ${b})`;
-          } else {
-            res = `${cs}a(${r}, ${g}, ${b}, ${alpha})`;
-          }
-          break;
-        }
-        case 'lab':
-        case 'lch':
-        case 'oklab':
-        case 'oklch': {
-          if (alpha === 1) {
-            res = `${cs}(${r} ${g} ${b})`;
-          } else {
-            res = `${cs}(${r} ${g} ${b} / ${alpha})`;
-          }
-          break;
-        }
-        // color()
-        default: {
-          if (alpha === 1) {
-            res = `color(${cs} ${r} ${g} ${b})`;
-          } else {
-            res = `color(${cs} ${r} ${g} ${b} / ${alpha})`;
-          }
-        }
-      }
-    }
-  }
-  setCache(cacheKey, res);
-  return res;
-};
-
-/**
- * resolve CSS color
- * @param value
- *   - CSS color value
- *   - system colors are not supported
- * @param [opt] - options
- * @param [opt.currentColor]
- *   - color to use for `currentcolor` keyword
- *   - if omitted, it will be treated as a missing color
- *     i.e. `rgb(none none none / none)`
- * @param [opt.customProperty]
- *   - custom properties
- *   - pair of `--` prefixed property name and value,
- *     e.g. `customProperty: { '--some-color': '#0000ff' }`
- *   - and/or `callback` function to get the value of the custom property,
- *     e.g. `customProperty: { callback: someDeclaration.getPropertyValue }`
- * @param [opt.dimension]
- *   - dimension, convert relative length to pixels
- *   - pair of unit and it's value as a number in pixels,
- *     e.g. `dimension: { em: 12, rem: 16, vw: 10.26 }`
- *   - and/or `callback` function to get the value as a number in pixels,
- *     e.g. `dimension: { callback: convertUnitToPixel }`
- * @param [opt.format]
- *   - output format, one of below
- *   - `computedValue` (default), [computed value][139] of the color
- *   - `specifiedValue`, [specified value][140] of the color
- *   - `hex`, hex color notation, i.e. `rrggbb`
- *   - `hexAlpha`, hex color notation with alpha channel, i.e. `#rrggbbaa`
- * @returns
- *   - one of rgba?(), #rrggbb(aa)?, color-name, '(empty-string)',
- *     color(color-space r g b / alpha), color(color-space x y z / alpha),
- *     lab(l a b / alpha), lch(l c h / alpha), oklab(l a b / alpha),
- *     oklch(l c h / alpha), null
- *   - in `computedValue`, values are numbers, however `rgb()` values are
- *     integers
- *   - in `specifiedValue`, returns `empty string` for unknown and/or invalid
- *     color
- *   - in `hex`, returns `null` for `transparent`, and also returns `null` if
- *     any of `r`, `g`, `b`, `alpha` is not a number
- *   - in `hexAlpha`, returns `#00000000` for `transparent`,
- *     however returns `null` if any of `r`, `g`, `b`, `alpha` is not a number
- */
-export const resolve = (value: string, opt: Options = {}): string | null => {
-  opt.nullable = false;
-  const resolvedValue = resolveColor(value, opt);
-  if (resolvedValue instanceof NullObject) {
-    return null;
-  }
-  return resolvedValue as string;
-};
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/typedef.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/typedef.ts
@@ -1,87 +0,0 @@
-/**
- * typedef
- */
-
-/* type definitions */
-/**
- * @typedef Options - options
- * @property [alpha] - enable alpha
- * @property [colorSpace] - color space
- * @property [currentColor] - color for currentcolor
- * @property [customPropeerty] - custom properties
- * @property [d50] - white point in d50
- * @property [dimension] - dimension
- * @property [format] - output format
- * @property [key] - key
- */
-export interface Options {
-  alpha?: boolean;
-  colorSpace?: string;
-  currentColor?: string;
-  customProperty?: Record<string, string | ((K: string) => string)>;
-  d50?: boolean;
-  delimiter?: string | string[];
-  dimension?: Record<string, number | ((K: string) => number)>;
-  format?: string;
-  nullable?: boolean;
-  preserveComment?: boolean;
-}
-
-/**
- * @type ColorChannels - color channels
- */
-export type ColorChannels = [x: number, y: number, z: number, alpha: number];
-
-/**
- * @type StringColorChannels - color channels
- */
-export type StringColorChannels = [
-  x: string,
-  y: string,
-  z: string,
-  alpha: string | undefined
-];
-
-/**
- * @type StringColorSpacedChannels - specified value
- */
-export type StringColorSpacedChannels = [
-  cs: string,
-  x: string,
-  y: string,
-  z: string,
-  alpha: string | undefined
-];
-
-/**
- * @type ComputedColorChannels - computed value
- */
-export type ComputedColorChannels = [
-  cs: string,
-  x: number,
-  y: number,
-  z: number,
-  alpha: number
-];
-
-/**
- * @type SpecifiedColorChannels - specified value
- */
-export type SpecifiedColorChannels = [
-  cs: string,
-  x: number | string,
-  y: number | string,
-  z: number | string,
-  alpha: number | string
-];
-
-/**
- * @type MatchedRegExp - matched regexp array
- */
-export type MatchedRegExp = [
-  match: string,
-  gr1: string,
-  gr2: string,
-  gr3: string,
-  gr4: string
-];
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/util.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/css-color/src/js/util.ts
@@ -1,336 +0,0 @@
-/**
- * util
- */
-
-import { TokenType, tokenize } from '@csstools/css-tokenizer';
-import { CacheItem, createCacheKey, getCache, setCache } from './cache';
-import { isString } from './common';
-import { resolveColor } from './resolve';
-import { Options } from './typedef';
-
-/* constants */
-import { NAMED_COLORS } from './color';
-import { SYN_COLOR_TYPE, SYN_MIX, VAL_SPEC } from './constant';
-const {
-  CloseParen: PAREN_CLOSE,
-  Comma: COMMA,
-  Comment: COMMENT,
-  Delim: DELIM,
-  EOF,
-  Function: FUNC,
-  Ident: IDENT,
-  OpenParen: PAREN_OPEN,
-  Whitespace: W_SPACE
-} = TokenType;
-const NAMESPACE = 'util';
-
-/* numeric constants */
-const DEC = 10;
-const HEX = 16;
-const DEG = 360;
-const DEG_HALF = 180;
-
-/* regexp */
-const REG_COLOR = new RegExp(`^(?:${SYN_COLOR_TYPE})$`);
-const REG_FN_COLOR =
-  /^(?:(?:ok)?l(?:ab|ch)|color(?:-mix)?|hsla?|hwb|rgba?|var)\(/;
-const REG_MIX = new RegExp(SYN_MIX);
-
-/**
- * split value
- * NOTE: comments are stripped, it can be preserved if, in the options param,
- * `delimiter` is either ',' or '/' and with `preserveComment` set to `true`
- * @param value - CSS value
- * @param [opt] - options
- * @returns array of values
- */
-export const splitValue = (value: string, opt: Options = {}): string[] => {
-  if (isString(value)) {
-    value = value.trim();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const { delimiter = ' ', preserveComment = false } = opt;
-  const cacheKey: string = createCacheKey(
-    {
-      namespace: NAMESPACE,
-      name: 'splitValue',
-      value
-    },
-    {
-      delimiter,
-      preserveComment
-    }
-  );
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as string[];
-  }
-  let regDelimiter;
-  if (delimiter === ',') {
-    regDelimiter = /^,$/;
-  } else if (delimiter === '/') {
-    regDelimiter = /^\/$/;
-  } else {
-    regDelimiter = /^\s+$/;
-  }
-  const tokens = tokenize({ css: value });
-  let nest = 0;
-  let str = '';
-  const res: string[] = [];
-  while (tokens.length) {
-    const [type, value] = tokens.shift() as [TokenType, string];
-    switch (type) {
-      case COMMA: {
-        if (regDelimiter.test(value)) {
-          if (nest === 0) {
-            res.push(str.trim());
-            str = '';
-          } else {
-            str += value;
-          }
-        } else {
-          str += value;
-        }
-        break;
-      }
-      case DELIM: {
-        if (regDelimiter.test(value)) {
-          if (nest === 0) {
-            res.push(str.trim());
-            str = '';
-          } else {
-            str += value;
-          }
-        } else {
-          str += value;
-        }
-        break;
-      }
-      case COMMENT: {
-        if (preserveComment && (delimiter === ',' || delimiter === '/')) {
-          str += value;
-        }
-        break;
-      }
-      case FUNC:
-      case PAREN_OPEN: {
-        str += value;
-        nest++;
-        break;
-      }
-      case PAREN_CLOSE: {
-        str += value;
-        nest--;
-        break;
-      }
-      case W_SPACE: {
-        if (regDelimiter.test(value)) {
-          if (nest === 0) {
-            if (str) {
-              res.push(str.trim());
-              str = '';
-            }
-          } else {
-            str += ' ';
-          }
-        } else if (!str.endsWith(' ')) {
-          str += ' ';
-        }
-        break;
-      }
-      default: {
-        if (type === EOF) {
-          res.push(str.trim());
-          str = '';
-        } else {
-          str += value;
-        }
-      }
-    }
-  }
-  setCache(cacheKey, res);
-  return res;
-};
-
-/**
- * extract dashed-ident tokens
- * @param value - CSS value
- * @returns array of dashed-ident tokens
- */
-export const extractDashedIdent = (value: string): string[] => {
-  if (isString(value)) {
-    value = value.trim();
-  } else {
-    throw new TypeError(`${value} is not a string.`);
-  }
-  const cacheKey: string = createCacheKey({
-    namespace: NAMESPACE,
-    name: 'extractDashedIdent',
-    value
-  });
-  const cachedResult = getCache(cacheKey);
-  if (cachedResult instanceof CacheItem) {
-    return cachedResult.item as string[];
-  }
-  const tokens = tokenize({ css: value });
-  const items = new Set();
-  while (tokens.length) {
-    const [type, value] = tokens.shift() as [TokenType, string];
-    if (type === IDENT && value.startsWith('--')) {
-      items.add(value);
-    }
-  }
-  const res = [...items] as string[];
-  setCache(cacheKey, res);
-  return res;
-};
-
-/**
- * is color
- * @param value - CSS value
- * @param [opt] - options
- * @returns result
- */
-export const isColor = (value: unknown, opt: Options = {}): boolean => {
-  if (isString(value)) {
-    value = value.toLowerCase().trim();
-    if (value && isString(value)) {
-      if (/^[a-z]+$/.test(value)) {
-        if (
-          /^(?:currentcolor|transparent)$/.test(value) ||
-          Object.prototype.hasOwnProperty.call(NAMED_COLORS, value)
-        ) {
-          return true;
-        }
-      } else if (REG_COLOR.test(value) || REG_MIX.test(value)) {
-        return true;
-      } else if (REG_FN_COLOR.test(value)) {
-        opt.nullable = true;
-        if (!opt.format) {
-          opt.format = VAL_SPEC;
-        }
-        const resolvedValue = resolveColor(value, opt);
-        if (resolvedValue) {
-          return true;
-        }
-      }
-    }
-  }
-  return false;
-};
-
-/**
- * value to JSON string
- * @param value - CSS value
- * @param [func] - stringify function
- * @returns stringified value in JSON notation
- */
-export const valueToJsonString = (
-  value: unknown,
-  func: boolean = false
-): string => {
-  if (typeof value === 'undefined') {
-    return '';
-  }
-  const res = JSON.stringify(value, (_key, val) => {
-    let replacedValue;
-    if (typeof val === 'undefined') {
-      replacedValue = null;
-    } else if (typeof val === 'function') {
-      if (func) {
-        replacedValue = val.toString().replace(/\s/g, '').substring(0, HEX);
-      } else {
-        replacedValue = val.name;
-      }
-    } else if (val instanceof Map || val instanceof Set) {
-      replacedValue = [...val];
-    } else if (typeof val === 'bigint') {
-      replacedValue = val.toString();
-    } else {
-      replacedValue = val;
-    }
-    return replacedValue;
-  });
-  return res;
-};
-
-/**
- * round to specified precision
- * @param value - numeric value
- * @param bit - minimum bits
- * @returns rounded value
- */
-export const roundToPrecision = (value: number, bit: number = 0): number => {
-  if (!Number.isFinite(value)) {
-    throw new TypeError(`${value} is not a finite number.`);
-  }
-  if (!Number.isFinite(bit)) {
-    throw new TypeError(`${bit} is not a finite number.`);
-  } else if (bit < 0 || bit > HEX) {
-    throw new RangeError(`${bit} is not between 0 and ${HEX}.`);
-  }
-  if (bit === 0) {
-    return Math.round(value);
-  }
-  let val;
-  if (bit === HEX) {
-    val = value.toPrecision(6);
-  } else if (bit < DEC) {
-    val = value.toPrecision(4);
-  } else {
-    val = value.toPrecision(5);
-  }
-  return parseFloat(val);
-};
-
-/**
- * interpolate hue
- * @param hueA - hue value
- * @param hueB - hue value
- * @param arc - shorter | longer | increasing | decreasing
- * @returns result - [hueA, hueB]
- */
-export const interpolateHue = (
-  hueA: number,
-  hueB: number,
-  arc: string = 'shorter'
-): [number, number] => {
-  if (!Number.isFinite(hueA)) {
-    throw new TypeError(`${hueA} is not a finite number.`);
-  }
-  if (!Number.isFinite(hueB)) {
-    throw new TypeError(`${hueB} is not a finite number.`);
-  }
-  switch (arc) {
-    case 'decreasing': {
-      if (hueB > hueA) {
-        hueA += DEG;
-      }
-      break;
-    }
-    case 'increasing': {
-      if (hueB < hueA) {
-        hueB += DEG;
-      }
-      break;
-    }
-    case 'longer': {
-      if (hueB > hueA && hueB < hueA + DEG_HALF) {
-        hueA += DEG;
-      } else if (hueB > hueA + DEG_HALF * -1 && hueB <= hueA) {
-        hueB += DEG;
-      }
-      break;
-    }
-    case 'shorter':
-    default: {
-      if (hueB > hueA + DEG_HALF) {
-        hueA += DEG;
-      } else if (hueB < hueA + DEG_HALF * -1) {
-        hueB += DEG;
-      }
-    }
-  }
-  return [hueA, hueB];
-};
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/LICENSE
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/LICENSE
@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 asamuzaK (Kazz)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/README.md
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/README.md
@@ -1,200 +0,0 @@
-# DOM Selector
-
-[![build](https://github.com/asamuzaK/domSelector/actions/workflows/node.js.yml/badge.svg)](https://github.com/asamuzaK/domSelector/actions/workflows/node.js.yml)
-[![CodeQL](https://github.com/asamuzaK/domSelector/actions/workflows/codeql.yml/badge.svg)](https://github.com/asamuzaK/domSelector/actions/workflows/codeql.yml)
-[![npm (scoped)](https://img.shields.io/npm/v/@asamuzakjp/dom-selector)](https://www.npmjs.com/package/@asamuzakjp/dom-selector)
-
-A CSS selector engine.
-Used in jsdom since [jsdom v23.2.0](https://github.com/jsdom/jsdom/releases/tag/23.2.0).
-
-## Install
-
-```console
-npm i @asamuzakjp/dom-selector
-```
-
-## Usage
-
-```javascript
-import {
-  matches, closest, querySelector, querySelectorAll
-} from '@asamuzakjp/dom-selector';
-```
-
-<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
-
-### matches(selector, node, opt)
-
-matches - same functionality as [Element.matches()][64]
-
-#### Parameters
-
- `selector` **[string][59]** CSS selector
- `node` **[object][60]** Element node
- `opt` **[object][60]?** options
-  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
-
-Returns **[boolean][61]** `true` if matched, `false` otherwise
-
-
-### closest(selector, node, opt)
-
-closest - same functionality as [Element.closest()][65]
-
-#### Parameters
-
- `selector` **[string][59]** CSS selector
- `node` **[object][60]** Element node
- `opt` **[object][60]?** options
-  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
-
-Returns **[object][60]?** matched node
-
-
-### querySelector(selector, node, opt)
-
-querySelector - same functionality as [Document.querySelector()][66], [DocumentFragment.querySelector()][67], [Element.querySelector()][68]
-
-#### Parameters
-
- `selector` **[string][59]** CSS selector
- `node` **[object][60]** Document, DocumentFragment or Element node
- `opt` **[object][60]?** options
-  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
-
-Returns **[object][60]?** matched node
-
-
-### querySelectorAll(selector, node, opt)
-
-querySelectorAll - same functionality as [Document.querySelectorAll()][69], [DocumentFragment.querySelectorAll()][70], [Element.querySelectorAll()][71]  
-**NOTE**: returns Array, not NodeList
-
-#### Parameters
-
- `selector` **[string][59]** CSS selector
- `node` **[object][60]** Document, DocumentFragment or Element node
- `opt` **[object][60]?** options
-  - `opt.warn` **[boolean][61]?** console warn e.g. unsupported pseudo-class
-
-Returns **[Array][62]&lt;([object][60] \| [undefined][63])>** array of matched nodes
-
-
-## Supported CSS selectors
-
-|Pattern|Supported|Note|
-|:--------|:-------:|:--------|
-|\*|✓| |
-|ns\|E|✓| |
-|\*\|E|✓| |
-|\|E|✓| |
-|E|✓| |
-|E:not(s1, s2, …)|✓| |
-|E:is(s1, s2, …)|✓| |
-|E:where(s1, s2, …)|✓| |
-|E:has(rs1, rs2, …)|✓| |
-|E.warning|✓| |
-|E#myid|✓| |
-|E\[foo\]|✓| |
-|E\[foo="bar"\]|✓| |
-|E\[foo="bar"&nbsp;i\]|✓| |
-|E\[foo="bar"&nbsp;s\]|✓| |
-|E\[foo~="bar"\]|✓| |
-|E\[foo^="bar"\]|✓| |
-|E\[foo$="bar"\]|✓| |
-|E\[foo*="bar"\]|✓| |
-|E\[foo\|="en"\]|✓| |
-|E:defined|Unsupported| |
-|E:dir(ltr)|✓| |
-|E:lang(en)|Partially supported|Comma-separated list of language codes, e.g. `:lang(en, fr)`, is not yet supported.|
-|E:any&#8209;link|✓| |
-|E:link|✓| |
-|E:visited|✓|Returns `false` or `null` to prevent fingerprinting.|
-|E:local&#8209;link|✓| |
-|E:target|✓| |
-|E:target&#8209;within|✓| |
-|E:scope|✓| |
-|E:current|Unsupported| |
-|E:current(s)|Unsupported| |
-|E:past|Unsupported| |
-|E:future|Unsupported| |
-|E:active|Unsupported| |
-|E:hover|Unsupported| |
-|E:focus|✓| |
-|E:focus&#8209;within|✓| |
-|E:focus&#8209;visible|Unsupported| |
-|E:enabled<br>E:disabled|✓| |
-|E:read&#8209;write<br>E:read&#8209;only|✓| |
-|E:placeholder&#8209;shown|✓| |
-|E:default|✓| |
-|E:checked|✓| |
-|E:indeterminate|✓| |
-|E:valid<br>E:invalid|✓| |
-|E:required<br>E:optional|✓| |
-|E:blank|Unsupported| |
-|E:user&#8209;invalid|Unsupported| |
-|E:root|✓| |
-|E:empty|✓| |
-|E:nth&#8209;child(n&nbsp;[of&nbsp;S]?)|✓| |
-|E:nth&#8209;last&#8209;child(n&nbsp;[of&nbsp;S]?)|✓| |
-|E:first&#8209;child|✓| |
-|E:last&#8209;child|✓| |
-|E:only&#8209;child|✓| |
-|E:nth&#8209;of&#8209;type(n)|✓| |
-|E:nth&#8209;last&#8209;of&#8209;type(n)|✓| |
-|E:first&#8209;of&#8209;type|✓| |
-|E:last&#8209;of&#8209;type|✓| |
-|E:only&#8209;of&#8209;type|✓| |
-|E&nbsp;F|✓| |
-|E > F|✓| |
-|E + F|✓| |
-|E ~ F|✓| |
-|F \|\| E|Unsupported| |
-|E:nth&#8209;col(n)|Unsupported| |
-|E:nth&#8209;last&#8209;col(n)|Unsupported| |
-|:host|✓| |
-|:host(s)|✓| |
-|:host&#8209;context(s)|✓| |
-
-
-<!--
-### Performance
-
-TODO: rewrite benchmark table
-->
-
-
-## Acknowledgments
-
-The following resources have been of great help in the development of the DOM Selector.
-
- [CSSTree](https://github.com/csstree/csstree)
- [selery](https://github.com/danburzo/selery)
- [jsdom](https://github.com/jsdom/jsdom)
-
-
---
-Copyright (c) 2023 [asamuzaK (Kazz)](https://github.com/asamuzaK/)
-
-
-[1]: #matches
-[2]: #parameters
-[3]: #closest
-[4]: #parameters-1
-[5]: #queryselector
-[6]: #parameters-2
-[7]: #queryselectorall
-[8]: #parameters-3
-[59]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
-[60]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
-[61]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
-[62]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
-[63]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
-[64]: https://developer.mozilla.org/docs/Web/API/Element/matches
-[65]: https://developer.mozilla.org/docs/Web/API/Element/closest
-[66]: https://developer.mozilla.org/docs/Web/API/Document/querySelector
-[67]: https://developer.mozilla.org/docs/Web/API/DocumentFragment/querySelector
-[68]: https://developer.mozilla.org/docs/Web/API/Element/querySelector
-[69]: https://developer.mozilla.org/docs/Web/API/Document/querySelectorAll
-[70]: https://developer.mozilla.org/docs/Web/API/DocumentFragment/querySelectorAll
-[71]: https://developer.mozilla.org/docs/Web/API/Element/querySelectorAll
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/package.json
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/package.json
@@ -1,62 +0,0 @@
-{
-  "name": "@asamuzakjp/dom-selector",
-  "description": "A CSS selector engine.",
-  "author": "asamuzaK",
-  "license": "MIT",
-  "homepage": "https://github.com/asamuzaK/domSelector#readme",
-  "bugs": {
-    "url": "https://github.com/asamuzaK/domSelector/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/asamuzaK/domSelector.git"
-  },
-  "files": [
-    "dist",
-    "src",
-    "types"
-  ],
-  "type": "module",
-  "exports": {
-    "import": "./src/index.js",
-    "require": "./dist/cjs/index.js"
-  },
-  "types": "types/index.d.ts",
-  "dependencies": {
-    "bidi-js": "^1.0.3",
-    "css-tree": "^2.3.1",
-    "is-potential-custom-element-name": "^1.0.1"
-  },
-  "devDependencies": {
-    "@types/css-tree": "^2.3.4",
-    "benchmark": "^2.1.4",
-    "c8": "^9.0.0",
-    "chai": "^5.0.0",
-    "commander": "^11.1.0",
-    "esbuild": "^0.19.11",
-    "eslint": "^8.56.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsdoc": "^48.0.2",
-    "eslint-plugin-regexp": "^2.1.2",
-    "eslint-plugin-unicorn": "^50.0.1",
-    "happy-dom": "^12.10.3",
-    "jsdom": "^23.1.0",
-    "linkedom": "^0.16.6",
-    "mocha": "^10.2.0",
-    "sinon": "^17.0.1",
-    "typescript": "^5.3.3",
-    "wpt-runner": "^5.0.0"
-  },
-  "scripts": {
-    "bench": "node benchmark/bench.js",
-    "build": "npm run tsc && npm run lint && npm test && npm run compat",
-    "compat": "esbuild --format=cjs --platform=node --outdir=dist/cjs/ --minify --sourcemap src/**/*.js",
-    "lint": "eslint --fix .",
-    "test": "c8 --reporter=text mocha --exit test/**/*.test.js",
-    "test-wpt": "npm run update-wpt && node test/wpt/wpt-runner.js",
-    "tsc": "npx tsc",
-    "update-wpt": "git submodule update --init --recursive --remote"
-  },
-  "version": "2.0.2"
-}
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/index.js
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/index.js
@@ -1,54 +0,0 @@
-/*!
- * DOM Selector - A CSS selector engine.
- * @license MIT
- * @copyright asamuzaK (Kazz)
- * @see {@link https://github.com/asamuzaK/domSelector/blob/main/LICENSE}
- */
-
-/* import */
-import { Matcher } from './js/matcher.js';
-
-/**
- * matches
- * @param {string} selector - CSS selector
- * @param {object} node - Element node
- * @param {object} [opt] - options
- * @param {boolean} [opt.warn] - console warn e.g. unsupported pseudo-class
- * @returns {boolean} - `true` if matched, `false` otherwise
- */
-export const matches = (selector, node, opt) =>
-  new Matcher(selector, node, opt).matches();
-
-/**
- * closest
- * @param {string} selector - CSS selector
- * @param {object} node - Element node
- * @param {object} [opt] - options
- * @param {boolean} [opt.warn] - console warn e.g. unsupported pseudo-class
- * @returns {?object} - matched node
- */
-export const closest = (selector, node, opt) =>
-  new Matcher(selector, node, opt).closest();
-
-/**
- * querySelector
- * @param {string} selector - CSS selector
- * @param {object} node - Document, DocumentFragment or Element node
- * @param {object} [opt] - options
- * @param {boolean} [opt.warn] - console warn e.g. unsupported pseudo-class
- * @returns {?object} - matched node
- */
-export const querySelector = (selector, node, opt) =>
-  new Matcher(selector, node, opt).querySelector();
-
-/**
- * querySelectorAll
- * NOTE: returns Array, not NodeList
- * @param {string} selector - CSS selector
- * @param {object} node - Document, DocumentFragment or Element node
- * @param {object} [opt] - options
- * @param {boolean} [opt.warn] - console warn e.g. unsupported pseudo-class
- * @returns {Array.<object|undefined>} - array of matched nodes
- */
-export const querySelectorAll = (selector, node, opt) =>
-  new Matcher(selector, node, opt).querySelectorAll();
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/js/constant.js
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/js/constant.js
@@ -1,58 +0,0 @@
-/**
- * constant.js
- */
-
-/* string */
-export const ALPHA_NUM = '[A-Z\\d]+';
-export const AN_PLUS_B = 'AnPlusB';
-export const COMBINATOR = 'Combinator';
-export const IDENTIFIER = 'Identifier';
-export const NOT_SUPPORTED_ERR = 'NotSupportedError';
-export const NTH = 'Nth';
-export const RAW = 'Raw';
-export const SELECTOR = 'Selector';
-export const SELECTOR_ATTR = 'AttributeSelector';
-export const SELECTOR_CLASS = 'ClassSelector';
-export const SELECTOR_ID = 'IdSelector';
-export const SELECTOR_LIST = 'SelectorList';
-export const SELECTOR_PSEUDO_CLASS = 'PseudoClassSelector';
-export const SELECTOR_PSEUDO_ELEMENT = 'PseudoElementSelector';
-export const SELECTOR_TYPE = 'TypeSelector';
-export const STRING = 'String';
-export const SYNTAX_ERR = 'SyntaxError';
-export const U_FFFD = '\uFFFD';
-
-/* numeric */
-export const BIT_01 = 1;
-export const BIT_02 = 2;
-export const BIT_04 = 4;
-export const BIT_08 = 8;
-export const BIT_16 = 0x10;
-export const BIT_32 = 0x20;
-export const BIT_HYPHEN = 0x2D;
-export const DUO = 2;
-export const HEX = 16;
-export const MAX_BIT_16 = 0xFFFF;
-export const TYPE_FROM = 8;
-export const TYPE_TO = -1;
-
-/* Node */
-export const ELEMENT_NODE = 1;
-export const TEXT_NODE = 3;
-export const DOCUMENT_NODE = 9;
-export const DOCUMENT_FRAGMENT_NODE = 11;
-export const DOCUMENT_POSITION_PRECEDING = 2;
-export const DOCUMENT_POSITION_CONTAINS = 8;
-export const DOCUMENT_POSITION_CONTAINED_BY = 0x10;
-
-/* NodeFilter */
-export const SHOW_ALL = 0xffffffff;
-export const SHOW_DOCUMENT = 0x100;
-export const SHOW_DOCUMENT_FRAGMENT = 0x400;
-export const SHOW_ELEMENT = 1;
-
-/* regexp */
-export const REG_LOGICAL_PSEUDO = /^(?:(?:ha|i)s|not|where)$/;
-export const REG_SHADOW_HOST = /^host(?:-context)?$/;
-export const REG_SHADOW_MODE = /^(?:close|open)$/;
-export const REG_SHADOW_PSEUDO = /^part|slotted$/;
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/js/dom-util.js
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/js/dom-util.js
@@ -1,294 +0,0 @@
-/**
- * dom-util.js
- */
-
-/* import */
-import bidiFactory from 'bidi-js';
-
-/* constants */
-import {
-  DOCUMENT_FRAGMENT_NODE, DOCUMENT_NODE, DOCUMENT_POSITION_CONTAINS,
-  DOCUMENT_POSITION_CONTAINED_BY, DOCUMENT_POSITION_PRECEDING, ELEMENT_NODE,
-  REG_SHADOW_MODE, SYNTAX_ERR, TEXT_NODE
-} from './constant.js';
-
-/**
- * is in shadow tree
- * @param {object} node - node
- * @returns {boolean} - result;
- */
-export const isInShadowTree = (node = {}) => {
-  let bool;
-  if (node.nodeType === ELEMENT_NODE ||
-      node.nodeType === DOCUMENT_FRAGMENT_NODE) {
-    let refNode = node;
-    while (refNode) {
-      const { host, mode, nodeType, parentNode } = refNode;
-      if (host && mode && nodeType === DOCUMENT_FRAGMENT_NODE &&
-          REG_SHADOW_MODE.test(mode)) {
-        bool = true;
-        break;
-      }
-      refNode = parentNode;
-    }
-  }
-  return !!bool;
-};
-
-/**
- * get slotted text content
- * @param {object} node - Element node
- * @returns {?string} - text content
- */
-export const getSlottedTextContent = (node = {}) => {
-  let res;
-  if (node.localName === 'slot' && isInShadowTree(node)) {
-    const nodes = node.assignedNodes();
-    if (nodes.length) {
-      for (const item of nodes) {
-        res = item.textContent.trim();
-        if (res) {
-          break;
-        }
-      }
-    } else {
-      res = node.textContent.trim();
-    }
-  }
-  return res ?? null;
-};
-
-/**
- * get directionality of node
- * @see https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute
- * @param {object} node - Element node
- * @returns {?string} - 'ltr' / 'rtl'
- */
-export const getDirectionality = (node = {}) => {
-  let res;
-  if (node.nodeType === ELEMENT_NODE) {
-    const { dir: nodeDir, localName, parentNode } = node;
-    const { getEmbeddingLevels } = bidiFactory();
-    const regDir = /^(?:ltr|rtl)$/;
-    if (regDir.test(nodeDir)) {
-      res = nodeDir;
-    } else if (nodeDir === 'auto') {
-      let text;
-      switch (localName) {
-        case 'input': {
-          if (!node.type || /^(?:(?:butto|hidde)n|(?:emai|te|ur)l|(?:rese|submi|tex)t|password|search)$/.test(node.type)) {
-            text = node.value;
-          }
-          break;
-        }
-        case 'slot': {
-          text = getSlottedTextContent(node);
-          break;
-        }
-        case 'textarea': {
-          text = node.value;
-          break;
-        }
-        default: {
-          const items = [].slice.call(node.childNodes);
-          for (const item of items) {
-            const {
-              dir: itemDir, localName: itemLocalName, nodeType: itemNodeType,
-              textContent: itemTextContent
-            } = item;
-            if (itemNodeType === TEXT_NODE) {
-              text = itemTextContent.trim();
-            } else if (itemNodeType === ELEMENT_NODE) {
-              if (!/^(?:bdi|s(?:cript|tyle)|textarea)$/.test(itemLocalName) &&
-                  (!itemDir || !regDir.test(itemDir))) {
-                if (itemLocalName === 'slot') {
-                  text = getSlottedTextContent(item);
-                } else {
-                  text = itemTextContent.trim();
-                }
-              }
-            }
-            if (text) {
-              break;
-            }
-          }
-        }
-      }
-      if (text) {
-        const { paragraphs: [{ level }] } = getEmbeddingLevels(text);
-        if (level % 2 === 1) {
-          res = 'rtl';
-        } else {
-          res = 'ltr';
-        }
-      }
-      if (!res) {
-        if (parentNode) {
-          const { nodeType: parentNodeType } = parentNode;
-          if (parentNodeType === ELEMENT_NODE) {
-            res = getDirectionality(parentNode);
-          } else if (parentNodeType === DOCUMENT_NODE ||
-                     parentNodeType === DOCUMENT_FRAGMENT_NODE) {
-            res = 'ltr';
-          }
-        } else {
-          res = 'ltr';
-        }
-      }
-    } else if (localName === 'bdi') {
-      const text = node.textContent.trim();
-      if (text) {
-        const { paragraphs: [{ level }] } = getEmbeddingLevels(text);
-        if (level % 2 === 1) {
-          res = 'rtl';
-        } else {
-          res = 'ltr';
-        }
-      }
-      if (!(res || parentNode)) {
-        res = 'ltr';
-      }
-    } else if (localName === 'input' && node.type === 'tel') {
-      res = 'ltr';
-    } else if (parentNode) {
-      if (localName === 'slot') {
-        const text = getSlottedTextContent(node);
-        if (text) {
-          const { paragraphs: [{ level }] } = getEmbeddingLevels(text);
-          if (level % 2 === 1) {
-            res = 'rtl';
-          } else {
-            res = 'ltr';
-          }
-        }
-      }
-      if (!res) {
-        const { nodeType: parentNodeType } = parentNode;
-        if (parentNodeType === ELEMENT_NODE) {
-          res = getDirectionality(parentNode);
-        } else if (parentNodeType === DOCUMENT_NODE ||
-                   parentNodeType === DOCUMENT_FRAGMENT_NODE) {
-          res = 'ltr';
-        }
-      }
-    } else {
-      res = 'ltr';
-    }
-  }
-  return res ?? null;
-};
-
-/**
- * is content editable
- * NOTE: not implemented in jsdom https://github.com/jsdom/jsdom/issues/1670
- * @param {object} node - Element node
- * @returns {boolean} - result
- */
-export const isContentEditable = (node = {}) => {
-  let res;
-  if (node.nodeType === ELEMENT_NODE) {
-    if (typeof node.isContentEditable === 'boolean') {
-      res = node.isContentEditable;
-    } else if (node.ownerDocument.designMode === 'on') {
-      res = true;
-    } else if (node.hasAttribute('contenteditable')) {
-      const attr = node.getAttribute('contenteditable');
-      if (attr === '' || /^(?:plaintext-only|true)$/.test(attr)) {
-        res = true;
-      } else if (attr === 'inherit') {
-        let parent = node.parentNode;
-        while (parent) {
-          if (isContentEditable(parent)) {
-            res = true;
-            break;
-          }
-          parent = parent.parentNode;
-        }
-      }
-    }
-  }
-  return !!res;
-};
-
-/**
- * is namespace declared
- * @param {string} ns - namespace
- * @param {object} node - Element node
- * @returns {boolean} - result
- */
-export const isNamespaceDeclared = (ns = '', node = {}) => {
-  let res;
-  if (ns && typeof ns === 'string' && node.nodeType === ELEMENT_NODE) {
-    const attr = `xmlns:${ns}`;
-    const root = node.ownerDocument.documentElement;
-    let parent = node;
-    while (parent) {
-      if (typeof parent.hasAttribute === 'function' &&
-          parent.hasAttribute(attr)) {
-        res = true;
-        break;
-      } else if (parent === root) {
-        break;
-      }
-      parent = parent.parentNode;
-    }
-  }
-  return !!res;
-};
-
-/**
- * is inclusive - nodeA and nodeB are in inclusive relation
- * @param {object} nodeA - Element node
- * @param {object} nodeB - Element node
- * @returns {boolean} - result
- */
-export const isInclusive = (nodeA = {}, nodeB = {}) => {
-  let res;
-  if (nodeA.nodeType === ELEMENT_NODE && nodeB.nodeType === ELEMENT_NODE) {
-    const posBit = nodeB.compareDocumentPosition(nodeA);
-    res = posBit & DOCUMENT_POSITION_CONTAINS ||
-          posBit & DOCUMENT_POSITION_CONTAINED_BY;
-  }
-  return !!res;
-};
-
-/**
- * is preceding - nodeA precedes and/or contains nodeB
- * @param {object} nodeA - Element node
- * @param {object} nodeB - Element node
- * @returns {boolean} - result
- */
-export const isPreceding = (nodeA = {}, nodeB = {}) => {
-  let res;
-  if (nodeA.nodeType === ELEMENT_NODE && nodeB.nodeType === ELEMENT_NODE) {
-    const posBit = nodeB.compareDocumentPosition(nodeA);
-    res = posBit & DOCUMENT_POSITION_PRECEDING ||
-          posBit & DOCUMENT_POSITION_CONTAINS;
-  }
-  return !!res;
-};
-
-/**
- * selector to node properties - e.g. ns|E -> { prefix: ns, tagName: E }
- * @param {string} selector - type selector
- * @param {object} [node] - Element node
- * @returns {object} - node properties
- */
-export const selectorToNodeProps = (selector, node) => {
-  let prefix;
-  let tagName;
-  if (selector && typeof selector === 'string') {
-    if (selector.indexOf('|') > -1) {
-      [prefix, tagName] = selector.split('|');
-    } else {
-      prefix = '*';
-      tagName = selector;
-    }
-  } else {
-    throw new DOMException(`Invalid selector ${selector}`, SYNTAX_ERR);
-  }
-  return {
-    prefix,
-    tagName
-  };
-};
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/js/matcher.js
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/js/matcher.js
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/js/parser.js
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/src/js/parser.js
@@ -1,222 +0,0 @@
-/**
- * parser.js
- */
-
-/* import */
-import { findAll, parse, toPlainObject, walk } from 'css-tree';
-
-/* constants */
-import {
-  DUO, HEX, MAX_BIT_16, BIT_HYPHEN, REG_LOGICAL_PSEUDO, REG_SHADOW_PSEUDO,
-  SELECTOR, SELECTOR_PSEUDO_CLASS, SELECTOR_PSEUDO_ELEMENT, SYNTAX_ERR,
-  TYPE_FROM, TYPE_TO, U_FFFD
-} from './constant.js';
-
-/**
- * unescape selector
- * @param {string} selector - CSS selector
- * @returns {?string} - unescaped selector
- */
-export const unescapeSelector = (selector = '') => {
-  if (typeof selector === 'string' && selector.indexOf('\\', 0) >= 0) {
-    const arr = selector.split('\\');
-    const l = arr.length;
-    for (let i = 1; i < l; i++) {
-      let item = arr[i];
-      if (item === '' && i === l - 1) {
-        item = U_FFFD;
-      } else {
-        const hexExists = /^([\da-f]{1,6}\s?)/i.exec(item);
-        if (hexExists) {
-          const [, hex] = hexExists;
-          let str;
-          try {
-            const low = parseInt('D800', HEX);
-            const high = parseInt('DFFF', HEX);
-            const deci = parseInt(hex, HEX);
-            if (deci === 0 || (deci >= low && deci <= high)) {
-              str = U_FFFD;
-            } else {
-              str = String.fromCodePoint(deci);
-            }
-          } catch (e) {
-            str = U_FFFD;
-          }
-          let postStr = '';
-          if (item.length > hex.length) {
-            postStr = item.substring(hex.length);
-          }
-          item = `${str}${postStr}`;
-        // whitespace
-        } else if (/^[\n\r\f]/.test(item)) {
-          item = '\\' + item;
-        }
-      }
-      arr[i] = item;
-    }
-    selector = arr.join('');
-  }
-  return selector;
-};
-
-/**
- * preprocess
- * @see https://drafts.csswg.org/css-syntax-3/#input-preprocessing
- * @param {...*} args - arguments
- * @returns {string} - filtered selector string
- */
-export const preprocess = (...args) => {
-  if (!args.length) {
-    throw new TypeError('1 argument required, but only 0 present.');
-  }
-  let [selector] = args;
-  if (typeof selector === 'string') {
-    let index = 0;
-    while (index >= 0) {
-      index = selector.indexOf('#', index);
-      if (index < 0) {
-        break;
-      }
-      const preHash = selector.substring(0, index + 1);
-      let postHash = selector.substring(index + 1);
-      const codePoint = postHash.codePointAt(0);
-      // @see https://drafts.csswg.org/selectors/#id-selectors
-      // @see https://drafts.csswg.org/css-syntax-3/#ident-token-diagram
-      if (codePoint === BIT_HYPHEN) {
-        if (/^\d$/.test(postHash.substring(1, 2))) {
-          throw new DOMException(`Invalid selector ${selector}`, SYNTAX_ERR);
-        }
-      // escape char above 0xFFFF
-      } else if (codePoint > MAX_BIT_16) {
-        const str = `\\${codePoint.toString(HEX)} `;
-        if (postHash.length === DUO) {
-          postHash = str;
-        } else {
-          postHash = `${str}${postHash.substring(DUO)}`;
-        }
-      }
-      selector = `${preHash}${postHash}`;
-      index++;
-    }
-    selector = selector.replace(/\f|\r\n?/g, '\n')
-      .replace(/[\0\uD800-\uDFFF]|\\$/g, U_FFFD);
-  } else if (selector === undefined || selector === null) {
-    selector = Object.prototype.toString.call(selector)
-      .slice(TYPE_FROM, TYPE_TO).toLowerCase();
-  } else if (Array.isArray(selector)) {
-    selector = selector.join(',');
-  } else if (Object.prototype.hasOwnProperty.call(selector, 'toString')) {
-    selector = selector.toString();
-  } else {
-    throw new DOMException(`Invalid selector ${selector}`, SYNTAX_ERR);
-  }
-  return selector;
-};
-
-/**
- * create AST from CSS selector
- * @param {string} selector - CSS selector
- * @returns {object} - AST
- */
-export const parseSelector = selector => {
-  selector = preprocess(selector);
-  // invalid selectors
-  if (/^$|^\s*>|,\s*$/.test(selector)) {
-    throw new DOMException(`Invalid selector ${selector}`, SYNTAX_ERR);
-  }
-  let res;
-  try {
-    const ast = parse(selector, {
-      context: 'selectorList',
-      parseCustomProperty: true
-    });
-    res = toPlainObject(ast);
-  } catch (e) {
-    // workaround for https://github.com/csstree/csstree/issues/265
-    // NOTE: still throws on `:lang("")`;
-    const regLang = /(:lang\(\s*("[A-Za-z\d\-*]+")\s*\))/;
-    if (e.message === 'Identifier is expected' && regLang.test(selector)) {
-      const [, lang, range] = regLang.exec(selector);
-      const escapedRange =
-        range.replaceAll('*', '\\*').replace(/^"/, '').replace(/"$/, '');
-      const escapedLang = lang.replace(range, escapedRange);
-      res = parseSelector(selector.replace(lang, escapedLang));
-    } else if (e.message === '"]" is expected' && !selector.endsWith(']')) {
-      res = parseSelector(`${selector}]`);
-    } else if (e.message === '")" is expected' && !selector.endsWith(')')) {
-      res = parseSelector(`${selector})`);
-    } else {
-      throw new DOMException(e.message, SYNTAX_ERR);
-    }
-  }
-  return res;
-};
-
-/**
- * walk AST
- * @param {object} ast - AST
- * @returns {Array.<object|undefined>} - collection of AST branches
- */
-export const walkAST = (ast = {}) => {
-  const branches = new Set();
-  let hasPseudoFunc;
-  const opt = {
-    enter: node => {
-      if (node.type === SELECTOR) {
-        branches.add(node.children);
-      } else if ((node.type === SELECTOR_PSEUDO_CLASS &&
-                  REG_LOGICAL_PSEUDO.test(node.name)) ||
-                 (node.type === SELECTOR_PSEUDO_ELEMENT &&
-                  REG_SHADOW_PSEUDO.test(node.name))) {
-        hasPseudoFunc = true;
-      }
-    }
-  };
-  walk(ast, opt);
-  if (hasPseudoFunc) {
-    findAll(ast, (node, item, list) => {
-      if (list) {
-        if (node.type === SELECTOR_PSEUDO_CLASS &&
-            REG_LOGICAL_PSEUDO.test(node.name)) {
-          const itemList = list.filter(i => {
-            const { name, type } = i;
-            const res =
-              type === SELECTOR_PSEUDO_CLASS && REG_LOGICAL_PSEUDO.test(name);
-            return res;
-          });
-          for (const { children } of itemList) {
-            // SelectorList
-            for (const { children: grandChildren } of children) {
-              // Selector
-              for (const { children: greatGrandChildren } of grandChildren) {
-                if (branches.has(greatGrandChildren)) {
-                  branches.delete(greatGrandChildren);
-                }
-              }
-            }
-          }
-        } else if (node.type === SELECTOR_PSEUDO_ELEMENT &&
-                   REG_SHADOW_PSEUDO.test(node.name)) {
-          const itemList = list.filter(i => {
-            const { name, type } = i;
-            const res =
-              type === SELECTOR_PSEUDO_ELEMENT && REG_SHADOW_PSEUDO.test(name);
-            return res;
-          });
-          for (const { children } of itemList) {
-            // Selector
-            for (const { children: grandChildren } of children) {
-              if (branches.has(grandChildren)) {
-                branches.delete(grandChildren);
-              }
-            }
-          }
-        }
-      }
-    });
-  }
-  return [...branches];
-};
-
-/* export */
-export { generate as generateCSS } from 'css-tree';
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/index.d.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/index.d.ts
@@ -1,12 +0,0 @@
-export function matches(selector: string, node: object, opt?: {
-    warn?: boolean;
-}): boolean;
-export function closest(selector: string, node: object, opt?: {
-    warn?: boolean;
-}): object | null;
-export function querySelector(selector: string, node: object, opt?: {
-    warn?: boolean;
-}): object | null;
-export function querySelectorAll(selector: string, node: object, opt?: {
-    warn?: boolean;
-}): Array<object | undefined>;
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/js/constant.d.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/js/constant.d.ts
@@ -1,45 +0,0 @@
-export const ALPHA_NUM: "[A-Z\\d]+";
-export const AN_PLUS_B: "AnPlusB";
-export const COMBINATOR: "Combinator";
-export const IDENTIFIER: "Identifier";
-export const NOT_SUPPORTED_ERR: "NotSupportedError";
-export const NTH: "Nth";
-export const RAW: "Raw";
-export const SELECTOR: "Selector";
-export const SELECTOR_ATTR: "AttributeSelector";
-export const SELECTOR_CLASS: "ClassSelector";
-export const SELECTOR_ID: "IdSelector";
-export const SELECTOR_LIST: "SelectorList";
-export const SELECTOR_PSEUDO_CLASS: "PseudoClassSelector";
-export const SELECTOR_PSEUDO_ELEMENT: "PseudoElementSelector";
-export const SELECTOR_TYPE: "TypeSelector";
-export const STRING: "String";
-export const SYNTAX_ERR: "SyntaxError";
-export const U_FFFD: "<22>";
-export const BIT_01: 1;
-export const BIT_02: 2;
-export const BIT_04: 4;
-export const BIT_08: 8;
-export const BIT_16: 16;
-export const BIT_32: 32;
-export const BIT_HYPHEN: 45;
-export const DUO: 2;
-export const HEX: 16;
-export const MAX_BIT_16: 65535;
-export const TYPE_FROM: 8;
-export const TYPE_TO: -1;
-export const ELEMENT_NODE: 1;
-export const TEXT_NODE: 3;
-export const DOCUMENT_NODE: 9;
-export const DOCUMENT_FRAGMENT_NODE: 11;
-export const DOCUMENT_POSITION_PRECEDING: 2;
-export const DOCUMENT_POSITION_CONTAINS: 8;
-export const DOCUMENT_POSITION_CONTAINED_BY: 16;
-export const SHOW_ALL: 4294967295;
-export const SHOW_DOCUMENT: 256;
-export const SHOW_DOCUMENT_FRAGMENT: 1024;
-export const SHOW_ELEMENT: 1;
-export const REG_LOGICAL_PSEUDO: RegExp;
-export const REG_SHADOW_HOST: RegExp;
-export const REG_SHADOW_MODE: RegExp;
-export const REG_SHADOW_PSEUDO: RegExp;
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/js/dom-util.d.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/js/dom-util.d.ts
@@ -1,8 +0,0 @@
-export function isInShadowTree(node?: object): boolean;
-export function getSlottedTextContent(node?: object): string | null;
-export function getDirectionality(node?: object): string | null;
-export function isContentEditable(node?: object): boolean;
-export function isNamespaceDeclared(ns?: string, node?: object): boolean;
-export function isInclusive(nodeA?: object, nodeB?: object): boolean;
-export function isPreceding(nodeA?: object, nodeB?: object): boolean;
-export function selectorToNodeProps(selector: string, node?: object): object;
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/js/matcher.d.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/js/matcher.d.ts
@@ -1,61 +0,0 @@
-export class Matcher {
-    constructor(selector: string, node: object, opt?: {
-        warn?: boolean;
-    });
-    _onError(e: Error): void;
-    _setup(node: object): Array<object>;
-    _sortLeaves(leaves: Array<object>): Array<object>;
-    _correspond(selector: string): Array<Array<object | undefined>>;
-    _traverse(node?: object, walker?: object): object | null;
-    _collectNthChild(anb: {
-        a: number;
-        b: number;
-        reverse?: boolean;
-        selector?: object;
-    }, node: object): Set<object>;
-    _collectNthOfType(anb: {
-        a: number;
-        b: number;
-        reverse?: boolean;
-    }, node: object): Set<object>;
-    _matchAnPlusB(ast: object, node: object, nthName: string): Set<object>;
-    _matchPseudoElementSelector(astName: string, opt?: {
-        forgive?: boolean;
-    }): void;
-    _matchDirectionPseudoClass(ast: object, node: object): object | null;
-    _matchLanguagePseudoClass(ast: object, node: object): object | null;
-    _matchHasPseudoFunc(leaves: Array<object>, node: object): boolean;
-    _matchLogicalPseudoFunc(astData: object, node: object): object | null;
-    _matchPseudoClassSelector(ast: object, node: object, opt?: {
-        forgive?: boolean;
-    }): Set<object>;
-    _matchAttributeSelector(ast: object, node: object): object | null;
-    _matchClassSelector(ast: object, node: object): object | null;
-    _matchIDSelector(ast: object, node: object): object | null;
-    _matchTypeSelector(ast: object, node: object, opt?: {
-        forgive?: boolean;
-    }): object | null;
-    _matchShadowHostPseudoClass(ast: object, node: object): object | null;
-    _matchSelector(ast: object, node: object, opt?: object): Set<object>;
-    _matchLeaves(leaves: Array<object>, node: object, opt?: object): boolean;
-    _findDescendantNodes(leaves: Array<object>, baseNode: object): object;
-    _matchCombinator(twig: object, node: object, opt?: {
-        dir?: string;
-        forgive?: boolean;
-    }): Set<object>;
-    _findNode(leaves: Array<object>, opt?: {
-        node?: object;
-        tree?: object;
-    }): object | null;
-    _findEntryNodes(twig: object, targetType: string): object;
-    _getEntryTwig(branch: Array<object>, targetType: string): object;
-    _collectNodes(targetType: string): Array<Array<object | undefined>>;
-    _sortNodes(nodes: Array<object> | Set<object>): Array<object | undefined>;
-    _matchNodes(targetType: string): Set<object>;
-    _find(targetType: string): Set<object>;
-    matches(): boolean;
-    closest(): object | null;
-    querySelector(): object | null;
-    querySelectorAll(): Array<object | undefined>;
-    #private;
-}
--- a/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/js/parser.d.ts
+++ b/capabilities/testdrive-jsui/node_modules/@asamuzakjp/dom-selector/types/js/parser.d.ts
@@ -1,5 +0,0 @@
-export function unescapeSelector(selector?: string): string | null;
-export function preprocess(...args: any[]): string;
-export function parseSelector(selector: string): object;
-export function walkAST(ast?: object): Array<object | undefined>;
-export { generate as generateCSS } from "css-tree";
--- a/capabilities/testdrive-jsui/node_modules/@babel/code-frame/LICENSE
+++ b/capabilities/testdrive-jsui/node_modules/@babel/code-frame/LICENSE
@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) 2014-present Sebastian McKenzie and other contributors
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/capabilities/testdrive-jsui/node_modules/@babel/code-frame/README.md
+++ b/capabilities/testdrive-jsui/node_modules/@babel/code-frame/README.md
@@ -1,19 +0,0 @@
-# @babel/code-frame
-
-> Generate errors that contain a code frame that point to source locations.
-
-See our website [@babel/code-frame](https://babeljs.io/docs/babel-code-frame) for more information.
-
-## Install
-
-Using npm:
-
-```sh
-npm install --save-dev @babel/code-frame
-```
-
-or using yarn:
-
-```sh
-yarn add @babel/code-frame --dev
-```
--- a/capabilities/testdrive-jsui/node_modules/@babel/code-frame/package.json
+++ b/capabilities/testdrive-jsui/node_modules/@babel/code-frame/package.json
@@ -1,31 +0,0 @@
-{
-  "name": "@babel/code-frame",
-  "version": "7.27.1",
-  "description": "Generate errors that contain a code frame that point to source locations.",
-  "author": "The Babel Team (https://babel.dev/team)",
-  "homepage": "https://babel.dev/docs/en/next/babel-code-frame",
-  "bugs": "https://github.com/babel/babel/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/babel/babel.git",
-    "directory": "packages/babel-code-frame"
-  },
-  "main": "./lib/index.js",
-  "dependencies": {
-    "@babel/helper-validator-identifier": "^7.27.1",
-    "js-tokens": "^4.0.0",
-    "picocolors": "^1.1.1"
-  },
-  "devDependencies": {
-    "import-meta-resolve": "^4.1.0",
-    "strip-ansi": "^4.0.0"
-  },
-  "engines": {
-    "node": ">=6.9.0"
-  },
-  "type": "commonjs"
-}
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/LICENSE
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/LICENSE
@@ -1,22 +0,0 @@
-MIT License
-
-Copyright (c) 2014-present Sebastian McKenzie and other contributors
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/README.md
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/README.md
@@ -1,19 +0,0 @@
-# @babel/compat-data
-
-> The compat-data to determine required Babel plugins
-
-See our website [@babel/compat-data](https://babeljs.io/docs/babel-compat-data) for more information.
-
-## Install
-
-Using npm:
-
-```sh
-npm install --save @babel/compat-data
-```
-
-or using yarn:
-
-```sh
-yarn add @babel/compat-data
-```
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/corejs2-built-ins.js
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/corejs2-built-ins.js
@@ -1,2 +0,0 @@
-// Todo (Babel 8): remove this file as Babel 8 drop support of core-js 2
-module.exports = require("./data/corejs2-built-ins.json");
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/corejs3-shipped-proposals.js
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/corejs3-shipped-proposals.js
@@ -1,2 +0,0 @@
-// Todo (Babel 8): remove this file now that it is included in babel-plugin-polyfill-corejs3
-module.exports = require("./data/corejs3-shipped-proposals.json");
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/corejs2-built-ins.json
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/corejs2-built-ins.json
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/corejs3-shipped-proposals.json
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/corejs3-shipped-proposals.json
@@ -1,5 +0,0 @@
-[
-  "esnext.promise.all-settled",
-  "esnext.string.match-all",
-  "esnext.global-this"
-]
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/native-modules.json
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/native-modules.json
@@ -1,18 +0,0 @@
-{
-  "es6.module": {
-    "chrome": "61",
-    "and_chr": "61",
-    "edge": "16",
-    "firefox": "60",
-    "and_ff": "60",
-    "node": "13.2.0",
-    "opera": "48",
-    "op_mob": "45",
-    "safari": "10.1",
-    "ios": "10.3",
-    "samsung": "8.2",
-    "android": "61",
-    "electron": "2.0",
-    "ios_saf": "10.3"
-  }
-}
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/overlapping-plugins.json
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/overlapping-plugins.json
@@ -1,35 +0,0 @@
-{
-  "transform-async-to-generator": [
-    "bugfix/transform-async-arrows-in-class"
-  ],
-  "transform-parameters": [
-    "bugfix/transform-edge-default-parameters",
-    "bugfix/transform-safari-id-destructuring-collision-in-function-expression"
-  ],
-  "transform-function-name": [
-    "bugfix/transform-edge-function-name"
-  ],
-  "transform-block-scoping": [
-    "bugfix/transform-safari-block-shadowing",
-    "bugfix/transform-safari-for-shadowing"
-  ],
-  "transform-template-literals": [
-    "bugfix/transform-tagged-template-caching"
-  ],
-  "transform-optional-chaining": [
-    "bugfix/transform-v8-spread-parameters-in-optional-chaining"
-  ],
-  "proposal-optional-chaining": [
-    "bugfix/transform-v8-spread-parameters-in-optional-chaining"
-  ],
-  "transform-class-properties": [
-    "bugfix/transform-v8-static-class-fields-redefine-readonly",
-    "bugfix/transform-firefox-class-in-computed-class-key",
-    "bugfix/transform-safari-class-field-initializer-scope"
-  ],
-  "proposal-class-properties": [
-    "bugfix/transform-v8-static-class-fields-redefine-readonly",
-    "bugfix/transform-firefox-class-in-computed-class-key",
-    "bugfix/transform-safari-class-field-initializer-scope"
-  ]
-}
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/plugin-bugfixes.json
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/plugin-bugfixes.json
@@ -1,203 +0,0 @@
-{
-  "bugfix/transform-async-arrows-in-class": {
-    "chrome": "55",
-    "opera": "42",
-    "edge": "15",
-    "firefox": "52",
-    "safari": "11",
-    "node": "7.6",
-    "deno": "1",
-    "ios": "11",
-    "samsung": "6",
-    "opera_mobile": "42",
-    "electron": "1.6"
-  },
-  "bugfix/transform-edge-default-parameters": {
-    "chrome": "49",
-    "opera": "36",
-    "edge": "18",
-    "firefox": "52",
-    "safari": "10",
-    "node": "6",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "36",
-    "electron": "0.37"
-  },
-  "bugfix/transform-edge-function-name": {
-    "chrome": "51",
-    "opera": "38",
-    "edge": "79",
-    "firefox": "53",
-    "safari": "10",
-    "node": "6.5",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "41",
-    "electron": "1.2"
-  },
-  "bugfix/transform-safari-block-shadowing": {
-    "chrome": "49",
-    "opera": "36",
-    "edge": "12",
-    "firefox": "44",
-    "safari": "11",
-    "node": "6",
-    "deno": "1",
-    "ie": "11",
-    "ios": "11",
-    "samsung": "5",
-    "opera_mobile": "36",
-    "electron": "0.37"
-  },
-  "bugfix/transform-safari-for-shadowing": {
-    "chrome": "49",
-    "opera": "36",
-    "edge": "12",
-    "firefox": "4",
-    "safari": "11",
-    "node": "6",
-    "deno": "1",
-    "ie": "11",
-    "ios": "11",
-    "samsung": "5",
-    "rhino": "1.7.13",
-    "opera_mobile": "36",
-    "electron": "0.37"
-  },
-  "bugfix/transform-safari-id-destructuring-collision-in-function-expression": {
-    "chrome": "49",
-    "opera": "36",
-    "edge": "14",
-    "firefox": "2",
-    "safari": "16.3",
-    "node": "6",
-    "deno": "1",
-    "ios": "16.3",
-    "samsung": "5",
-    "opera_mobile": "36",
-    "electron": "0.37"
-  },
-  "bugfix/transform-tagged-template-caching": {
-    "chrome": "41",
-    "opera": "28",
-    "edge": "12",
-    "firefox": "34",
-    "safari": "13",
-    "node": "4",
-    "deno": "1",
-    "ios": "13",
-    "samsung": "3.4",
-    "rhino": "1.7.14",
-    "opera_mobile": "28",
-    "electron": "0.21"
-  },
-  "bugfix/transform-v8-spread-parameters-in-optional-chaining": {
-    "chrome": "91",
-    "opera": "77",
-    "edge": "91",
-    "firefox": "74",
-    "safari": "13.1",
-    "node": "16.9",
-    "deno": "1.9",
-    "ios": "13.4",
-    "samsung": "16",
-    "opera_mobile": "64",
-    "electron": "13.0"
-  },
-  "transform-optional-chaining": {
-    "chrome": "80",
-    "opera": "67",
-    "edge": "80",
-    "firefox": "74",
-    "safari": "13.1",
-    "node": "14",
-    "deno": "1",
-    "ios": "13.4",
-    "samsung": "13",
-    "rhino": "1.8",
-    "opera_mobile": "57",
-    "electron": "8.0"
-  },
-  "proposal-optional-chaining": {
-    "chrome": "80",
-    "opera": "67",
-    "edge": "80",
-    "firefox": "74",
-    "safari": "13.1",
-    "node": "14",
-    "deno": "1",
-    "ios": "13.4",
-    "samsung": "13",
-    "rhino": "1.8",
-    "opera_mobile": "57",
-    "electron": "8.0"
-  },
-  "transform-parameters": {
-    "chrome": "49",
-    "opera": "36",
-    "edge": "15",
-    "firefox": "52",
-    "safari": "10",
-    "node": "6",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "36",
-    "electron": "0.37"
-  },
-  "transform-async-to-generator": {
-    "chrome": "55",
-    "opera": "42",
-    "edge": "15",
-    "firefox": "52",
-    "safari": "10.1",
-    "node": "7.6",
-    "deno": "1",
-    "ios": "10.3",
-    "samsung": "6",
-    "opera_mobile": "42",
-    "electron": "1.6"
-  },
-  "transform-template-literals": {
-    "chrome": "41",
-    "opera": "28",
-    "edge": "13",
-    "firefox": "34",
-    "safari": "9",
-    "node": "4",
-    "deno": "1",
-    "ios": "9",
-    "samsung": "3.4",
-    "opera_mobile": "28",
-    "electron": "0.21"
-  },
-  "transform-function-name": {
-    "chrome": "51",
-    "opera": "38",
-    "edge": "14",
-    "firefox": "53",
-    "safari": "10",
-    "node": "6.5",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "41",
-    "electron": "1.2"
-  },
-  "transform-block-scoping": {
-    "chrome": "50",
-    "opera": "37",
-    "edge": "14",
-    "firefox": "53",
-    "safari": "10",
-    "node": "6",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "37",
-    "electron": "1.1"
-  }
-}
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/plugins.json
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/data/plugins.json
@@ -1,838 +0,0 @@
-{
-  "transform-explicit-resource-management": {
-    "chrome": "134",
-    "edge": "134",
-    "firefox": "141",
-    "node": "24",
-    "electron": "35.0"
-  },
-  "transform-duplicate-named-capturing-groups-regex": {
-    "chrome": "126",
-    "opera": "112",
-    "edge": "126",
-    "firefox": "129",
-    "safari": "17.4",
-    "node": "23",
-    "ios": "17.4",
-    "electron": "31.0"
-  },
-  "transform-regexp-modifiers": {
-    "chrome": "125",
-    "opera": "111",
-    "edge": "125",
-    "firefox": "132",
-    "node": "23",
-    "samsung": "27",
-    "electron": "31.0"
-  },
-  "transform-unicode-sets-regex": {
-    "chrome": "112",
-    "opera": "98",
-    "edge": "112",
-    "firefox": "116",
-    "safari": "17",
-    "node": "20",
-    "deno": "1.32",
-    "ios": "17",
-    "samsung": "23",
-    "opera_mobile": "75",
-    "electron": "24.0"
-  },
-  "bugfix/transform-v8-static-class-fields-redefine-readonly": {
-    "chrome": "98",
-    "opera": "84",
-    "edge": "98",
-    "firefox": "75",
-    "safari": "15",
-    "node": "12",
-    "deno": "1.18",
-    "ios": "15",
-    "samsung": "11",
-    "opera_mobile": "52",
-    "electron": "17.0"
-  },
-  "bugfix/transform-firefox-class-in-computed-class-key": {
-    "chrome": "74",
-    "opera": "62",
-    "edge": "79",
-    "firefox": "126",
-    "safari": "16",
-    "node": "12",
-    "deno": "1",
-    "ios": "16",
-    "samsung": "11",
-    "opera_mobile": "53",
-    "electron": "6.0"
-  },
-  "bugfix/transform-safari-class-field-initializer-scope": {
-    "chrome": "74",
-    "opera": "62",
-    "edge": "79",
-    "firefox": "69",
-    "safari": "16",
-    "node": "12",
-    "deno": "1",
-    "ios": "16",
-    "samsung": "11",
-    "opera_mobile": "53",
-    "electron": "6.0"
-  },
-  "transform-class-static-block": {
-    "chrome": "94",
-    "opera": "80",
-    "edge": "94",
-    "firefox": "93",
-    "safari": "16.4",
-    "node": "16.11",
-    "deno": "1.14",
-    "ios": "16.4",
-    "samsung": "17",
-    "opera_mobile": "66",
-    "electron": "15.0"
-  },
-  "proposal-class-static-block": {
-    "chrome": "94",
-    "opera": "80",
-    "edge": "94",
-    "firefox": "93",
-    "safari": "16.4",
-    "node": "16.11",
-    "deno": "1.14",
-    "ios": "16.4",
-    "samsung": "17",
-    "opera_mobile": "66",
-    "electron": "15.0"
-  },
-  "transform-private-property-in-object": {
-    "chrome": "91",
-    "opera": "77",
-    "edge": "91",
-    "firefox": "90",
-    "safari": "15",
-    "node": "16.9",
-    "deno": "1.9",
-    "ios": "15",
-    "samsung": "16",
-    "opera_mobile": "64",
-    "electron": "13.0"
-  },
-  "proposal-private-property-in-object": {
-    "chrome": "91",
-    "opera": "77",
-    "edge": "91",
-    "firefox": "90",
-    "safari": "15",
-    "node": "16.9",
-    "deno": "1.9",
-    "ios": "15",
-    "samsung": "16",
-    "opera_mobile": "64",
-    "electron": "13.0"
-  },
-  "transform-class-properties": {
-    "chrome": "74",
-    "opera": "62",
-    "edge": "79",
-    "firefox": "90",
-    "safari": "14.1",
-    "node": "12",
-    "deno": "1",
-    "ios": "14.5",
-    "samsung": "11",
-    "opera_mobile": "53",
-    "electron": "6.0"
-  },
-  "proposal-class-properties": {
-    "chrome": "74",
-    "opera": "62",
-    "edge": "79",
-    "firefox": "90",
-    "safari": "14.1",
-    "node": "12",
-    "deno": "1",
-    "ios": "14.5",
-    "samsung": "11",
-    "opera_mobile": "53",
-    "electron": "6.0"
-  },
-  "transform-private-methods": {
-    "chrome": "84",
-    "opera": "70",
-    "edge": "84",
-    "firefox": "90",
-    "safari": "15",
-    "node": "14.6",
-    "deno": "1",
-    "ios": "15",
-    "samsung": "14",
-    "opera_mobile": "60",
-    "electron": "10.0"
-  },
-  "proposal-private-methods": {
-    "chrome": "84",
-    "opera": "70",
-    "edge": "84",
-    "firefox": "90",
-    "safari": "15",
-    "node": "14.6",
-    "deno": "1",
-    "ios": "15",
-    "samsung": "14",
-    "opera_mobile": "60",
-    "electron": "10.0"
-  },
-  "transform-numeric-separator": {
-    "chrome": "75",
-    "opera": "62",
-    "edge": "79",
-    "firefox": "70",
-    "safari": "13",
-    "node": "12.5",
-    "deno": "1",
-    "ios": "13",
-    "samsung": "11",
-    "rhino": "1.7.14",
-    "opera_mobile": "54",
-    "electron": "6.0"
-  },
-  "proposal-numeric-separator": {
-    "chrome": "75",
-    "opera": "62",
-    "edge": "79",
-    "firefox": "70",
-    "safari": "13",
-    "node": "12.5",
-    "deno": "1",
-    "ios": "13",
-    "samsung": "11",
-    "rhino": "1.7.14",
-    "opera_mobile": "54",
-    "electron": "6.0"
-  },
-  "transform-logical-assignment-operators": {
-    "chrome": "85",
-    "opera": "71",
-    "edge": "85",
-    "firefox": "79",
-    "safari": "14",
-    "node": "15",
-    "deno": "1.2",
-    "ios": "14",
-    "samsung": "14",
-    "opera_mobile": "60",
-    "electron": "10.0"
-  },
-  "proposal-logical-assignment-operators": {
-    "chrome": "85",
-    "opera": "71",
-    "edge": "85",
-    "firefox": "79",
-    "safari": "14",
-    "node": "15",
-    "deno": "1.2",
-    "ios": "14",
-    "samsung": "14",
-    "opera_mobile": "60",
-    "electron": "10.0"
-  },
-  "transform-nullish-coalescing-operator": {
-    "chrome": "80",
-    "opera": "67",
-    "edge": "80",
-    "firefox": "72",
-    "safari": "13.1",
-    "node": "14",
-    "deno": "1",
-    "ios": "13.4",
-    "samsung": "13",
-    "rhino": "1.8",
-    "opera_mobile": "57",
-    "electron": "8.0"
-  },
-  "proposal-nullish-coalescing-operator": {
-    "chrome": "80",
-    "opera": "67",
-    "edge": "80",
-    "firefox": "72",
-    "safari": "13.1",
-    "node": "14",
-    "deno": "1",
-    "ios": "13.4",
-    "samsung": "13",
-    "rhino": "1.8",
-    "opera_mobile": "57",
-    "electron": "8.0"
-  },
-  "transform-optional-chaining": {
-    "chrome": "91",
-    "opera": "77",
-    "edge": "91",
-    "firefox": "74",
-    "safari": "13.1",
-    "node": "16.9",
-    "deno": "1.9",
-    "ios": "13.4",
-    "samsung": "16",
-    "opera_mobile": "64",
-    "electron": "13.0"
-  },
-  "proposal-optional-chaining": {
-    "chrome": "91",
-    "opera": "77",
-    "edge": "91",
-    "firefox": "74",
-    "safari": "13.1",
-    "node": "16.9",
-    "deno": "1.9",
-    "ios": "13.4",
-    "samsung": "16",
-    "opera_mobile": "64",
-    "electron": "13.0"
-  },
-  "transform-json-strings": {
-    "chrome": "66",
-    "opera": "53",
-    "edge": "79",
-    "firefox": "62",
-    "safari": "12",
-    "node": "10",
-    "deno": "1",
-    "ios": "12",
-    "samsung": "9",
-    "rhino": "1.7.14",
-    "opera_mobile": "47",
-    "electron": "3.0"
-  },
-  "proposal-json-strings": {
-    "chrome": "66",
-    "opera": "53",
-    "edge": "79",
-    "firefox": "62",
-    "safari": "12",
-    "node": "10",
-    "deno": "1",
-    "ios": "12",
-    "samsung": "9",
-    "rhino": "1.7.14",
-    "opera_mobile": "47",
-    "electron": "3.0"
-  },
-  "transform-optional-catch-binding": {
-    "chrome": "66",
-    "opera": "53",
-    "edge": "79",
-    "firefox": "58",
-    "safari": "11.1",
-    "node": "10",
-    "deno": "1",
-    "ios": "11.3",
-    "samsung": "9",
-    "opera_mobile": "47",
-    "electron": "3.0"
-  },
-  "proposal-optional-catch-binding": {
-    "chrome": "66",
-    "opera": "53",
-    "edge": "79",
-    "firefox": "58",
-    "safari": "11.1",
-    "node": "10",
-    "deno": "1",
-    "ios": "11.3",
-    "samsung": "9",
-    "opera_mobile": "47",
-    "electron": "3.0"
-  },
-  "transform-parameters": {
-    "chrome": "49",
-    "opera": "36",
-    "edge": "18",
-    "firefox": "52",
-    "safari": "16.3",
-    "node": "6",
-    "deno": "1",
-    "ios": "16.3",
-    "samsung": "5",
-    "opera_mobile": "36",
-    "electron": "0.37"
-  },
-  "transform-async-generator-functions": {
-    "chrome": "63",
-    "opera": "50",
-    "edge": "79",
-    "firefox": "57",
-    "safari": "12",
-    "node": "10",
-    "deno": "1",
-    "ios": "12",
-    "samsung": "8",
-    "opera_mobile": "46",
-    "electron": "3.0"
-  },
-  "proposal-async-generator-functions": {
-    "chrome": "63",
-    "opera": "50",
-    "edge": "79",
-    "firefox": "57",
-    "safari": "12",
-    "node": "10",
-    "deno": "1",
-    "ios": "12",
-    "samsung": "8",
-    "opera_mobile": "46",
-    "electron": "3.0"
-  },
-  "transform-object-rest-spread": {
-    "chrome": "60",
-    "opera": "47",
-    "edge": "79",
-    "firefox": "55",
-    "safari": "11.1",
-    "node": "8.3",
-    "deno": "1",
-    "ios": "11.3",
-    "samsung": "8",
-    "opera_mobile": "44",
-    "electron": "2.0"
-  },
-  "proposal-object-rest-spread": {
-    "chrome": "60",
-    "opera": "47",
-    "edge": "79",
-    "firefox": "55",
-    "safari": "11.1",
-    "node": "8.3",
-    "deno": "1",
-    "ios": "11.3",
-    "samsung": "8",
-    "opera_mobile": "44",
-    "electron": "2.0"
-  },
-  "transform-dotall-regex": {
-    "chrome": "62",
-    "opera": "49",
-    "edge": "79",
-    "firefox": "78",
-    "safari": "11.1",
-    "node": "8.10",
-    "deno": "1",
-    "ios": "11.3",
-    "samsung": "8",
-    "rhino": "1.7.15",
-    "opera_mobile": "46",
-    "electron": "3.0"
-  },
-  "transform-unicode-property-regex": {
-    "chrome": "64",
-    "opera": "51",
-    "edge": "79",
-    "firefox": "78",
-    "safari": "11.1",
-    "node": "10",
-    "deno": "1",
-    "ios": "11.3",
-    "samsung": "9",
-    "opera_mobile": "47",
-    "electron": "3.0"
-  },
-  "proposal-unicode-property-regex": {
-    "chrome": "64",
-    "opera": "51",
-    "edge": "79",
-    "firefox": "78",
-    "safari": "11.1",
-    "node": "10",
-    "deno": "1",
-    "ios": "11.3",
-    "samsung": "9",
-    "opera_mobile": "47",
-    "electron": "3.0"
-  },
-  "transform-named-capturing-groups-regex": {
-    "chrome": "64",
-    "opera": "51",
-    "edge": "79",
-    "firefox": "78",
-    "safari": "11.1",
-    "node": "10",
-    "deno": "1",
-    "ios": "11.3",
-    "samsung": "9",
-    "opera_mobile": "47",
-    "electron": "3.0"
-  },
-  "transform-async-to-generator": {
-    "chrome": "55",
-    "opera": "42",
-    "edge": "15",
-    "firefox": "52",
-    "safari": "11",
-    "node": "7.6",
-    "deno": "1",
-    "ios": "11",
-    "samsung": "6",
-    "opera_mobile": "42",
-    "electron": "1.6"
-  },
-  "transform-exponentiation-operator": {
-    "chrome": "52",
-    "opera": "39",
-    "edge": "14",
-    "firefox": "52",
-    "safari": "10.1",
-    "node": "7",
-    "deno": "1",
-    "ios": "10.3",
-    "samsung": "6",
-    "rhino": "1.7.14",
-    "opera_mobile": "41",
-    "electron": "1.3"
-  },
-  "transform-template-literals": {
-    "chrome": "41",
-    "opera": "28",
-    "edge": "13",
-    "firefox": "34",
-    "safari": "13",
-    "node": "4",
-    "deno": "1",
-    "ios": "13",
-    "samsung": "3.4",
-    "opera_mobile": "28",
-    "electron": "0.21"
-  },
-  "transform-literals": {
-    "chrome": "44",
-    "opera": "31",
-    "edge": "12",
-    "firefox": "53",
-    "safari": "9",
-    "node": "4",
-    "deno": "1",
-    "ios": "9",
-    "samsung": "4",
-    "rhino": "1.7.15",
-    "opera_mobile": "32",
-    "electron": "0.30"
-  },
-  "transform-function-name": {
-    "chrome": "51",
-    "opera": "38",
-    "edge": "79",
-    "firefox": "53",
-    "safari": "10",
-    "node": "6.5",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "41",
-    "electron": "1.2"
-  },
-  "transform-arrow-functions": {
-    "chrome": "47",
-    "opera": "34",
-    "edge": "13",
-    "firefox": "43",
-    "safari": "10",
-    "node": "6",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "rhino": "1.7.13",
-    "opera_mobile": "34",
-    "electron": "0.36"
-  },
-  "transform-block-scoped-functions": {
-    "chrome": "41",
-    "opera": "28",
-    "edge": "12",
-    "firefox": "46",
-    "safari": "10",
-    "node": "4",
-    "deno": "1",
-    "ie": "11",
-    "ios": "10",
-    "samsung": "3.4",
-    "opera_mobile": "28",
-    "electron": "0.21"
-  },
-  "transform-classes": {
-    "chrome": "46",
-    "opera": "33",
-    "edge": "13",
-    "firefox": "45",
-    "safari": "10",
-    "node": "5",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "33",
-    "electron": "0.36"
-  },
-  "transform-object-super": {
-    "chrome": "46",
-    "opera": "33",
-    "edge": "13",
-    "firefox": "45",
-    "safari": "10",
-    "node": "5",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "33",
-    "electron": "0.36"
-  },
-  "transform-shorthand-properties": {
-    "chrome": "43",
-    "opera": "30",
-    "edge": "12",
-    "firefox": "33",
-    "safari": "9",
-    "node": "4",
-    "deno": "1",
-    "ios": "9",
-    "samsung": "4",
-    "rhino": "1.7.14",
-    "opera_mobile": "30",
-    "electron": "0.27"
-  },
-  "transform-duplicate-keys": {
-    "chrome": "42",
-    "opera": "29",
-    "edge": "12",
-    "firefox": "34",
-    "safari": "9",
-    "node": "4",
-    "deno": "1",
-    "ios": "9",
-    "samsung": "3.4",
-    "opera_mobile": "29",
-    "electron": "0.25"
-  },
-  "transform-computed-properties": {
-    "chrome": "44",
-    "opera": "31",
-    "edge": "12",
-    "firefox": "34",
-    "safari": "7.1",
-    "node": "4",
-    "deno": "1",
-    "ios": "8",
-    "samsung": "4",
-    "rhino": "1.8",
-    "opera_mobile": "32",
-    "electron": "0.30"
-  },
-  "transform-for-of": {
-    "chrome": "51",
-    "opera": "38",
-    "edge": "15",
-    "firefox": "53",
-    "safari": "10",
-    "node": "6.5",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "41",
-    "electron": "1.2"
-  },
-  "transform-sticky-regex": {
-    "chrome": "49",
-    "opera": "36",
-    "edge": "13",
-    "firefox": "3",
-    "safari": "10",
-    "node": "6",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "rhino": "1.7.15",
-    "opera_mobile": "36",
-    "electron": "0.37"
-  },
-  "transform-unicode-escapes": {
-    "chrome": "44",
-    "opera": "31",
-    "edge": "12",
-    "firefox": "53",
-    "safari": "9",
-    "node": "4",
-    "deno": "1",
-    "ios": "9",
-    "samsung": "4",
-    "rhino": "1.7.15",
-    "opera_mobile": "32",
-    "electron": "0.30"
-  },
-  "transform-unicode-regex": {
-    "chrome": "50",
-    "opera": "37",
-    "edge": "13",
-    "firefox": "46",
-    "safari": "12",
-    "node": "6",
-    "deno": "1",
-    "ios": "12",
-    "samsung": "5",
-    "opera_mobile": "37",
-    "electron": "1.1"
-  },
-  "transform-spread": {
-    "chrome": "46",
-    "opera": "33",
-    "edge": "13",
-    "firefox": "45",
-    "safari": "10",
-    "node": "5",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "33",
-    "electron": "0.36"
-  },
-  "transform-destructuring": {
-    "chrome": "51",
-    "opera": "38",
-    "edge": "15",
-    "firefox": "53",
-    "safari": "10",
-    "node": "6.5",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "41",
-    "electron": "1.2"
-  },
-  "transform-block-scoping": {
-    "chrome": "50",
-    "opera": "37",
-    "edge": "14",
-    "firefox": "53",
-    "safari": "11",
-    "node": "6",
-    "deno": "1",
-    "ios": "11",
-    "samsung": "5",
-    "opera_mobile": "37",
-    "electron": "1.1"
-  },
-  "transform-typeof-symbol": {
-    "chrome": "48",
-    "opera": "35",
-    "edge": "12",
-    "firefox": "36",
-    "safari": "9",
-    "node": "6",
-    "deno": "1",
-    "ios": "9",
-    "samsung": "5",
-    "rhino": "1.8",
-    "opera_mobile": "35",
-    "electron": "0.37"
-  },
-  "transform-new-target": {
-    "chrome": "46",
-    "opera": "33",
-    "edge": "14",
-    "firefox": "41",
-    "safari": "10",
-    "node": "5",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "33",
-    "electron": "0.36"
-  },
-  "transform-regenerator": {
-    "chrome": "50",
-    "opera": "37",
-    "edge": "13",
-    "firefox": "53",
-    "safari": "10",
-    "node": "6",
-    "deno": "1",
-    "ios": "10",
-    "samsung": "5",
-    "opera_mobile": "37",
-    "electron": "1.1"
-  },
-  "transform-member-expression-literals": {
-    "chrome": "7",
-    "opera": "12",
-    "edge": "12",
-    "firefox": "2",
-    "safari": "5.1",
-    "node": "0.4",
-    "deno": "1",
-    "ie": "9",
-    "android": "4",
-    "ios": "6",
-    "phantom": "1.9",
-    "samsung": "1",
-    "rhino": "1.7.13",
-    "opera_mobile": "12",
-    "electron": "0.20"
-  },
-  "transform-property-literals": {
-    "chrome": "7",
-    "opera": "12",
-    "edge": "12",
-    "firefox": "2",
-    "safari": "5.1",
-    "node": "0.4",
-    "deno": "1",
-    "ie": "9",
-    "android": "4",
-    "ios": "6",
-    "phantom": "1.9",
-    "samsung": "1",
-    "rhino": "1.7.13",
-    "opera_mobile": "12",
-    "electron": "0.20"
-  },
-  "transform-reserved-words": {
-    "chrome": "13",
-    "opera": "10.50",
-    "edge": "12",
-    "firefox": "2",
-    "safari": "3.1",
-    "node": "0.6",
-    "deno": "1",
-    "ie": "9",
-    "android": "4.4",
-    "ios": "6",
-    "phantom": "1.9",
-    "samsung": "1",
-    "rhino": "1.7.13",
-    "opera_mobile": "10.1",
-    "electron": "0.20"
-  },
-  "transform-export-namespace-from": {
-    "chrome": "72",
-    "deno": "1.0",
-    "edge": "79",
-    "firefox": "80",
-    "node": "13.2.0",
-    "opera": "60",
-    "opera_mobile": "51",
-    "safari": "14.1",
-    "ios": "14.5",
-    "samsung": "11.0",
-    "android": "72",
-    "electron": "5.0"
-  },
-  "proposal-export-namespace-from": {
-    "chrome": "72",
-    "deno": "1.0",
-    "edge": "79",
-    "firefox": "80",
-    "node": "13.2.0",
-    "opera": "60",
-    "opera_mobile": "51",
-    "safari": "14.1",
-    "ios": "14.5",
-    "samsung": "11.0",
-    "android": "72",
-    "electron": "5.0"
-  }
-}
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/native-modules.js
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/native-modules.js
@@ -1,2 +0,0 @@
-// Todo (Babel 8): remove this file, in Babel 8 users import the .json directly
-module.exports = require("./data/native-modules.json");
--- a/capabilities/testdrive-jsui/node_modules/@babel/compat-data/overlapping-plugins.js
+++ b/capabilities/testdrive-jsui/node_modules/@babel/compat-data/overlapping-plugins.js
@@ -1,2 +0,0 @@
-// Todo (Babel 8): remove this file, in Babel 8 users import the .json directly
-module.exports = require("./data/overlapping-plugins.json");
--- a/Show More
+++ b/Show More