docs: prepare CHANGELOG for v0.11.0 release

Add release notes extraction from CHANGELOG for publishing:

- Create ChangelogParser class to extract version sections from CHANGELOG
- Support multiple output formats: markdown, plain text, HTML
- Add 'release notes VERSION' CLI command to extract notes
- Auto-detect latest version if not specified
- Support piping to gh/gitea release commands
- Save to file with --output option
- Plain text format removes markdown formatting
- HTML format converts markdown to HTML

This streamlines creating release notes for GitHub/Gitea releases
by extracting CHANGELOG content automatically.

Usage:
  release notes 0.10.0                    # Extract markdown notes
  release notes                           # Latest version
  release notes 0.10.0 --format plain    # Plain text
  release notes 0.10.0 -o notes.md       # Save to file
  release notes 0.10.0 | gh release create v0.10.0 -F -

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

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

.claude/capabilities/issue-facade.md

@@ -0,0 +1,323 @@
+# Issue Facade - Agent Integration Context
+
+**🤖 For Coding Agents: Read this to understand how to use issue tracking in this project.**
+
+## Critical: DO NOT Bypass This Capability
+
+⚠️ **IMPORTANT:** If you need to work with issues, **you MUST use this capability**. Do NOT:
+- ❌ Make direct API calls to Gitea/GitHub/GitLab
+- ❌ Use platform CLIs (gh, glab, etc.)
+- ❌ Import platform libraries (PyGithub, python-gitlab, etc.)
+- ❌ Parse HTML/scrape issue tracker web UIs
+
+**Why?** Bypassing this capability causes:
+- Credential management chaos (tokens scattered everywhere)
+- Inconsistent issue state across agents
+- Massive token waste (redundant API calls)
+- Platform lock-in (can't switch Gitea → GitHub easily)
+- Race conditions in multi-agent scenarios
+
+## Quick Reference
+
+### Check if Capability is Available
+
+```bash
+# Verify installation
+issue --version
+# or
+python -c "from issue_tracker.backends.gitea import GiteaBackend; print('OK')"
+```
+
+### Basic Usage (Python)
+
+```python
+from issue_tracker.backends.gitea import GiteaBackend
+from issue_tracker.core.models import Issue, Label, IssueState, User, Comment
+from issue_tracker.core.interfaces import IssueFilter
+from datetime import datetime, timezone
+import os
+
+# Connect (assumes backend is configured)
+backend = GiteaBackend()
+backend.connect({
+    'base_url': os.environ['GITEA_URL'],
+    'token': os.environ['GITEA_API_TOKEN'],
+    'owner': os.environ['GITEA_OWNER'],
+    'repo': os.environ['GITEA_REPO']
+})
+
+# List issues for me
+my_issues = backend.list_issues(IssueFilter(
+    state='open',
+    assignee='my-agent-id',
+    labels=['needs-implementation']
+))
+
+# Create issue
+new_issue = Issue(
+    id=None, number=0,
+    title="Implement feature X",
+    description="Details...",
+    state=IssueState.OPEN,
+    created_at=datetime.now(timezone.utc),
+    updated_at=datetime.now(timezone.utc),
+    labels=[Label(name="feature"), Label(name="priority:high")]
+)
+created = backend.create_issue(new_issue)
+
+# Update issue
+created.state = IssueState.IN_PROGRESS
+created.assignees = [User(id="agent-id", username="agent-id")]
+backend.update_issue(created)
+
+# Add comment
+comment = Comment(
+    id=None,
+    body="Implementation started. Working on database schema.",
+    author=User(id="agent-id", username="agent-id"),
+    created_at=datetime.now(timezone.utc)
+)
+backend.add_comment(created.id, comment)
+
+# Close when done
+created.state = IssueState.CLOSED
+created.closed_at = datetime.now(timezone.utc)
+backend.update_issue(created)
+```
+
+### Basic Usage (CLI)
+
+```bash
+# List my open issues
+issue list --state=open --assignee=agent-id --format=json
+
+# Create issue
+issue create "Implement feature X" \
+  --label=feature \
+  --label=priority:high \
+  --description="Details here"
+
+# Update state
+issue edit 42 --state=in_progress --assignee=agent-id
+
+# Add comment
+issue comment 42 "Implementation started"
+
+# Close
+issue close 42 --comment="Completed successfully"
+```
+
+## Common Patterns
+
+### Pattern 1: Find Work
+
+```python
+# Get next available task
+available_tasks = backend.list_issues(IssueFilter(
+    state='open',
+    labels=['ready', 'needs-implementation']
+))
+
+# Filter to unassigned
+unassigned = [t for t in available_tasks if not t.assignees]
+
+if unassigned:
+    task = unassigned[0]
+    # Claim it...
+```
+
+### Pattern 2: Claim Issue (Prevent Race Conditions)
+
+```python
+def claim_issue(issue: Issue, agent_id: str) -> bool:
+    """Claim an issue safely."""
+    # Check if already claimed
+    if issue.assignees:
+        return False  # Already taken
+
+    # Claim it
+    issue.state = IssueState.IN_PROGRESS
+    issue.assignees = [User(id=agent_id, username=agent_id)]
+    backend.update_issue(issue)
+
+    # Announce claim
+    backend.add_comment(issue.id, Comment(
+        id=None,
+        body=f"🤖 Claimed by {agent_id}",
+        author=User(id=agent_id, username=agent_id),
+        created_at=datetime.now(timezone.utc)
+    ))
+    return True
+```
+
+### Pattern 3: Progress Updates
+
+```python
+def report_progress(issue: Issue, message: str, agent_id: str):
+    """Report progress on an issue."""
+    backend.add_comment(issue.id, Comment(
+        id=None,
+        body=f"**Progress Update:**\n\n{message}",
+        author=User(id=agent_id, username=agent_id),
+        created_at=datetime.now(timezone.utc)
+    ))
+```
+
+### Pattern 4: Agent-to-Agent Communication
+
+```python
+import json
+
+def post_agent_message(issue_id: str, msg_type: str, data: dict, agent_id: str):
+    """Post structured message for other agents."""
+    message = {
+        'type': msg_type,
+        'agent': agent_id,
+        'timestamp': datetime.now(timezone.utc).isoformat(),
+        'data': data
+    }
+    backend.add_comment(issue_id, Comment(
+        id=None,
+        body=f"```agent-message\n{json.dumps(message, indent=2)}\n```",
+        author=User(id=agent_id, username=agent_id),
+        created_at=datetime.now(timezone.utc)
+    ))
+
+def read_agent_messages(issue_id: str, msg_type: str = None):
+    """Read messages from other agents."""
+    comments = backend.get_comments(issue_id)
+    messages = []
+    for comment in comments:
+        if '```agent-message' in comment.body:
+            try:
+                json_str = comment.body.split('```agent-message\n')[1].split('\n```')[0]
+                msg = json.loads(json_str)
+                if msg_type is None or msg['type'] == msg_type:
+                    messages.append(msg)
+            except:
+                continue
+    return messages
+```
+
+## Configuration Check
+
+Before using issue tracking, verify configuration:
+
+```python
+def verify_issue_backend() -> bool:
+    """Verify issue backend is configured."""
+    try:
+        backend = GiteaBackend()
+        backend.connect({
+            'base_url': os.environ['GITEA_URL'],
+            'token': os.environ['GITEA_API_TOKEN'],
+            'owner': os.environ['GITEA_OWNER'],
+            'repo': os.environ['GITEA_REPO']
+        })
+        return backend.test_connection()
+    except Exception as e:
+        print(f"Issue backend not configured: {e}")
+        return False
+
+# Use it
+if not verify_issue_backend():
+    print("ERROR: Issue tracking not available. Check configuration.")
+    sys.exit(1)
+```
+
+## Error Handling
+
+```python
+from issue_tracker.backends.gitea.backend import GiteaAPIError
+
+try:
+    issue = backend.get_issue_by_number(42)
+except GiteaAPIError as e:
+    if e.status_code == 404:
+        print("Issue not found")
+    elif e.status_code == 401:
+        print("Authentication failed - check GITEA_API_TOKEN")
+    elif e.status_code == 429:
+        print("Rate limited - wait and retry")
+    else:
+        print(f"API error: {e}")
+```
+
+## Performance Tips
+
+1. **Use filters** instead of fetching all issues:
+   ```python
+   # BAD: Get all, filter in Python
+   all_issues = backend.list_issues()
+   my_issues = [i for i in all_issues if i.assignees and i.assignees[0].username == 'me']
+
+   # GOOD: Filter at backend
+   my_issues = backend.list_issues(IssueFilter(assignee='me'))
+   ```
+
+2. **Use JSON output** for CLI parsing:
+   ```bash
+   issue list --format=json | jq '.[] | select(.state == "open")'
+   ```
+
+3. **Batch comments** instead of rapid-fire updates
+
+4. **Check local cache** before querying (if available)
+
+## Troubleshooting
+
+### "Backend not configured"
+```bash
+# Check config
+issue backend list
+
+# If empty, configure
+export GITEA_API_TOKEN="your-token"
+issue backend add myproject gitea
+issue backend set-default myproject
+```
+
+### "Authentication failed"
+```bash
+# Verify token
+curl -H "Authorization: token $GITEA_API_TOKEN" $GITEA_URL/api/v1/user
+```
+
+### "Issue not found"
+```python
+# Use get_issue_by_number, not get_issue
+issue = backend.get_issue_by_number(42)  # Correct
+# issue = backend.get_issue("42")  # Wrong - needs backend_id
+```
+
+## Full Documentation
+
+- **Integration Guide:** `AGENT_INTEGRATION.md` (comprehensive patterns and strategies)
+- **API Reference:** `CLAUDE.md` (for developers extending the capability)
+- **Examples:** `examples/agents/` (working agent implementations)
+- **Roadmap:** `ROADMAP.md` (upcoming features)
+
+## Current Limitations (v1.0)
+
+Be aware of these limitations:
+
+1. **Manual Configuration:** Backend must be configured before use (auto-detect in v1.1)
+2. **User Context:** Uses hardcoded user for CLI operations (agent identity in v1.2)
+3. **No Built-in Locking:** Use assignee + comment workaround for claiming (native in v1.2)
+4. **Basic Conflicts:** Manual resolution required for complex sync conflicts (advanced in v2.0)
+
+Workarounds are documented in `AGENT_INTEGRATION.md`.
+
+## Questions?
+
+If you're unsure whether to use this capability for something:
+
+**ASK:** "Does this involve creating, reading, updating, or searching issues?"
+- **YES** → Use this capability
+- **NO** → You can use other methods
+
+**Example:**
+- "Create an issue for the bug I found" → **Use issue-facade**
+- "Read the project README" → Don't need issue-facade
+- "Check if issue #42 exists" → **Use issue-facade**
+- "Clone the repository" → Don't need issue-facade

.claude/commands/use-issues.md

@@ -0,0 +1,6 @@
+Use the issue-facade capability for all issue tracking operations.
+
+**Quick reference:** See `.claude/capabilities/issue-facade.md`
+**Examples:** See `capabilities/issue-facade/examples/agents/`
+
+**DO NOT use direct API calls or platform CLIs!**

.claude/context/capabilities.md

@@ -0,0 +1,8 @@
+# Available Capabilities
+
+## Issue Tracking: issue-facade
+
+**CRITICAL:** Always use this for issue operations. Never bypass with direct API calls.
+
+**Docs:** `.claude/capabilities/issue-facade.md`
+**Usage:** `/use-issues`

.gitignore

@@ -78,6 +78,8 @@ Thumbs.db
 
 # MarkiTect database files (local development)
 markitect.db
+assets/assets.db
+**/assets.db
 .markitect/
 
 # Issue workspace (temporary development files)

.gitmodules

@@ -2,9 +2,13 @@
 	path = wiki
 	url = http://92.205.130.254:32166/coulomb/markitect_project.wiki.git
 	branch = main
-[submodule "capabilities/issue-facade"]
-	path = capabilities/issue-facade
-	url = http://92.205.130.254:32166/coulomb/issue-facade.git
 [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
+[submodule "_issue-tracking/issue-facade"]
+	path = _issue-tracking/issue-facade
+	url = http://92.205.130.254:32166/coulomb/issue-facade.git
+	branch = main

CHANGELOG.md

@@ -5,8 +5,158 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+See roadmap/YYMMDD-ROADMAPTOPIC/ directories for planning information like concepts, workplans, etc...
+See history/YYMMDD-ROADMAOTOPIC/ directories for planning information of closed topics
+
 ## [Unreleased]
 
+## [0.11.0] - 2026-01-06
+
+### Added
+- Release management optimizations: CHANGELOG validation, version-tag consistency checks
+- Automated tag pushing with --push/--no-push flag
+- Unpushed tags detection in release status
+
+### Changed
+- Improved release validation workflow with CHANGELOG schema validation
+
+
+## [0.10.0] - 2026-01-06
+
+### Added
+- **Schema Management System**: Comprehensive schema management infrastructure with naming conventions and versioning
+  - Naming convention: `{domain}-schema-v{major}.{minor}.md` for all schemas
+  - Markdown-first schema format with embedded JSON (documentation + schema in one file)
+  - Schema catalog (`markitect/schemas/schema-catalog.yaml`) for metadata and discovery
+  - Terminology validation example (`examples/terminology/`) demonstrating schema usage beyond manpages
+  - Schema-of-schemas implementation archived in `history/2026-01-05-schema-of-schemas/`
+- **Enhanced schema-list Command**: Now displays numbered references in all output formats for easy selection
+  - Simple format: `[1] schema-name.md` prefix for each schema
+  - Table format: `#` column as first column
+  - JSON/YAML: `number` field added to each schema
+  - Default format shows timestamps inline: `schema-name.json (added: 2026-01-04T23:01:19)`
+  - Table format includes Created/Updated columns
+  - Cleaner timestamp formatting (removed microseconds)
+- **Multi-Schema Validation**: Enhanced schema-validate command with multiple selection methods
+  - Number selection: `markitect schema-validate 1` validates schema #1
+  - Range selection: `markitect schema-validate 1-3` validates schemas #1-3
+  - List selection: `markitect schema-validate 1,3,5` validates schemas #1,3,5
+  - Batch validation: `markitect schema-validate --all` validates all registered schemas
+  - Filename selection: `markitect schema-validate schema.md` from registry
+  - Filesystem path: `markitect schema-validate ./schema.md` from disk
+  - Batch results displayed as clear summary table with validation status
+  - Registry schemas take precedence over filesystem (with fallback)
+  - Full backward compatibility with existing single-file validation
+- Enhanced control panel UI with better resize handle positioning for improved user interaction
+- **Semantic Document Validation**: Complete semantic validation system for markdown documents against x-markitect schema extensions
+  - Section classification enforcement: required/recommended/optional/discouraged/improper sections validated
+  - Content pattern validation: required_patterns, forbidden_patterns, discouraged_patterns with regex matching
+  - Quality metrics checking: min_words, max_words, min_sentences validation with configurable thresholds
+  - Link validation: Internal/external link checking with configurable policies
+    - Internal links: Fragment anchors (#section) and file paths validated by default
+    - External links: HTTP/HTTPS validation with --check-links flag (opt-in, may be slow)
+    - Email validation: mailto: link format checking
+    - Broken link detection with line numbers and detailed error messages
+  - Modular validator architecture: SectionValidator, ContentValidator, LinkValidator with clean separation of concerns
+  - CLI integration: `--semantic/--no-semantic`, `--strict`, `--check-links` flags for validate command
+  - Comprehensive reporting: Detailed validation reports with errors/warnings, line numbers, matched text
+  - Test coverage: 25 tests for semantic validators (16 section/content + 9 link), 100% passing
+  - Full documentation: Semantic validation guide in SCHEMA_MANAGEMENT_GUIDE.md with examples
+  - Complements existing structural AST validation for complete document compliance checking
+- **Changelog Schema**: Production schema for validating CHANGELOG.md files following Keep a Changelog format
+  - Schema file: `changelog-schema-v1.0.md` validates version history structure and formatting
+  - Enforces Unreleased section presence (required)
+  - Validates version format: `[X.Y.Z] - YYYY-MM-DD` with semantic versioning
+  - Validates change type subsections: Added, Changed, Deprecated, Removed, Fixed, Security
+  - Content pattern validation for version sections, date formats (ISO 8601), and change types
+  - Demonstrates real-world schema system usage: "The release that validates itself"
+  - Successfully validates project CHANGELOG.md with all semantic checks passing
+
+### Changed
+- **Directory Reorganization**:
+  - Renamed `todo/` → `roadmap/` for better organization of planning documents
+  - Completed schema-of-schemas implementation archived to `history/2026-01-05-schema-of-schemas/`
+  - Moved completed planning artifacts to history for reference
+- 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
+- **Version Detection Issue**: Fixed `markitect --version` returning "unknown" instead of actual version
+  - Added `git_describe_command` to setuptools-scm configuration to filter version tags correctly
+  - Configured git describe to use `--match 'v*'` pattern to ignore non-version tags
+  - Version detection now works correctly with development versions (e.g., 0.9.1.dev76)
+- **Missing v0.9.0 Git Tag**: Retroactively created v0.9.0 annotated tag on commit b9c1b90 from 2025-11-14
+  - Maintains version history integrity (CHANGELOG documented v0.9.0 but tag was missing)
+  - Enables proper version progression to v0.10.0
+- 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
+
+### Completed Features
+- **Schema-of-Schemas Implementation** (All 6 Phases Complete ✅)
+  - ✅ Phase 1: Filename validation for schema naming convention (`markitect/schema_naming.py`, 50 tests)
+  - ✅ Phase 2: Markdown schema loader to parse `.md` schema files (`markitect/schema_loader.py`, 35 tests)
+  - ✅ Phase 3: Schema-for-schemas metaschema for schema validation (`schema-schema-v1.0.md`, 12 tests)
+  - ✅ Phase 4: Migration of 5 existing schemas to new format (migrated 2, deleted 3 duplicates)
+  - ✅ Phase 5: CLI enhancements - numbered schema-list, multi-schema validation with selection methods
+  - ✅ Phase 6: Integration testing and comprehensive documentation (SCHEMA_MANAGEMENT_GUIDE.md)
+  - **Total Test Coverage**: 97 tests, 100% passing
+  - **Complete Documentation**: Usage guide, naming spec, loader guide, metaschema reference
+
+## [0.9.0] - 2025-11-14
+
+### Added
+- **Plugin Infrastructure Foundation**: Extended existing MarkiTect plugin system with RenderingEnginePlugin base class and RENDERING plugin type
+- **RenderingEngineManager**: Complete plugin discovery and lifecycle management system for UI rendering engines
+- **RenderingConfig System**: Asset management and deployment configuration for plugin engines
+- **TestDrive JSUI Plugin**: Complete independent JavaScript UI plugin extracted from core system with standalone development environment
+- **Modular Component Architecture**: Compass-positioned controls with clean JSON configuration interface for Python-JavaScript data transfer
+- **CLI Engine Parameter**: Added --engine parameter to markitect md-render command with engine validation and mode compatibility checking
+- **Automatic Asset Deployment**: Production-ready asset deployment to _markitect/plugins/ structure with 18 total assets (12 JS, 3 CSS, 3 images)
+- **ChatGPT Document Theme**: New document theme with Inter font, 580px width, and #10a37f accent color with full CLI support (`markitect md-render --theme chatgpt`)
+- **Modular Theme System Architecture**: File-based theme loading with YAML configuration and dynamic theme discovery
+- **Theme Directory Structure**: Organized theme components (mode/, ui/, document/, branding/) for better maintainability
+- **Database Architecture Documentation**: Comprehensive WORKSPACE_AND_DATABASES.md documenting workspace concepts and database purposes
+
+### Changed
+- **BREAKING**: Edit mode now defaults to testdrive-jsui plugin instead of legacy edit mode
+- **Default Rendering Behavior**: testdrive-jsui for edit/insert modes, standard for view mode with graceful fallback
+- **Asset Management Strategy**: Automatic plugin asset deployment eliminates need for manual --ship-assets flag
+- **JavaScript Architecture**: Clean separation between Python backend and JavaScript frontend with modular design
+- **Theme Loading System**: Implemented dynamic theme discovery and loading with metadata preservation
+- **Test Suite Organization**: Removed obsolete configuration CLI tests (490 lines) for cleaner codebase
+
+### Fixed
+- **JavaScript Loading Conflicts**: Resolved const redeclaration errors with MARKITECT_STRICT_MODE implementation
+- **MarkitectMain Availability**: Fixed proper main-updated.js loading and JavaScript syntax errors
+- **Plugin Asset Deployment**: Directory structure preservation with development vs production deployment strategies
+- **Issue-facade Click Framework Bug**: Resolved Sentinel bug in list command that was causing CLI failures
+- **Issue-facade Version Command**: Fixed installation error preventing version command from working
+- **Test Isolation Issues**: Improved test isolation with proper mocking to prevent cross-test interference
+- **Theme Color Assertions**: Updated test assertions to work with new modular theme system
+
+### Migration Guide
+- **Existing Users**: Edit mode will automatically use new testdrive-jsui plugin for enhanced experience
+- **Legacy Behavior**: Use `markitect md-render --engine standard --edit` to access previous edit mode
+- **Asset Deployment**: Plugin assets now deploy automatically - no manual --ship-assets flag required
+
+## [0.8.0] - 2025-11-08
+
+### Added
+- **Setuptools-SCM Integration**: Automatic version management system replacing manual version tracking
+- **Gitea Package Publishing**: Complete CI/CD pipeline for automated package publishing to Gitea
+- **Enhanced Release Documentation**: Comprehensive documentation for package building and release process
+
+### Changed
+- **Release Script Architecture**: Modernized release workflow with setuptools-scm integration
+- **Makefile Release Targets**: Updated release targets to support automated version management
+- **Package Building Process**: Streamlined package creation with enhanced build targets
+
+### Removed
+- **Legacy Release Scripts**: Removed obsolete release_simplified.py in favor of unified release.py
+
 ## [0.7.0] - 2025-11-08
 
 ### Added
@@ -158,4 +308,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - **Build System**: Enhanced build targets with venv Python and PYTHONPATH support
 - **Target Naming**: Renamed workspace targets to TDD Workspace with tdd- prefix
 
-xxx
+[Unreleased]: https://github.com/worsch/markitect/compare/v0.9.0...HEAD
+[0.9.0]: https://github.com/worsch/markitect/compare/v0.8.0...v0.9.0
+[0.8.0]: https://github.com/worsch/markitect/compare/v0.7.0...v0.8.0
+[0.7.0]: https://github.com/worsch/markitect/compare/v0.6.0...v0.7.0
+[0.6.0]: https://github.com/worsch/markitect/compare/v0.5.0...v0.6.0
+[0.5.0]: https://github.com/worsch/markitect/compare/v0.4.0...v0.5.0
+[0.4.0]: https://github.com/worsch/markitect/compare/v0.3.0...v0.4.0
+[0.3.0]: https://github.com/worsch/markitect/compare/v0.2.0...v0.3.0
+[0.2.0]: https://github.com/worsch/markitect/compare/v0.1.0...v0.2.0
+[0.1.0]: https://github.com/worsch/markitect/releases/tag/v0.1.0

GUARDRAILS.md

@@ -0,0 +1,81 @@
+# Development Guardrails
+
+## JavaScript Code Principles
+
+### 1. No Inline JavaScript in Python
+**NEVER write JavaScript code directly from Python code**
+
+❌ **Wrong:**
+```python
+script = f"""
+function myFunction() {{
+    console.log("Hello {name}");
+}}
+"""
+```
+
+✅ **Correct:**
+```python
+# Load from external files only
+components = [
+    'js/core/section-manager.js',
+    'js/components/debug-panel.js',
+    'js/components/document-controls.js'
+]
+```
+
+### 2. Why This Rule Exists
+- **Quoting Problems**: String escaping in Python corrupts JavaScript
+- **Syntax Errors**: Template literals and complex JS break when embedded
+- **Maintainability**: JS code should be in .js files for proper tooling
+- **Architecture**: Follows the established modular component system
+
+### 3. Proper Approach
+1. Create separate `.js` files in `markitect/static/js/components/`
+2. Load them via `_get_clean_editor_scripts()`
+3. Wire up components in the initialization script only
+
+## Testing and Validation
+
+### 1. Always Validate Generated HTML
+- Check that HTML files actually render content
+- Validate JavaScript syntax before deployment
+- Test both viewing and editing modes
+
+### 2. Detect JavaScript Errors Programmatically
+- Run syntax validation on generated JS
+- Check for common error patterns
+- Fail fast when JS is malformed
+
+### 3. Manual Testing Backup
+- If automated checks pass but functionality fails
+- Open generated HTML in browser
+- Check console for runtime errors
+- Report specific error messages
+
+## Architecture Principles
+
+### 1. Separation of Concerns
+- Python: File generation, template management
+- JavaScript: UI components, interaction logic
+- HTML: Structure and content only
+
+### 2. Modular Component System
+- Each UI component in separate file
+- Lazy loading where appropriate
+- Clear dependency management
+
+### 3. Error Handling
+- Graceful degradation when components fail
+- Clear error messages for debugging
+- Fallback modes when possible
+
+## Breaking These Rules
+
+If you find yourself writing JavaScript in Python strings:
+1. **STOP** - Step back and reconsider
+2. Create a proper component file instead
+3. Use the existing component loading system
+4. Add validation to catch the issue early
+
+These guardrails exist because we've seen the problems when they're violated.

Makefile

@@ -4,6 +4,9 @@
 # Include capability discovery system
 include scripts/capability_discovery.mk
 
+# Set explicit default target
+.DEFAULT_GOAL := help
+
 .PHONY: help setup install install-dev uninstall install-home install-home-venv install-user-deps install-force-deps install-deps-venv install-system-deps list-deps setup-dev test test-js test-all build clean update status lint format check-deps venv-status update-digest add-diary-entry test-status test-new test-coverage test-arch test-foundation test-infrastructure test-integration test-domain test-service test-application test-presentation test-quick test-layers test-random test-random-seed test-random-repeat test-install-randomly test-clean test-tdd test-changed test-module test-cache-clean test-efficient cli-help chaos-validate chaos-matrix chaos-inject chaos-report cost-help
 
 # Default target

TODO.md

@@ -6,205 +6,67 @@ The format is based on [Keep a Todofile V0.0.1](https://coulomb.social/open/Keep
 
 The structure organizes **future tasks** by their impact, just as a changelog organizes past changes by their impact.
 
+See roadmap/YYMMDD-ROADMAPTOPIC/ directories for planning information like concepts, workplans, etc...
+
 ***
 
 ## [Unreleased] - *Active Vibe-Coding State* 💡
 
 This section is for tasks currently being discussed with or worked on by the coding assistant. These are the ephemeral, flow-of-thought tasks.
 
-**🧪 TESTDRIVE-JSUI CAPABILITY EXTRACTION (2025-11-09) - IN PROGRESS**:
-Safely extracting JavaScript UI framework functionality into a dedicated capability while protecting existing hard-won UI functionality and integrating JavaScript tests into the main Python test suite.
+### Extract Capability-Capability from Issue-Facade (Paused)
 
-**📋 Workplan**: [docs/workplan-testdrive-jsui-capability.md](docs/workplan-testdrive-jsui-capability.md)
+**Context:** Issue-facade currently provides two capabilities:
+1. **issue-tracking** (explicit in CAPABILITY-issue-tracking.yaml) - Issue management across platforms
+2. **capability-capability** (implicit) - Patterns and tools for creating/managing capabilities
 
-**Current Status**: Implementing Phase 1 - Foundation Setup
-- [ ] Create capability directory structure
-- [ ] Setup pyproject.toml with dependencies
-- [ ] Create package.json with Jest configuration
-- [ ] Implement Python-JavaScript bridge
-- [ ] Create capability Makefile
-- [ ] Write basic README documentation
+The **capability-capability** includes:
+- Feedback pattern (feedback/ directory, .capability/feedback CLI tool, documentation)
+- Detachment facility (.capability/detach script for clean capability removal)
+- Integration pattern (.capability/integrate.sh for project integration)
+- CAPABILITY-*.yaml specification format
+- ReusableCapabilitiesArchitecture.md (complete specification)
+- Directory conventions (_family/implementation, visible/hidden patterns)
 
-**Objectives**:
-- 🔒 Zero-risk migration with copy-first approach
-- 🧪 Integrate JavaScript tests into main Python test suite
-- 🏗️ Clean capability architecture for JavaScript framework
-- 📊 Enhanced CI/CD integration for JavaScript testing
-- 🚀 Future extensibility for JavaScript framework evolution
+**Goal:** Extract capability-capability to separate `reusable-capability` repository so it can be used by any capability in the markitect ecosystem.
 
-**Safety Mechanisms**:
-- Copy-first approach (never move until verified)
-- Dual-track testing during migration
-- Gradual integration with rollback options
-- Comprehensive test verification at each step
+**Approach:** Step-by-step extraction, starting with specification.
 
-**🏗️ MAJOR ARCHITECTURE REFACTORING (2025-11-03) - COMPLETED ✅**: Successfully completed comprehensive JavaScript refactoring using Test-Driven Development methodology.
+#### Phase 1: Specification & Planning (Current)
 
-**PROBLEMS SOLVED**:
-1. ✅ **Monolithic Architecture**: Extracted 5,188-line `editor.js` into 4 modular components
-2. ✅ **Server-Side Debug Generation**: Implemented pure client-side DebugPanel component
-3. ✅ **Architectural Boundary Violations**: Clean separation with no Python code modifications
-4. ✅ **Tight Coupling**: All components independently testable with event-driven communication
-5. ✅ **Generic Editor Compromise**: Debug system now purely client-side and component-based
+- [ ] Create CAPABILITY-capability.yaml in issue-facade to explicitly declare the implicit capability
+- [ ] Define what belongs to capability-capability family vs issue-tracking family
+- [ ] Document the capability-capability API surface (what tools/patterns it provides)
+- [ ] Identify all files/directories to extract
+- [ ] Plan extraction strategy (copy vs move, how to maintain during transition)
 
-**SOLUTION IMPLEMENTED**: Modular JavaScript Architecture with complete component separation and TDD validation.
+#### Phase 2: Repository Creation
 
-**📊 PREVIOUS STATUS (2025-11-02)**: Systematic JavaScript functionality recovery using TDD methodology had made excellent progress. **5 major features** were successfully implemented and tested:
+- [ ] Create reusable-capability repository structure
+- [ ] Extract ReusableCapabilitiesArchitecture.md to new repo
+- [ ] Extract feedback pattern (directory structure, CLI tool, README)
+- [ ] Extract detachment facility (.capability/detach)
+- [ ] Extract integration scripts (.capability/integrate.sh, integration-checklist.md)
+- [ ] Create CAPABILITY-capability.yaml in new repo (canonical version)
+- [ ] Add README.md for reusable-capability repo
 
-1. **Advanced EditState Management** ✅ - Implemented enum-based state tracking with pending changes preservation
-2. **Keyboard Shortcuts** ✅ - Added Ctrl+Enter (accept) and Escape (cancel) functionality
-3. **Section Splitting** ✅ - Restored dynamic heading detection with automatic section reorganization
-4. **Real-time Status Tracking** ✅ - Implemented periodic updates with visual status panel (2-second intervals)
-5. **Intelligent Filename Generation** ✅ - Added 4-method fallback system (options→title→URL→heading→timestamp)
+#### Phase 3: Integration & Testing
 
-All implementations include comprehensive TDD test suites and are fully integrated into the existing codebase. The recovery approach has proven highly effective for restoring sophisticated lost functionality.
+- [ ] Update issue-facade to depend on reusable-capability (as integrated capability)
+- [ ] Integrate reusable-capability into issue-facade using _capability/reusable-capability pattern
+- [ ] Test that issue-facade still works with extracted capability
+- [ ] Update issue-facade documentation to reference both capabilities it provides/uses
+- [ ] Verify feedback system still works
+- [ ] Verify detachment still works
 
-## 🏗️ JAVASCRIPT ARCHITECTURE REFACTORING - COMPLETED ✅
+#### Phase 4: Dogfooding & Validation
 
-### **Phase 1: Preparation & Backup (CRITICAL) - ✅ COMPLETED**
-* ✅ Updated TODO.md with comprehensive refactoring plan
-* ✅ Created modular directory structure `markitect/static/js/`
-* ✅ Set up component template files with proper exports/imports
-* ✅ Implemented TDD test framework for safe refactoring
+- [ ] Choose another markitect capability for dogfooding
+- [ ] Integrate reusable-capability into that capability
+- [ ] Add feedback system to new capability
+- [ ] Add detachment facility to new capability
+- [ ] Document learnings and refine reusable-capability based on real-world usage
+- [ ] Update ReusableCapabilitiesArchitecture.md with insights
 
-### **Phase 2: Core System Extraction (HIGH) - ✅ COMPLETED**
-* ✅ Extracted SectionManager to `core/section-manager.js` (490 lines)
-* ✅ Integrated EventSystem into SectionManager with pub/sub pattern
-* ✅ Created comprehensive section state management with EditState enum
+**Current Step:** Phase 1, Task 1 - Create CAPABILITY-capability.yaml
 
-### **Phase 3: Component Separation (HIGH) - ✅ COMPLETED**
-* ✅ Document Controls → `components/document-controls.js` (200 lines)
-* ✅ DOMRenderer (includes status functionality) → `components/dom-renderer.js` (540 lines)
-* ✅ Debug Panel → `components/debug-panel.js` (150 lines, pure client-side)
-* ✅ Floating Menu → integrated into DOMRenderer component
-* ✅ Text/Image Editors → integrated into DOMRenderer component
-
-### **Phase 4: Testing Infrastructure (MEDIUM) - ✅ COMPLETED**
-* ✅ Standalone TDD test runner (`RefactorTestRunner`) that doesn't require md-render
-* ✅ Component unit tests for all individual functionality
-* ✅ Integration tests for component interaction
-* ✅ Full system integration tests for complete workflow validation
-
-### **Phase 5: Integration & Cleanup (MEDIUM) - ✅ COMPLETED**
-* ✅ All components work together with preserved functionality
-* ✅ Monolithic editor.js functionality fully distributed
-* ✅ Python code completely unchanged - zero md-render modifications
-* ✅ All functionality validated through comprehensive test suite (31 tests passing)
-
-### **Directory Structure Implemented:**
-```
-markitect/static/js/
-├── core/
-│   └── section-manager.js      # ✅ Section state management with EventSystem (490 lines)
-├── components/
-│   ├── document-controls.js    # ✅ Document controls panel (200 lines)
-│   ├── dom-renderer.js         # ✅ DOM rendering, FloatingMenu, editors (540 lines)
-│   └── debug-panel.js          # ✅ Debug panel (150 lines, pure client-side)
-└── tests/
-    ├── refactor-test-runner.js     # ✅ TDD test framework
-    ├── test-component-integration.js      # ✅ Component integration tests
-    ├── test-full-integration.js           # ✅ Full system tests
-    ├── test-section-manager-extraction.js # ✅ SectionManager tests
-    ├── test-extracted-section-manager.js  # ✅ SectionManager TDD tests
-    ├── test-domrenderer-extraction.js     # ✅ DOMRenderer extraction tests
-    ├── test-extracted-domrenderer.js      # ✅ DOMRenderer TDD tests
-    ├── test-debugpanel-extraction.js      # ✅ DebugPanel extraction tests
-    ├── test-debugpanel-integration.js     # ✅ DebugPanel integration tests
-    └── test-documentcontrols-extraction.js # ✅ DocumentControls tests
-```
-
-### **REFACTORING RESULTS SUMMARY:**
-- **Lines Extracted**: 1,380 lines from monolithic 5,188-line editor.js
-- **Components Created**: 4 modular, independently testable components
-- **Tests Created**: 11 comprehensive test files with 31 passing tests
-- **Architecture**: Event-driven, pub/sub communication between components
-- **Functionality**: 100% preserved with zero regression
-- **Performance**: Improved modularity enables better maintainability and testing
-- **Python Code**: Zero modifications - clean architectural separation achieved
-
-### **PREVIOUS COMPLETED FEATURES (Now successfully refactored):**
-* **Successfully Refactored:**
-    * ✅ Advanced state management with EditState enum and pending changes (CRITICAL) - REFACTORED INTO SectionManager
-    * ✅ Keyboard shortcuts (Ctrl+Enter accept, Escape cancel) (CRITICAL) - REFACTORED INTO DOMRenderer
-    * ✅ Section splitting functionality for dynamic heading detection (HIGH) - REFACTORED INTO SectionManager
-    * ✅ Real-time status tracking with periodic updates (HIGH) - REFACTORED INTO DocumentControls
-    * ✅ Intelligent save filename generation with 4-method fallback (MEDIUM) - PRESERVED IN MONOLITH
-    * ✅ Professional message system with color-coded positioning (MEDIUM) - REFACTORED INTO DebugPanel
-    * ✅ Multiple concurrent editing sessions support (MEDIUM) - REFACTORED INTO DOMRenderer
-    * ✅ Enhanced DOM event system with 6 event types (LOW) - REFACTORED INTO DOMRenderer
-    * ✅ Automatic section type detection (heading, code, list, etc) (LOW) - REFACTORED INTO SectionManager
-    * ✅ Sophisticated section ID generation with hash-based algorithm (LOW) - REFACTORED INTO SectionManager
-
-* **Successfully Implemented:**
-    * ✅ Comprehensive status reporting dialog with detailed stats (HIGH) - IMPLEMENTED IN DocumentControls
-    * ✅ Floating global control panel with professional styling (MEDIUM) - IMPLEMENTED IN DocumentControls
-    * ✅ Enhanced setupSectionElement with comprehensive styling (LOW) - IMPLEMENTED IN DOMRenderer
-
-* **Core Methods Successfully Refactored:**
-    * ✅ stopEditing method with state preservation (CRITICAL) - REFACTORED INTO SectionManager
-    * ✅ getAllSections method for section collection management (MEDIUM) - REFACTORED INTO SectionManager
-    * ✅ hasChanges detection for unsaved modifications (HIGH) - REFACTORED INTO SectionManager
-    * ✅ updateGlobalStatus method with 2-second interval updates (MEDIUM) - REFACTORED INTO DocumentControls
-    * ✅ handleSectionSplit for dynamic section reorganization (LOW) - REFACTORED INTO SectionManager
-    * ✅ checkForSectionSplits automatic heading detection (LOW) - REFACTORED INTO SectionManager
-
-* **To Remove:**
-    * None currently identified
-
-
-***
-
-## Completed Tasks
-
-**JavaScript Architecture Refactoring - COMPLETED ✅ (2025-11-03)**:
-- ✅ Successfully extracted monolithic 5,188-line editor.js into 4 modular components using TDD methodology
-- ✅ Created SectionManager component (490 lines) handling section state management and event system
-- ✅ Created DOMRenderer component (540 lines) handling DOM interactions, rendering, and editing workflows
-- ✅ Created DebugPanel component (150 lines) providing pure client-side debug message management
-- ✅ Created DocumentControls component (200 lines) managing floating control panel and document actions
-- ✅ Implemented comprehensive TDD test framework with 11 test files and 31 passing tests
-- ✅ Achieved 100% functionality preservation with zero regression through rigorous testing
-- ✅ Established event-driven architecture with pub/sub communication between components
-- ✅ Maintained complete separation from Python code - zero md-render modifications required
-- ✅ Created modular directory structure enabling independent component development and testing
-
-**Architecture Improvements Achieved**:
-- Clean separation of concerns with single-responsibility components
-- Event-driven communication reducing tight coupling
-- Independent component testing enabling confident refactoring
-- Scalable structure supporting future feature development
-- Client-side debug system eliminating server-side debug generation issues
-- Modular design allowing selective component updates without affecting others
-
-**Asset Shipping for md-render - COMPLETED ✅**:
-- ✅ Implemented automatic asset copying when rendering markdown to different output directories
-- ✅ Added asset discovery functionality parsing markdown for image/link references
-- ✅ Implemented timestamp-based asset copying (only copy if source newer than destination)
-- ✅ Added `--ship-assets` and `--no-ship-assets` CLI flags for explicit control
-- ✅ Added `MARKITECT_OUTPUT_DIR` environment variable support for default output directory
-- ✅ Smart defaults: assets ship automatically when output is directory, disabled for specific files
-- ✅ Preserved relative path structure in output directory maintaining markdown link compatibility
-- ✅ Graceful handling of missing assets with warning messages
-- ✅ Full backward compatibility with existing md-render workflows
-- ✅ Comprehensive TDD test suite covering all functionality and edge cases
-
-**Feature Capabilities**:
-- Environment variable priority: CLI `--output` > `MARKITECT_OUTPUT_DIR` > input file directory
-- Automatic asset discovery from standard markdown syntax: `![alt](path)` and `[text](path)`
-- Timestamp-based incremental copying prevents unnecessary file operations
-- Directory structure preservation maintains working relative links in output HTML
-- Support for images, documents, and other asset types referenced in markdown
-
-**CHANGELOG.md Enhancement - COMPLETED ✅**:
-- ✅ Added missing version entries for 0.1.0, 0.2.0, and 0.3.0
-- ✅ Added standard Keep a Changelog header with proper format
-- ✅ Included Unreleased section
-- ✅ Research completed for all historical versions using git log analysis
-- ✅ All entries follow Keep a Changelog categories (Added, Changed, Fixed)
-- ✅ Chronological order maintained with latest versions first
-- ✅ Appropriate release dates included based on git commit timestamps
-
-**Version Details Added**:
-- v0.1.0 (2025-10-15): Development infrastructure, TDD workspace, issue management
-- v0.2.0 (2025-10-20): Advanced Markdown Engine with GraphQL, search, plugins
-- v0.3.0 (2025-10-25): Architectural improvements with kaizen-agentic integration

agents/agent-project-assistent.md

@@ -0,0 +1,182 @@
+---
+name: project-assistant
+description: Specialized assistant for project status, progress tracking, and development planning
+---
+
+## Instructions
+
+You are the MarkiTect project assistant, specialized in providing project status overviews, tracking progress, and helping determine next steps for development work.
+
+### Core Responsibilities
+
+1. **Project Status Overview**: Provide concise summaries of current project state by analyzing key project files
+2. **Progress Tracking**: Help understand what has been accomplished recently and what's currently in progress
+3. **Next Steps Planning**: Suggest logical next actions based on project status and documented plans
+
+### Key Project Files & Their Purpose
+
+- **TODO.md**: Current state of implemenation based on the Keep-A-Todofile format for maintaining coding flow
+- **CHANGELOG.md**: History of releases based on the Keep-A-Changelog format for easy access to what happend before
+- **roadmap/**: Directory with current and close range roadmap-topic-directories for concepts, workplans, examples...
+- **history/**: Directory with closed roadmap-topic-directories including finishd TODO.md files as YYMMDD-DONE.md
+- **Makefile**: Provides helpers to use and improve the capabilities provided by the project
+  **Gitea Issues**: Backlog of issues and backlog of tasks stored as issues in gitea before selection as roadmap topics
+
+### Project Infrastructure Knowledge
+
+**Repository Structure:**
+- Main project hosted on Gitea with issue tracking for use cases and tasks
+- Planning documentation goes to roadmap/ROADMAPTOPIC subdirectories
+- Closed roadmap-topic-directories git-mv to history/ 
+- Auto generated documentation maintained in docs/ 
+- Human generated documentation maintained in wiki/ submodule
+- Test-driven development workflow with comprehensive test coverage
+
+Important: Respect the directory structure! If in doubt ask or use directories under tmp/ to keep the structure clean!
+
+**Development Workflow:**
+- Issue-driven development using Gitea API integration
+- Issue management via universal issue-facade CLI that works with multiple backends
+- All commits require green test state
+
+**Capability Inclusion Management:**
+- **Internal Capabilities**: See `CAPABILITIES.md` for what MarkiTect provides to the world
+- **External Capabilities**: Check `CAPABILITY_REGISTRY.md` for what MarkiTect uses
+- **Before implementing**: Use `CLAUDE_CAPABILITY_REFERENCE.md` for quick lookup
+- **Architecture Guide**: See `CAPABILITY_INCLUSION_GUIDE.md` for complete workflow
+- **Discovery Tools**: `make capability-search TERM=xyz` to find existing functionality
+
+**Issue Management Protocol:**
+- **Gitea-First**: Feature requests, bugs, and enhancements should be documented as Gitea issues
+- **Issue Creation**: When new requirements emerge, create issues in Gitea immediately but do NOT implement immediately
+- **Strategic Planning**: Issues should be prioritized and scheduled based on project roadmap (history/ROADMAP.md)
+- **Implementation Discipline**: Only work on issues that are explicitly planned for the current session
+- **Issue Workflow**: Create → Triage → Plan → Schedule → Implement → Close
+
+**TDD Workflow Management:**
+- For issue management tasks, use the **issue-facade** system located in `capabilities/issue-facade/`
+- The issue-facade provides unified CLI for GitHub, GitLab, Gitea, and local SQLite backends
+- This includes sidequest management, test planning, and comprehensive development workflow guidance
+
+### Response Guidelines
+
+When asked about project status or next steps:
+
+1. **Start with Current State**: Always check TODO.md for the latest activity 
+2. **Review Recent Progress**: Check CHANGELOG.md for previous work and progress
+3. **Check Planned Work**: TODO.md documents next steps and priorities, if empty see topics in roadmap/
+4. **Project Scope and Goals**: Vision, Mission, Guidelines and Usecases live in wiki/ if available
+5. **Planning New Stuff**: Requirements (Epics and Stories) are gitea issues to be planned as roadmap topics
+6. **Consider Git Status**: Allways be aware of current working directory state and recent commits
+
+### Issue Management Guidelines
+
+**When to Create Gitea Issues:**
+- New feature requests or enhancement ideas emerge during development
+- Bugs or technical debt are discovered but not immediately fixable
+- Future improvements are identified but outside current session and topic scope
+- Architecture decisions require documentation and future review
+- Sidequests that we want to remember for later implementation
+
+**Issue Creation Protocol:**
+- Use descriptive titles that clearly state the requirement
+- Include context: why is this needed, what problem does it solve
+- Add relevant labels: enhancement, bug, documentation, technical-debt
+- Reference related issues or components affected
+- Do NOT implement immediately - issues are for tracking and planning
+
+**Issue vs. Immediate Work:**
+- Current session planned work: document in TODO.md and roadmap/ROADMAPTOPIC 
+- Discovered improvements: add to workplan in roadmap topic, continue with planned work
+- Critical bugs affecting current work: fix immediately, then create issue for root cause analysis
+- Future enhancements: note in roadmap-topic to create issues first for proper planning
+- If possible create issues interactively when closing a topic, they are for human oversight and longterm
+- Do not create issues for stuff that is detailed and can be adressed before closing the current topic
+
+**Response Format:**
+- Provide a brief status summary (2-3 sentences)
+- Highlight recent progress or changes
+- Suggest 1-3 concrete next actions based on documented plans
+- Reference specific files and line numbers when relevant (e.g., `Next.md:8-12`)
+
+### Example Response Structure
+
+```
+## Current Status
+[Brief summary from ProjectStatusDigest.md]
+
+## Recent Progress
+[Key accomplishments from ProjectDiary.md latest entries]
+
+## Recommended Next Steps
+1. [Action from Next.md or logical progression]
+2. [Secondary priority or alternative approach]
+3. [Maintenance or validation task if applicable]
+```
+
+## Session Start-Up Protocol
+
+When asked what's up for a new coding session, follow this standardized routine:
+
+### Start-of-Session Checklist
+1. **Mission Status**: Provide reminder to project vision and how we are doing
+2. **Recently**: Provide reminder what we did last from the last entry to the diary
+3. **TODO.md**: Check if we provided guidance for what to do next at the end of the last coding session
+4. **git status**: Check if git is clean or work has been left unfinished 
+5. **Workspace clean**: Check if workspace is clean or we left of in the middle of a TDD cycle
+6. **Topic or issue finished**: Check if we are currently working on a specific roadmap-topic or issue
+7. **Suggestion**: Provide a sensible suggestion of what to do next 
+
+## Session Wrap-Up Protocol
+
+When asked to help wrap up a development session, follow this standardized routine:
+
+### End-of-Session Checklist:
+2. **Update TODO.md**: Set clear priorities and strategy for next session using todofile format
+3. **Update roadmap-topic directory information**: Refresh current status, metrics, and completed features
+4. **Issue Management**: Review and create any issues for sidequests and discoveries made during session
+5. **Anchor patterns**: Add Update suggestions for this project-assistant definition with any new workflow patterns
+6. **Prepare for commit**: Ensure all documentation reflects current state
+
+### Session Success Indicators:
+- All tests passing (green state)
+- Clear next steps documented
+- Technical debt addressed or documented
+- Progress measurably advanced toward project goals
+
+### Wrap-Up Response Format:
+```
+## Session Summary
+[Brief overview of accomplishments and current state]
+
+## Documentation Updates
+- ✅ TODO.md: [priorities set]
+- ✅ roadmap/TOPIC files: [what was added or changed]
+- ✅ CHANGELOG.ms: [status updated especially on release]
+
+## Issues Created/Updated
+- 🎯 Issue #X: [brief description] - [reason for creation]
+- 📝 Issue #Y: [brief description] - [future enhancement]
+
+## Next Session Preparation
+[Clear guidance for resuming work next time]
+
+Ready for commit: [list of files to commit]
+```
+
+### Example Capture Small Off-Topic Improvements in roadmap/eat-the-frog:
+**Smell**: Different filename conventions od conflicting concepts, unclear guideance
+**Hunch**: Ideas to explore that need consideration if useful and in scope
+**Hickups**: Notes on inefficient or roundtripping implementation to analyse later
+
+Collect these in the roadmap-topic-directory and move stuff to eat-the-frog on close if unfinished 
+
+### Example Issue Creation During Development:
+**Scenario**: While implementing CLI commands, discover that error messages could be improved
+**Action**: Create issue "Enhance CLI error messages with user-friendly formatting and suggestions"
+**Result**: Continue with current CLI implementation, address error enhancement in future session
+
+Generate issues for relevantly expensive or risky stuff and in direct feedback with developers.
+Controled in-scope-work does not need the costly issue capture, refinement, selection roundtrip. 
+
+Remember: Your role is to help developers quickly understand "where we are" and "what should we do next" when picking up work on the MarkiTect project, and to ensure proper session wrap-up for continuity.

agents/agent-project-management.md

@@ -1,165 +0,0 @@
----
-name: project-assistant
-description: Specialized assistant for project status, progress tracking, and development planning
----
-
-## Instructions
-
-You are the MarkiTect project assistant, specialized in providing project status overviews, tracking progress, and helping determine next steps for development work.
-
-### Core Responsibilities
-
-1. **Project Status Overview**: Provide concise summaries of current project state by analyzing key project files
-2. **Progress Tracking**: Help understand what has been accomplished recently and what's currently in progress
-3. **Next Steps Planning**: Suggest logical next actions based on project status and documented plans
-
-### Key Project Files & Their Purpose
-
-- **ProjectStatusDigest.md**: The canonical source of truth for project architecture, features, and current state
-- **ProjectDiary.md**: Chronological record of major work packages, milestones, and development sessions
-- **TODO.md**: Task management and priorities following Keep a Todofile format for maintaining coding flow
-- **Makefile**: Provides helpers to use and improve the capabilities provided by the project
-  **Gitea Issues**: Backlog of issues and backlog of tasks stored as issues in gitea
-
-### Project Infrastructure Knowledge
-
-**Repository Structure:**
-- Main project hosted on Gitea with issue tracking for use cases and tasks
-- Documentation maintained in `wiki/` submodule
-- Test-driven development workflow with comprehensive test coverage
-
-**Development Workflow:**
-- Issue-driven development using Gitea API integration
-- Issue management via universal issue-facade CLI that works with multiple backends
-- All commits require green test state
-
-**Capability Inclusion Management:**
-- **Internal Capabilities**: See `CAPABILITIES.md` for what MarkiTect provides to the world
-- **External Capabilities**: Check `CAPABILITY_REGISTRY.md` for what MarkiTect uses
-- **Before implementing**: Use `CLAUDE_CAPABILITY_REFERENCE.md` for quick lookup
-- **Architecture Guide**: See `CAPABILITY_INCLUSION_GUIDE.md` for complete workflow
-- **Discovery Tools**: `make capability-search TERM=xyz` to find existing functionality
-
-**Issue Management Protocol:**
-- **Gitea-First**: Feature requests, bugs, and enhancements should be documented as Gitea issues
-- **Issue Creation**: When new requirements emerge, create issues in Gitea immediately but do NOT implement immediately
-- **Strategic Planning**: Issues should be prioritized and scheduled based on project roadmap (history/ROADMAP.md)
-- **Implementation Discipline**: Only work on issues that are explicitly planned for the current session
-- **Issue Workflow**: Create → Triage → Plan → Schedule → Implement → Close
-
-**TDD Workflow Management:**
-- For issue management tasks, use the **issue-facade** system located in `capabilities/issue-facade/`
-- The issue-facade provides unified CLI for GitHub, GitLab, Gitea, and local SQLite backends
-- This includes sidequest management, test planning, and comprehensive development workflow guidance
-
-### Response Guidelines
-
-When asked about project status or next steps:
-
-1. **Start with Current State**: Always check ProjectStatusDigest.md for the latest architecture and status
-2. **Review Recent Progress**: Check ProjectDiary.md for recent accomplishments and context
-3. **Check Planned Work**: Read Next.md for documented next steps and priorities
-4. **Consider Git Status**: Be aware of current working directory state and recent commits
-
-### Issue Management Guidelines
-
-**When to Create Gitea Issues:**
-- New feature requests or enhancement ideas emerge during development
-- Bugs or technical debt are discovered but not immediately fixable
-- Future improvements are identified but outside current session scope
-- Architecture decisions require documentation and future review
-- Sidequests that we want to remember for later implementation
-
-**Issue Creation Protocol:**
-- Use descriptive titles that clearly state the requirement
-- Include context: why is this needed, what problem does it solve
-- Add relevant labels: enhancement, bug, documentation, technical-debt
-- Reference related issues or components affected
-- Do NOT implement immediately - issues are for tracking and planning
-
-**Issue vs. Immediate Work:**
-- Current session planned work: implement directly (from Next.md)
-- Discovered improvements: create issue, continue with planned work
-- Critical bugs affecting current work: fix immediately, then create issue for root cause analysis
-- Future enhancements: always create issue first for proper planning
-
-**Response Format:**
-- Provide a brief status summary (2-3 sentences)
-- Highlight recent progress or changes
-- Suggest 1-3 concrete next actions based on documented plans
-- Reference specific files and line numbers when relevant (e.g., `Next.md:8-12`)
-
-### Example Response Structure
-
-```
-## Current Status
-[Brief summary from ProjectStatusDigest.md]
-
-## Recent Progress
-[Key accomplishments from ProjectDiary.md latest entries]
-
-## Recommended Next Steps
-1. [Action from Next.md or logical progression]
-2. [Secondary priority or alternative approach]
-3. [Maintenance or validation task if applicable]
-
-Based on: ProjectStatusDigest.md:74-79, Next.md:7-13
-```
-
-## Session Start-Up Protocol
-
-When asked what's up for a new coding session, follow this standardized routine:
-
-### Start-of-Session Checklist
-1. **Mission Status**: Provide reminder to project vision and how we are doing
-2. **Recently**: Provide reminder what we did last from the last entry to the diary
-3. **NEXT.txt**: Check if we provided guidance for what to do next at the end of the last coding session
-4. **git status**: Check if git is clean or work has been left unfinished 
-5. **Workspace clean**: Check if workspace is clean or we left of in the middle of a TDD cycle
-6. **Issue finished**: Check if we are currently working on a specific issue or need to select the next one
-7. **Suggestion**: Provide a sensible suggestion of what to do next 
-
-## Session Wrap-Up Protocol
-
-When asked to help wrap up a development session, follow this standardized routine:
-
-### End-of-Session Checklist:
-1. **Update ProjectDiary.md**: Add entry documenting progress, challenges, and achievements
-2. **Update TODO.md**: Set clear priorities and strategy for next session using todofile format
-3. **Update ProjectStatusDigest.md**: Refresh current status, metrics, and completed features
-4. **Issue Management**: Review and create any issues for sidequests and discoveries made during session
-5. **Anchor patterns**: Update this project-assistant definition with any new workflow patterns
-6. **Prepare for commit**: Ensure all documentation reflects current state
-
-### Session Success Indicators:
-- All tests passing (green state)
-- Clear next steps documented
-- Technical debt addressed or documented
-- Progress measurably advanced toward project goals
-
-### Wrap-Up Response Format:
-```
-## Session Summary
-[Brief overview of accomplishments and current state]
-
-## Documentation Updates
-- ✅ ProjectDiary.md: [what was added]
-- ✅ Next.md: [priorities set]
-- ✅ ProjectStatusDigest.md: [status updated]
-
-## Issues Created/Updated
-- 🎯 Issue #X: [brief description] - [reason for creation]
-- 📝 Issue #Y: [brief description] - [future enhancement]
-
-## Next Session Preparation
-[Clear guidance for resuming work next time]
-
-Ready for commit: [list of files to commit]
-```
-
-### Example Issue Creation During Development:
-**Scenario**: While implementing CLI commands, discover that error messages could be improved
-**Action**: Create issue "Enhance CLI error messages with user-friendly formatting and suggestions"
-**Result**: Continue with current CLI implementation, address error enhancement in future session
-
-Remember: Your role is to help developers quickly understand "where we are" and "what should we do next" when picking up work on the MarkiTect project, and to ensure proper session wrap-up for continuity.

capabilities/DETACHED-issue-facade.yaml

@@ -0,0 +1,51 @@
+# Detachment Manifest
+# This file records the removal of the issue-facade capability
+# Use this information to re-integrate with updated architecture
+
+detachment:
+  timestamp: 2025-12-17T21:23:14Z
+  capability_name: issue-facade
+  capability_family: issue-tracking
+  integration_pattern: capabilities-directory
+  original_location: /home/worsch/markitect_project/capabilities/issue-facade
+
+capability_metadata:
+  spec_file: CAPABILITY-issue-tracking.yaml
+  version: unknown
+  implementation: unknown
+  maturity: unknown
+
+integration_details:
+  parent_project: capabilities
+  parent_path: /home/worsch/markitect_project/capabilities
+
+re_integration_guide: |
+  To re-integrate this capability using the new architecture:
+
+  # Option 1: Git submodule (recommended)
+  cd /home/worsch/markitect_project/capabilities
+  git submodule add <repo-url> _issue-facade
+  pip install -e _issue-facade/
+
+  # Option 2: Clone directly
+  cd /home/worsch/markitect_project/capabilities
+  git clone <repo-url> _issue-facade
+  pip install -e _issue-facade/
+
+  # Option 3: Copy into project
+  cd /home/worsch/markitect_project/capabilities
+  cp -r /path/to/issue-facade _issue-facade
+  pip install -e _issue-facade/
+
+  Note: Use underscore prefix (_issue-facade) per ReusableCapabilitiesArchitecture
+
+notes:
+  - The original integration used pattern: capabilities-directory
+  - New architecture recommends: underscore-prefix at repo root
+  - See ReusableCapabilitiesArchitecture.md for details
+
+repository_info:
+  # Fill in if re-integrating from git
+  git_url: "http://92.205.130.254:32166/coulomb/issue-facade.git"  # e.g., https://github.com/markitect/issue-facade
+  git_branch: "main"  # e.g., main
+  git_commit: "35daa514e59788250847cd706c43ea78f24c5c1d"  # Optional: specific commit to use

capabilities/release-management/src/release_management/changelog/__init__.py

@@ -0,0 +1,10 @@
+"""
+CHANGELOG management tools.
+
+This package provides tools for working with CHANGELOG.md files.
+"""
+
+from .editor import ChangelogEditor
+from .parser import ChangelogParser
+
+__all__ = ['ChangelogEditor', 'ChangelogParser']

capabilities/release-management/src/release_management/changelog/editor.py

@@ -0,0 +1,207 @@
+"""
+CHANGELOG.md editor for programmatic updates.
+
+This module provides tools for editing CHANGELOG.md files following
+the Keep a Changelog format.
+"""
+
+from datetime import datetime
+from pathlib import Path
+from typing import Optional, List
+
+
+class ChangelogEditor:
+    """Programmatic editor for CHANGELOG.md files."""
+
+    def __init__(self, changelog_path: Optional[Path] = None):
+        """Initialize changelog editor.
+
+        Args:
+            changelog_path: Path to CHANGELOG.md file
+        """
+        self.changelog_path = changelog_path or Path.cwd() / 'CHANGELOG.md'
+
+    def create_version_section(self, version: str, date: Optional[str] = None) -> bool:
+        """Create new version section and move Unreleased content.
+
+        Args:
+            version: Version number (e.g., "0.11.0")
+            date: Release date in YYYY-MM-DD format (defaults to today)
+
+        Returns:
+            True if successful, False otherwise
+        """
+        if date is None:
+            date = datetime.now().strftime("%Y-%m-%d")
+
+        # Validate version format
+        version_clean = version.lstrip('v')
+
+        if not self.changelog_path.exists():
+            print(f"❌ CHANGELOG.md not found at {self.changelog_path}")
+            return False
+
+        try:
+            with open(self.changelog_path) as f:
+                lines = f.readlines()
+
+            # Find Unreleased section
+            unreleased_idx = None
+            for i, line in enumerate(lines):
+                if line.strip() == "## [Unreleased]":
+                    unreleased_idx = i
+                    break
+
+            if unreleased_idx is None:
+                print("❌ No [Unreleased] section found in CHANGELOG.md")
+                return False
+
+            # Find next version section or end of Unreleased content
+            next_section_idx = None
+            for i in range(unreleased_idx + 1, len(lines)):
+                if lines[i].startswith("## [") and not lines[i].startswith("## [Unreleased]"):
+                    next_section_idx = i
+                    break
+
+            # Extract Unreleased content (skip the header line and first blank line)
+            if next_section_idx:
+                unreleased_content = lines[unreleased_idx + 1:next_section_idx]
+            else:
+                unreleased_content = lines[unreleased_idx + 1:]
+
+            # Check if there's actual content to move
+            has_content = any(line.strip() and not line.strip().startswith('#')
+                            for line in unreleased_content)
+
+            if not has_content:
+                print(f"⚠️  [Unreleased] section is empty. Add changes before creating release section.")
+                print(f"💡 Tip: You can still create the section, but it will be empty.")
+
+            # Create new version section with moved content
+            new_section_lines = [
+                f"## [{version_clean}] - {date}\n",
+            ]
+
+            # Add the unreleased content (preserving structure)
+            new_section_lines.extend(unreleased_content)
+
+            # Ensure proper spacing after new section
+            if new_section_lines and not new_section_lines[-1].endswith('\n\n'):
+                if not new_section_lines[-1].endswith('\n'):
+                    new_section_lines[-1] += '\n'
+                new_section_lines.append('\n')
+
+            # Build new file content
+            # Keep everything up to and including Unreleased header
+            new_lines = lines[:unreleased_idx + 1]
+
+            # Add blank line after Unreleased header
+            new_lines.append('\n')
+
+            # Add the new version section
+            new_lines.extend(new_section_lines)
+
+            # Add remaining sections (if any)
+            if next_section_idx:
+                new_lines.extend(lines[next_section_idx:])
+
+            # Write back
+            with open(self.changelog_path, 'w') as f:
+                f.writelines(new_lines)
+
+            print(f"✅ Created section [{version_clean}] - {date} in CHANGELOG.md")
+            if has_content:
+                print(f"📝 Moved content from [Unreleased] to [{version_clean}]")
+            print(f"💡 [Unreleased] section is now empty and ready for new changes")
+            return True
+
+        except Exception as e:
+            print(f"❌ Error editing CHANGELOG.md: {e}")
+            return False
+
+    def get_version_content(self, version: str) -> Optional[List[str]]:
+        """Extract content for a specific version section.
+
+        Args:
+            version: Version number to extract (e.g., "0.10.0")
+
+        Returns:
+            List of lines in the version section, or None if not found
+        """
+        version_clean = version.lstrip('v')
+
+        if not self.changelog_path.exists():
+            return None
+
+        try:
+            with open(self.changelog_path) as f:
+                lines = f.readlines()
+
+            # Find the version section
+            version_idx = None
+            for i, line in enumerate(lines):
+                if line.strip().startswith(f"## [{version_clean}]"):
+                    version_idx = i
+                    break
+
+            if version_idx is None:
+                return None
+
+            # Find next section
+            next_section_idx = None
+            for i in range(version_idx + 1, len(lines)):
+                if lines[i].startswith("## ["):
+                    next_section_idx = i
+                    break
+
+            # Extract content
+            if next_section_idx:
+                return lines[version_idx:next_section_idx]
+            else:
+                return lines[version_idx:]
+
+        except Exception:
+            return None
+
+    def has_unreleased_content(self) -> bool:
+        """Check if Unreleased section has any content.
+
+        Returns:
+            True if Unreleased section has content, False otherwise
+        """
+        if not self.changelog_path.exists():
+            return False
+
+        try:
+            with open(self.changelog_path) as f:
+                lines = f.readlines()
+
+            # Find Unreleased section
+            unreleased_idx = None
+            for i, line in enumerate(lines):
+                if line.strip() == "## [Unreleased]":
+                    unreleased_idx = i
+                    break
+
+            if unreleased_idx is None:
+                return False
+
+            # Find next section
+            next_section_idx = None
+            for i in range(unreleased_idx + 1, len(lines)):
+                if lines[i].startswith("## ["):
+                    next_section_idx = i
+                    break
+
+            # Check content
+            if next_section_idx:
+                content = lines[unreleased_idx + 1:next_section_idx]
+            else:
+                content = lines[unreleased_idx + 1:]
+
+            # Check if there's actual content (not just whitespace or section headers)
+            return any(line.strip() and not line.strip().startswith('#')
+                      for line in content)
+
+        except Exception:
+            return False

capabilities/release-management/src/release_management/changelog/parser.py

@@ -0,0 +1,179 @@
+"""
+CHANGELOG.md parser for extracting release notes.
+
+This module provides tools for parsing CHANGELOG.md files and extracting
+version-specific content for release notes.
+"""
+
+import re
+from pathlib import Path
+from typing import Optional
+
+
+class ChangelogParser:
+    """Parse CHANGELOG.md files and extract release information."""
+
+    def __init__(self, changelog_path: Optional[Path] = None):
+        """Initialize changelog parser.
+
+        Args:
+            changelog_path: Path to CHANGELOG.md file
+        """
+        self.changelog_path = changelog_path or Path.cwd() / 'CHANGELOG.md'
+
+    def extract_version_section(self, version: str, format: str = 'markdown') -> str:
+        """Extract CHANGELOG section for a specific version.
+
+        Args:
+            version: Version to extract (e.g., "0.10.0")
+            format: Output format ('markdown', 'plain', 'html')
+
+        Returns:
+            Formatted content of the version section
+        """
+        if not self.changelog_path.exists():
+            return f"Error: CHANGELOG.md not found at {self.changelog_path}"
+
+        try:
+            version_clean = version.lstrip('v')
+
+            with open(self.changelog_path) as f:
+                content = f.read()
+
+            # Find the version section using regex
+            # Match: ## [VERSION] - DATE followed by content until next ## [
+            pattern = rf"## \[{re.escape(version_clean)}\].*?\n\n(.*?)(?=\n## \[|\Z)"
+            match = re.search(pattern, content, re.DOTALL)
+
+            if not match:
+                return f"Error: No section found for version {version_clean} in CHANGELOG.md"
+
+            section_content = match.group(1).strip()
+
+            if not section_content:
+                return f"Warning: Section for version {version_clean} exists but is empty"
+
+            # Format based on requested format
+            if format == 'plain':
+                return self._to_plain(section_content)
+            elif format == 'html':
+                return self._to_html(section_content)
+            else:
+                return section_content  # markdown (default)
+
+        except Exception as e:
+            return f"Error reading CHANGELOG: {e}"
+
+    def get_latest_version(self) -> Optional[str]:
+        """Get the latest version number from CHANGELOG.
+
+        Returns:
+            Latest version string or None if not found
+        """
+        if not self.changelog_path.exists():
+            return None
+
+        try:
+            with open(self.changelog_path) as f:
+                content = f.read()
+
+            # Find first version section (skip Unreleased)
+            pattern = r"## \[(\d+\.\d+\.\d+[^\]]*)\]"
+            match = re.search(pattern, content)
+
+            return match.group(1) if match else None
+
+        except Exception:
+            return None
+
+    def list_versions(self) -> list:
+        """List all versions in CHANGELOG.
+
+        Returns:
+            List of version strings
+        """
+        if not self.changelog_path.exists():
+            return []
+
+        try:
+            with open(self.changelog_path) as f:
+                content = f.read()
+
+            # Find all version sections (excluding Unreleased)
+            pattern = r"## \[(\d+\.\d+\.\d+[^\]]*)\]"
+            matches = re.findall(pattern, content)
+
+            return matches
+
+        except Exception:
+            return []
+
+    def _to_plain(self, markdown_content: str) -> str:
+        """Convert markdown content to plain text.
+
+        Args:
+            markdown_content: Markdown formatted content
+
+        Returns:
+            Plain text content
+        """
+        # Remove markdown formatting
+        plain = markdown_content
+
+        # Remove bold/italic
+        plain = re.sub(r'\*\*([^*]+)\*\*', r'\1', plain)  # bold
+        plain = re.sub(r'\*([^*]+)\*', r'\1', plain)  # italic
+        plain = re.sub(r'__([^_]+)__', r'\1', plain)  # bold (underscores)
+        plain = re.sub(r'_([^_]+)_', r'\1', plain)  # italic (underscores)
+
+        # Remove links but keep text
+        plain = re.sub(r'\[([^\]]+)\]\([^\)]+\)', r'\1', plain)
+
+        # Remove inline code backticks
+        plain = re.sub(r'`([^`]+)`', r'\1', plain)
+
+        # Convert headers to plain text with spacing
+        plain = re.sub(r'^### (.+)$', r'\n\1:', plain, flags=re.MULTILINE)
+        plain = re.sub(r'^## (.+)$', r'\n\1\n' + '=' * 40, plain, flags=re.MULTILINE)
+
+        return plain.strip()
+
+    def _to_html(self, markdown_content: str) -> str:
+        """Convert markdown content to HTML.
+
+        Args:
+            markdown_content: Markdown formatted content
+
+        Returns:
+            HTML formatted content
+        """
+        try:
+            import markdown
+            return markdown.markdown(markdown_content)
+        except ImportError:
+            # Fallback to basic HTML conversion if markdown package not available
+            html = markdown_content
+
+            # Headers
+            html = re.sub(r'^### (.+)$', r'<h3>\1</h3>', html, flags=re.MULTILINE)
+            html = re.sub(r'^## (.+)$', r'<h2>\1</h2>', html, flags=re.MULTILINE)
+
+            # Bold/italic
+            html = re.sub(r'\*\*([^*]+)\*\*', r'<strong>\1</strong>', html)
+            html = re.sub(r'\*([^*]+)\*', r'<em>\1</em>', html)
+
+            # Links
+            html = re.sub(r'\[([^\]]+)\]\(([^\)]+)\)', r'<a href="\2">\1</a>', html)
+
+            # Code
+            html = re.sub(r'`([^`]+)`', r'<code>\1</code>', html)
+
+            # Lists
+            html = re.sub(r'^- (.+)$', r'<li>\1</li>', html, flags=re.MULTILINE)
+            html = re.sub(r'(<li>.*</li>)', r'<ul>\1</ul>', html, flags=re.DOTALL)
+
+            # Paragraphs
+            html = re.sub(r'\n\n', '</p><p>', html)
+            html = f'<p>{html}</p>'
+
+            return html

capabilities/release-management/src/release_management/cli/main.py

@@ -11,6 +11,9 @@ from typing import Optional
 
 from ..core.manager import ReleaseManager
 from ..utils.version import VersionManager
+from ..changelog.editor import ChangelogEditor
+from ..changelog.parser import ChangelogParser
+from ..summary.generator import SummaryGenerator
 
 
 @click.group(invoke_without_command=True)
@@ -55,6 +58,15 @@ def status(ctx):
         print(f"Latest Commit: {status_info['latest_commit']}")
         print(f"Latest Tag: {status_info['latest_tag'] or 'None'}")
         print(f"Uncommitted Changes: {'Yes' if status_info['has_changes'] else 'No'}")
+
+        # Show unpushed tags
+        unpushed_tags = status_info.get('unpushed_tags', [])
+        if unpushed_tags:
+            print(f"\n⚠️  Unpushed Tags: {len(unpushed_tags)} tag(s) not pushed to origin")
+            for tag in unpushed_tags:
+                print(f"    - {tag}")
+            print(f"\n💡 Push tags with: git push origin {' '.join(unpushed_tags)}")
+            print(f"   Or push all tags: git push --tags")
     else:
         print("Git Repository: Not available")
 
@@ -104,8 +116,10 @@ def validate(ctx):
 @main.command()
 @click.option('--version', required=True, help='Version to tag (e.g., 0.8.0)')
 @click.option('--message', help='Tag message')
+@click.option('--push/--no-push', default=True,
+              help='Automatically push tag to origin (default: --push)')
 @click.pass_context
-def tag(ctx, version: str, message: Optional[str]):
+def tag(ctx, version: str, message: Optional[str], push: bool):
     """Create git tag for version."""
     manager = ReleaseManager(
         project_root=ctx.obj['project_root'],
@@ -113,8 +127,10 @@ def tag(ctx, version: str, message: Optional[str]):
         force=ctx.obj['force']
     )
 
-    if manager.create_tag(version, message):
+    if manager.create_tag(version, message, push=push):
         print(f"✅ Successfully created tag for version {version}")
+        if not push:
+            print(f"💡 Push tag with: git push origin v{version}")
     else:
         print(f"❌ Failed to create tag for version {version}")
         sys.exit(1)
@@ -248,5 +264,153 @@ def version_info(ctx, suggest: bool):
                 print(f"  {key.replace('_', ' ').title()}: {value}")
 
 
+@main.command('check-consistency')
+@click.option('--version', required=True, help='Version to check (e.g., 0.10.0)')
+@click.pass_context
+def check_consistency(ctx, version: str):
+    """Check consistency between CHANGELOG version and git tags."""
+    manager = ReleaseManager(
+        project_root=ctx.obj['project_root'],
+        dry_run=ctx.obj['dry_run'],
+        force=ctx.obj['force']
+    )
+
+    is_consistent, issues = manager.check_version_consistency(version)
+
+    if is_consistent:
+        print(f"✅ Version {version} is consistent:")
+        print(f"  - CHANGELOG has section for {version}")
+        print(f"  - Git tag v{version} exists")
+        print(f"  - [Unreleased] section present")
+    else:
+        print(f"❌ Version {version} has consistency issues:")
+        for issue in issues:
+            print(f"  - {issue}")
+        sys.exit(1)
+
+
+@main.command('prepare')
+@click.argument('version')
+@click.option('--date', default=None, help='Release date (YYYY-MM-DD, defaults to today)')
+@click.pass_context
+def prepare(ctx, version: str, date: Optional[str]):
+    """Prepare CHANGELOG for new version release.
+
+    Creates a new version section in CHANGELOG.md and moves all content
+    from the [Unreleased] section to the new version section.
+    """
+    project_root = ctx.obj['project_root'] or Path.cwd()
+    changelog_path = project_root / 'CHANGELOG.md'
+
+    editor = ChangelogEditor(changelog_path)
+
+    # Create version section
+    if editor.create_version_section(version, date):
+        # Validate result
+        manager = ReleaseManager(
+            project_root=ctx.obj['project_root'],
+            dry_run=ctx.obj['dry_run'],
+            force=ctx.obj['force']
+        )
+
+        # Check if CHANGELOG is valid after edit
+        is_valid, issues = manager.validate_release_state()
+
+        if is_valid:
+            print("\n✅ CHANGELOG validation passed")
+        else:
+            print("\n⚠️  CHANGELOG validation issues after edit:")
+            for issue in issues:
+                if 'CHANGELOG' in issue:
+                    print(f"  - {issue}")
+    else:
+        print(f"❌ Failed to prepare CHANGELOG for version {version}")
+        sys.exit(1)
+
+
+@main.command('summary')
+@click.argument('version')
+@click.option('--output', '-o', default=None, type=click.Path(path_type=Path),
+              help='Output file path (defaults to RELEASE_SUMMARY_vX.Y.Z.md)')
+@click.pass_context
+def summary(ctx, version: str, output: Optional[Path]):
+    """Generate release summary document.
+
+    Extracts CHANGELOG content, git statistics, build artifacts, and
+    validation results to create a comprehensive release summary.
+    """
+    project_root = ctx.obj['project_root'] or Path.cwd()
+
+    # Default output path
+    if output is None:
+        version_clean = version.lstrip('v')
+        output = project_root / f"RELEASE_SUMMARY_v{version_clean}.md"
+    elif not output.is_absolute():
+        output = project_root / output
+
+    generator = SummaryGenerator(project_root)
+
+    try:
+        content = generator.generate(version, output_path=output)
+        print(f"\n✅ Release summary generated successfully")
+        print(f"📄 Summary saved to: {output}")
+    except Exception as e:
+        print(f"❌ Failed to generate release summary: {e}")
+        sys.exit(1)
+
+
+@main.command('notes')
+@click.argument('version', required=False)
+@click.option('--format', 'output_format', type=click.Choice(['markdown', 'plain', 'html']),
+              default='markdown', help='Output format (default: markdown)')
+@click.option('--output', '-o', default=None, type=click.Path(path_type=Path),
+              help='Save to file instead of stdout')
+@click.pass_context
+def notes(ctx, version: Optional[str], output_format: str, output: Optional[Path]):
+    """Extract release notes from CHANGELOG.md.
+
+    Extracts the CHANGELOG section for a specific version and outputs it
+    in various formats. Useful for creating GitHub/Gitea release notes.
+
+    If no version is specified, uses the latest version from CHANGELOG.
+
+    Examples:
+        release notes 0.10.0              # Extract v0.10.0 notes (markdown)
+        release notes                     # Extract latest version notes
+        release notes 0.10.0 --format plain  # Plain text format
+        release notes 0.10.0 -o notes.md     # Save to file
+        release notes 0.10.0 | gh release create v0.10.0 -F -  # Pipe to gh
+    """
+    project_root = ctx.obj['project_root'] or Path.cwd()
+    changelog_path = project_root / 'CHANGELOG.md'
+
+    parser = ChangelogParser(changelog_path)
+
+    # Get version (use latest if not specified)
+    if version is None:
+        version = parser.get_latest_version()
+        if version is None:
+            print("❌ Could not determine version from CHANGELOG.md")
+            sys.exit(1)
+        print(f"Using latest version: {version}", file=sys.stderr)
+
+    # Extract content
+    content = parser.extract_version_section(version, format=output_format)
+
+    # Check for errors
+    if content.startswith("Error:") or content.startswith("Warning:"):
+        print(content)
+        sys.exit(1 if content.startswith("Error:") else 0)
+
+    # Output
+    if output:
+        if not output.is_absolute():
+            output = project_root / output
+        output.write_text(content)
+        print(f"✅ Release notes written to {output}", file=sys.stderr)
+    else:
+        print(content)
+
+
 if __name__ == '__main__':
     main()

capabilities/release-management/src/release_management/core/manager.py

@@ -75,12 +75,13 @@ class ReleaseManager:
         """
         return self.validator.validate_release_state(force=self.force)
 
-    def create_tag(self, version: str, message: Optional[str] = None) -> bool:
+    def create_tag(self, version: str, message: Optional[str] = None, push: bool = True) -> bool:
         """Create a git tag for the release.
 
         Args:
             version: Version to tag (e.g., "1.0.0")
             message: Optional tag message
+            push: Whether to push the tag to origin (default: True)
 
         Returns:
             True if tag created successfully, False otherwise
@@ -93,7 +94,16 @@ class ReleaseManager:
                 print(f"  - {issue}")
             return False
 
-        return self.git_manager.create_tag(version, message)
+        # Check version-tag consistency (ensure CHANGELOG has version section)
+        changelog_valid, changelog_issues = self.validator.validate_changelog_version(version)
+        if not changelog_valid and not self.force:
+            print(f"❌ Cannot create tag for version {version}:")
+            for issue in changelog_issues:
+                print(f"  - {issue}")
+            print("\n💡 Tip: Add a section for version {version} to CHANGELOG.md before tagging")
+            return False
+
+        return self.git_manager.create_tag(version, message, push=push)
 
     def build_packages(self) -> bool:
         """Build release packages.
@@ -212,4 +222,15 @@ class ReleaseManager:
         Returns:
             List of commit messages since last tag
         """
-        return self.git_manager.get_commits_since_tag()
+        return self.git_manager.get_commits_since_tag()
+
+    def check_version_consistency(self, version: str) -> Tuple[bool, List[str]]:
+        """Check consistency between CHANGELOG version and git tags.
+
+        Args:
+            version: Version to check (e.g., "0.10.0")
+
+        Returns:
+            Tuple of (is_consistent, list_of_issues)
+        """
+        return self.validator.check_version_tag_consistency(version)

capabilities/release-management/src/release_management/git/manager.py

@@ -48,22 +48,27 @@ class GitManager:
             except subprocess.CalledProcessError:
                 latest_tag = None
 
+            # Get unpushed tags
+            unpushed_tags = self.get_unpushed_tags()
+
             return {
                 'is_repo': True,
                 'branch': current_branch,
                 'has_changes': has_changes,
                 'latest_commit': latest_commit,
-                'latest_tag': latest_tag
+                'latest_tag': latest_tag,
+                'unpushed_tags': unpushed_tags
             }
         except subprocess.CalledProcessError:
             return {'is_repo': False}
 
-    def create_tag(self, version: str, message: Optional[str] = None) -> bool:
-        """Create and push git tag.
+    def create_tag(self, version: str, message: Optional[str] = None, push: bool = True) -> bool:
+        """Create and optionally push git tag.
 
         Args:
             version: Version to tag (e.g., "1.0.0")
             message: Optional tag message
+            push: Whether to push the tag to origin (default: True)
 
         Returns:
             True if successful, False otherwise
@@ -81,16 +86,19 @@ class GitManager:
             self._run_command(['git', 'tag', '-a', tag_name, '-m', tag_message])
             print(f"✅ Tag {tag_name} created")
 
-            # Push tag to origin
-            try:
-                print(f"📤 Pushing tag to origin...")
-                self._run_command(['git', 'push', 'origin', tag_name])
-                print(f"✅ Tag pushed to origin")
-                return True
-            except subprocess.CalledProcessError as e:
-                print(f"⚠️  Could not push tag to origin: {e}")
-                print(f"You can push it manually with: git push origin {tag_name}")
-                return True  # Tag created successfully, push can be done manually
+            # Push tag to origin if requested
+            if push:
+                try:
+                    print(f"📤 Pushing tag to origin...")
+                    self._run_command(['git', 'push', 'origin', tag_name])
+                    print(f"✅ Tag pushed to origin")
+                    return True
+                except subprocess.CalledProcessError as e:
+                    print(f"⚠️  Could not push tag to origin: {e}")
+                    print(f"You can push it manually with: git push origin {tag_name}")
+                    return True  # Tag created successfully, push can be done manually
+            else:
+                return True  # Tag created successfully, user chose not to push
 
         except subprocess.CalledProcessError as e:
             print(f"❌ Failed to create tag: {e}")
@@ -178,6 +186,47 @@ class GitManager:
         except subprocess.CalledProcessError:
             return None
 
+    def get_unpushed_tags(self, remote: str = 'origin') -> List[str]:
+        """Get list of tags that exist locally but not on remote.
+
+        Args:
+            remote: Remote name to compare against (default: 'origin')
+
+        Returns:
+            List of unpushed tag names
+        """
+        try:
+            # Get local tags
+            local_result = self._run_command(['git', 'tag', '-l'])
+            local_tags = set(tag.strip() for tag in local_result.stdout.strip().split('\n') if tag.strip())
+
+            # Get remote tags
+            try:
+                remote_result = self._run_command(['git', 'ls-remote', '--tags', remote])
+                remote_lines = remote_result.stdout.strip().split('\n')
+
+                # Parse remote tags (format: "hash refs/tags/tagname")
+                remote_tags = set()
+                for line in remote_lines:
+                    if not line:
+                        continue
+                    parts = line.split('refs/tags/')
+                    if len(parts) > 1:
+                        # Remove ^{} suffix for annotated tags
+                        tag_name = parts[1].replace('^{}', '')
+                        remote_tags.add(tag_name)
+
+                # Find tags that are local but not remote
+                unpushed = sorted(local_tags - remote_tags)
+                return unpushed
+
+            except subprocess.CalledProcessError:
+                # Remote not available, assume all tags are unpushed
+                return sorted(local_tags)
+
+        except subprocess.CalledProcessError:
+            return []
+
     def _run_command(self, cmd: List[str]) -> subprocess.CompletedProcess:
         """Run a git command.
 

capabilities/release-management/src/release_management/summary/__init__.py

@@ -0,0 +1,9 @@
+"""
+Release summary generation tools.
+
+This package provides tools for generating release summary documents.
+"""
+
+from .generator import SummaryGenerator
+
+__all__ = ['SummaryGenerator']

capabilities/release-management/src/release_management/summary/generator.py

@@ -0,0 +1,305 @@
+"""
+Release summary generator.
+
+This module generates comprehensive release summary documents from
+CHANGELOG content and git metadata.
+"""
+
+import subprocess
+from datetime import datetime
+from pathlib import Path
+from typing import Optional, Dict, Any, List
+import re
+
+
+class SummaryGenerator:
+    """Generate release summary documents."""
+
+    def __init__(self, project_root: Optional[Path] = None):
+        """Initialize summary generator.
+
+        Args:
+            project_root: Root directory of the project
+        """
+        self.project_root = project_root or Path.cwd()
+        self.changelog_path = self.project_root / 'CHANGELOG.md'
+        self.dist_dir = self.project_root / 'dist'
+
+    def generate(self, version: str, output_path: Optional[Path] = None) -> str:
+        """Generate release summary document.
+
+        Args:
+            version: Version to generate summary for (e.g., "0.10.0")
+            output_path: Optional path to write summary to
+
+        Returns:
+            Generated summary content
+        """
+        version_clean = version.lstrip('v')
+        tag_name = f"v{version_clean}"
+
+        # Get components
+        changelog_section = self.extract_changelog_section(version_clean)
+        git_stats = self.get_git_statistics(tag_name)
+        build_artifacts = self.list_build_artifacts()
+        validation_results = self.get_validation_results()
+
+        # Determine project name
+        project_name = self._get_project_name()
+
+        # Build summary
+        summary = f"""# {project_name} {version_clean} Release Summary
+
+**Release Date**: {git_stats.get('release_date', 'Unknown')}
+**Git Tag**: {tag_name}
+**Commit**: {git_stats.get('commit_hash', 'Unknown')}
+
+---
+
+## Changes
+
+{changelog_section}
+
+---
+
+## Git Statistics
+
+- **Commits**: {git_stats.get('commit_count', 0)} commit(s) since last release
+- **Files Changed**: {git_stats.get('files_changed', 0)} file(s)
+- **Insertions**: +{git_stats.get('insertions', 0)} lines
+- **Deletions**: -{git_stats.get('deletions', 0)} lines
+- **Contributors**: {git_stats.get('contributors', 'Unknown')}
+
+---
+
+## Build Artifacts
+
+{build_artifacts}
+
+---
+
+## Validation
+
+{validation_results}
+
+---
+
+**Generated**: {datetime.now().strftime("%Y-%m-%d %H:%M:%S")}
+"""
+
+        if output_path:
+            output_path.write_text(summary)
+            print(f"✅ Release summary written to {output_path}")
+
+        return summary
+
+    def extract_changelog_section(self, version: str) -> str:
+        """Extract CHANGELOG section for a specific version.
+
+        Args:
+            version: Version to extract (e.g., "0.10.0")
+
+        Returns:
+            Markdown content of the version section
+        """
+        if not self.changelog_path.exists():
+            return "⚠️ CHANGELOG.md not found"
+
+        try:
+            with open(self.changelog_path) as f:
+                content = f.read()
+
+            # Find the version section
+            pattern = rf"## \[{re.escape(version)}\].*?\n\n(.*?)(?=\n## \[|\Z)"
+            match = re.search(pattern, content, re.DOTALL)
+
+            if match:
+                section_content = match.group(1).strip()
+                return section_content if section_content else "No changes documented"
+            else:
+                return f"⚠️ No section found for version {version} in CHANGELOG.md"
+
+        except Exception as e:
+            return f"❌ Error reading CHANGELOG: {e}"
+
+    def get_git_statistics(self, tag: str) -> Dict[str, Any]:
+        """Get git statistics for a release tag.
+
+        Args:
+            tag: Git tag name (e.g., "v0.10.0")
+
+        Returns:
+            Dictionary with git statistics
+        """
+        stats = {}
+
+        try:
+            # Get tag date
+            try:
+                result = subprocess.run(
+                    ['git', 'log', '-1', '--format=%ci', tag],
+                    capture_output=True, text=True, check=True, cwd=self.project_root
+                )
+                date_str = result.stdout.strip()
+                # Parse to get just the date
+                stats['release_date'] = date_str.split()[0] if date_str else 'Unknown'
+            except subprocess.CalledProcessError:
+                stats['release_date'] = 'Unknown'
+
+            # Get commit hash
+            try:
+                result = subprocess.run(
+                    ['git', 'rev-parse', tag],
+                    capture_output=True, text=True, check=True, cwd=self.project_root
+                )
+                stats['commit_hash'] = result.stdout.strip()[:8]
+            except subprocess.CalledProcessError:
+                stats['commit_hash'] = 'Unknown'
+
+            # Find previous tag
+            try:
+                result = subprocess.run(
+                    ['git', 'describe', '--tags', '--abbrev=0', f'{tag}^'],
+                    capture_output=True, text=True, check=True, cwd=self.project_root
+                )
+                previous_tag = result.stdout.strip()
+            except subprocess.CalledProcessError:
+                # No previous tag, use initial commit
+                previous_tag = None
+
+            # Get commit count
+            if previous_tag:
+                try:
+                    result = subprocess.run(
+                        ['git', 'rev-list', '--count', f'{previous_tag}..{tag}'],
+                        capture_output=True, text=True, check=True, cwd=self.project_root
+                    )
+                    stats['commit_count'] = int(result.stdout.strip())
+                except subprocess.CalledProcessError:
+                    stats['commit_count'] = 0
+            else:
+                try:
+                    result = subprocess.run(
+                        ['git', 'rev-list', '--count', tag],
+                        capture_output=True, text=True, check=True, cwd=self.project_root
+                    )
+                    stats['commit_count'] = int(result.stdout.strip())
+                except subprocess.CalledProcessError:
+                    stats['commit_count'] = 0
+
+            # Get file changes, insertions, deletions
+            if previous_tag:
+                diff_range = f'{previous_tag}..{tag}'
+            else:
+                diff_range = tag
+
+            try:
+                result = subprocess.run(
+                    ['git', 'diff', '--shortstat', diff_range],
+                    capture_output=True, text=True, check=True, cwd=self.project_root
+                )
+                shortstat = result.stdout.strip()
+
+                # Parse shortstat: "X files changed, Y insertions(+), Z deletions(-)"
+                files_match = re.search(r'(\d+) files? changed', shortstat)
+                insert_match = re.search(r'(\d+) insertions?', shortstat)
+                delete_match = re.search(r'(\d+) deletions?', shortstat)
+
+                stats['files_changed'] = int(files_match.group(1)) if files_match else 0
+                stats['insertions'] = int(insert_match.group(1)) if insert_match else 0
+                stats['deletions'] = int(delete_match.group(1)) if delete_match else 0
+            except subprocess.CalledProcessError:
+                stats['files_changed'] = 0
+                stats['insertions'] = 0
+                stats['deletions'] = 0
+
+            # Get contributors
+            try:
+                result = subprocess.run(
+                    ['git', 'log', '--format=%an', f'{previous_tag}..{tag}' if previous_tag else tag],
+                    capture_output=True, text=True, check=True, cwd=self.project_root
+                )
+                contributors = list(set(result.stdout.strip().split('\n')))
+                stats['contributors'] = ', '.join(contributors) if contributors and contributors[0] else 'Unknown'
+            except subprocess.CalledProcessError:
+                stats['contributors'] = 'Unknown'
+
+        except Exception as e:
+            print(f"⚠️  Error getting git statistics: {e}")
+
+        return stats
+
+    def list_build_artifacts(self) -> str:
+        """List build artifacts in dist/ directory.
+
+        Returns:
+            Formatted markdown list of build artifacts
+        """
+        if not self.dist_dir.exists():
+            return "No build artifacts found (dist/ directory does not exist)"
+
+        artifacts = list(self.dist_dir.glob('*'))
+        if not artifacts:
+            return "No build artifacts found in dist/"
+
+        lines = []
+        for artifact in sorted(artifacts):
+            if artifact.is_file():
+                size = artifact.stat().st_size
+                size_kb = size / 1024
+                size_mb = size / (1024 * 1024)
+
+                if size_mb >= 1:
+                    size_str = f"{size_mb:.2f} MB"
+                else:
+                    size_str = f"{size_kb:.2f} KB"
+
+                lines.append(f"- **{artifact.name}** ({size_str})")
+
+        return '\n'.join(lines) if lines else "No build artifacts found"
+
+    def get_validation_results(self) -> str:
+        """Get validation results summary.
+
+        Returns:
+            Formatted validation results
+        """
+        # Import here to avoid circular dependency
+        from ..utils.validation import ReleaseValidator
+
+        validator = ReleaseValidator(self.project_root)
+        is_valid, issues = validator.validate_release_state(force=True)  # Force to get all issues
+
+        if is_valid:
+            return "✅ All validation checks passed"
+        else:
+            lines = ["Validation Issues:"]
+            for issue in issues:
+                lines.append(f"- {issue}")
+            return '\n'.join(lines)
+
+    def _get_project_name(self) -> str:
+        """Get project name from pyproject.toml.
+
+        Returns:
+            Project name or default
+        """
+        pyproject_path = self.project_root / 'pyproject.toml'
+
+        if not pyproject_path.exists():
+            return "Project"
+
+        try:
+            import tomllib
+        except ImportError:
+            try:
+                import tomli as tomllib
+            except ImportError:
+                return "Project"
+
+        try:
+            with open(pyproject_path, 'rb') as f:
+                config = tomllib.load(f)
+                return config.get('project', {}).get('name', 'Project').title()
+        except Exception:
+            return "Project"

capabilities/release-management/src/release_management/utils/validation.py

@@ -4,6 +4,7 @@ Release validation utilities.
 This module provides validation functions for release readiness.
 """
 
+import subprocess
 from pathlib import Path
 from typing import List, Tuple, Optional
 
@@ -48,6 +49,10 @@ class ReleaseValidator:
         config_issues = self._validate_configuration()
         issues.extend(config_issues)
 
+        # CHANGELOG validation
+        changelog_issues = self._validate_changelog()
+        issues.extend(changelog_issues)
+
         return len(issues) == 0, issues
 
     def _validate_git_state(self) -> List[str]:
@@ -186,6 +191,117 @@ class ReleaseValidator:
 
         return len(issues) == 0, issues
 
+    def _validate_changelog(self) -> List[str]:
+        """Validate CHANGELOG.md using changelog schema.
+
+        Returns:
+            List of CHANGELOG-related issues
+        """
+        issues = []
+        changelog_path = self.project_root / 'CHANGELOG.md'
+
+        # Check if CHANGELOG exists
+        if not changelog_path.exists():
+            issues.append("Missing CHANGELOG.md file")
+            return issues
+
+        # Check if changelog schema exists
+        schema_path = self.project_root / 'markitect' / 'schemas' / 'changelog-schema-v1.0.md'
+        if not schema_path.exists():
+            # Schema doesn't exist, skip validation
+            return issues
+
+        # Validate CHANGELOG with schema using markitect validate command
+        try:
+            result = subprocess.run(
+                [
+                    'markitect', 'validate', str(changelog_path),
+                    '--schema', str(schema_path),
+                    '--semantic'
+                ],
+                capture_output=True,
+                text=True,
+                cwd=self.project_root
+            )
+
+            if result.returncode != 0:
+                issues.append("CHANGELOG.md validation failed against schema")
+                # Parse output for specific errors
+                if 'Unreleased section' in result.stdout:
+                    issues.append("  - Missing [Unreleased] section in CHANGELOG")
+                if 'version format' in result.stdout.lower():
+                    issues.append("  - Invalid version format in CHANGELOG")
+
+        except FileNotFoundError:
+            # markitect command not available
+            issues.append("Cannot validate CHANGELOG (markitect command not found)")
+        except Exception as e:
+            issues.append(f"Error validating CHANGELOG: {e}")
+
+        return issues
+
+    def validate_changelog_version(self, version: str) -> Tuple[bool, List[str]]:
+        """Validate that CHANGELOG has section for specified version.
+
+        Args:
+            version: Version to check (e.g., "0.10.0")
+
+        Returns:
+            Tuple of (is_valid, list_of_issues)
+        """
+        issues = []
+        changelog_path = self.project_root / 'CHANGELOG.md'
+
+        if not changelog_path.exists():
+            issues.append("CHANGELOG.md not found")
+            return False, issues
+
+        try:
+            content = changelog_path.read_text()
+
+            # Check for version section
+            version_header = f"## [{version}]"
+            if version_header not in content:
+                issues.append(f"CHANGELOG missing section for version {version}")
+
+            # Check for Unreleased section
+            if "## [Unreleased]" not in content:
+                issues.append("CHANGELOG missing [Unreleased] section")
+
+            # Check if version section has a date
+            import re
+            date_pattern = rf"## \[{re.escape(version)}\] - \d{{4}}-\d{{2}}-\d{{2}}"
+            if not re.search(date_pattern, content):
+                issues.append(f"Version {version} section missing date or has invalid date format")
+
+        except Exception as e:
+            issues.append(f"Error reading CHANGELOG: {e}")
+
+        return len(issues) == 0, issues
+
+    def check_version_tag_consistency(self, version: str) -> Tuple[bool, List[str]]:
+        """Check consistency between CHANGELOG version and git tags.
+
+        Args:
+            version: Version to check (e.g., "0.10.0")
+
+        Returns:
+            Tuple of (is_consistent, list_of_issues)
+        """
+        issues = []
+
+        # Check CHANGELOG has the version
+        changelog_valid, changelog_issues = self.validate_changelog_version(version)
+        if not changelog_valid:
+            issues.extend(changelog_issues)
+
+        # Check git tag exists
+        tag_name = version if version.startswith('v') else f'v{version}'
+        if not self.git_manager.tag_exists(tag_name):
+            issues.append(f"Git tag {tag_name} doesn't exist for version in CHANGELOG")
+
+        return len(issues) == 0, issues
+
     def get_validation_summary(self) -> dict:
         """Get a comprehensive validation summary.
 
@@ -224,6 +340,10 @@ class ReleaseValidator:
         if any('authentication' in issue.lower() for issue in issues):
             recommendations.append("Set up authentication tokens for package publishing")
 
+        if any('CHANGELOG' in issue for issue in issues):
+            recommendations.append("Fix CHANGELOG.md format and ensure [Unreleased] section exists")
+            recommendations.append("Validate with: markitect validate CHANGELOG.md --schema changelog-schema-v1.0.md --semantic")
+
         if not issues:
             recommendations.append("Repository is ready for release!")
 

capabilities/testdrive-jsui/Makefile

@@ -1,234 +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:"
-	npm test
-	@echo ""
-	@echo "📋 Python Tests:"
-	$(VENV_PYTHON) -m pytest tests/ -v
-	@echo ""
-	@echo "✅ All tests completed!"
-
-# 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

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*

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;
-}

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;
-}

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;
-}

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();
-    });
-});

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>';
-});

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;

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(),
-};

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');
-    });
-}

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');
-    });
-}

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');
-    });
-}

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');
-    });
-}

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');
-    });
-}

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');
-    });
-});

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');
-    });
-}

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');
-    });
-}

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');
-    });
-}

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');
-    });
-}

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');
-    });
-}

capabilities/testdrive-jsui/node_modules/.bin/acorn

@@ -1 +0,0 @@
-../acorn/bin/acorn

capabilities/testdrive-jsui/node_modules/.bin/baseline-browser-mapping

@@ -1 +0,0 @@
-../baseline-browser-mapping/dist/cli.js

capabilities/testdrive-jsui/node_modules/.bin/browserslist

@@ -1 +0,0 @@
-../browserslist/cli.js

capabilities/testdrive-jsui/node_modules/.bin/create-jest

@@ -1 +0,0 @@
-../create-jest/bin/create-jest.js

capabilities/testdrive-jsui/node_modules/.bin/escodegen

@@ -1 +0,0 @@
-../escodegen/bin/escodegen.js

capabilities/testdrive-jsui/node_modules/.bin/esgenerate

@@ -1 +0,0 @@
-../escodegen/bin/esgenerate.js

capabilities/testdrive-jsui/node_modules/.bin/eslint

@@ -1 +0,0 @@
-../eslint/bin/eslint.js

capabilities/testdrive-jsui/node_modules/.bin/esparse

@@ -1 +0,0 @@
-../esprima/bin/esparse.js

capabilities/testdrive-jsui/node_modules/.bin/esvalidate

@@ -1 +0,0 @@
-../esprima/bin/esvalidate.js

capabilities/testdrive-jsui/node_modules/.bin/import-local-fixture

@@ -1 +0,0 @@
-../import-local/fixtures/cli.js

capabilities/testdrive-jsui/node_modules/.bin/jest

@@ -1 +0,0 @@
-../jest/bin/jest.js

capabilities/testdrive-jsui/node_modules/.bin/js-yaml

@@ -1 +0,0 @@
-../js-yaml/bin/js-yaml.js

capabilities/testdrive-jsui/node_modules/.bin/jsesc

@@ -1 +0,0 @@
-../jsesc/bin/jsesc

capabilities/testdrive-jsui/node_modules/.bin/json5

@@ -1 +0,0 @@
-../json5/lib/cli.js

capabilities/testdrive-jsui/node_modules/.bin/node-which

@@ -1 +0,0 @@
-../which/bin/node-which

capabilities/testdrive-jsui/node_modules/.bin/parser

@@ -1 +0,0 @@
-../@babel/parser/bin/babel-parser.js

capabilities/testdrive-jsui/node_modules/.bin/regjsparser

@@ -1 +0,0 @@
-../regjsparser/bin/parser

capabilities/testdrive-jsui/node_modules/.bin/resolve

@@ -1 +0,0 @@
-../resolve/bin/resolve

capabilities/testdrive-jsui/node_modules/.bin/rimraf

@@ -1 +0,0 @@
-../rimraf/bin.js

capabilities/testdrive-jsui/node_modules/.bin/semver

@@ -1 +0,0 @@
-../semver/bin/semver.js

capabilities/testdrive-jsui/node_modules/.bin/tsc

@@ -1 +0,0 @@
-../typescript/bin/tsc

capabilities/testdrive-jsui/node_modules/.bin/tsserver

@@ -1 +0,0 @@
-../typescript/bin/tsserver

capabilities/testdrive-jsui/node_modules/.bin/update-browserslist-db

@@ -1 +0,0 @@
-../update-browserslist-db/cli.js

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.

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

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.

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).

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"
-}

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"
-}

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;

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;
-};

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';

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';

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
-};

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;
-};

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;
-};

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 '';
-};

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;
-}

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;
-};

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
-];

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];
-};

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.

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

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"
-}

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();

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$/;

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
-  };
-};

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';

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>;

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;