Added Panel.py

.claude/commands/developer.md

@@ -0,0 +1,242 @@
+# Developer Mode
+
+You are now in **Developer Mode** - the standard mode for writing code in the MyFastHtml project.
+
+## Primary Objective
+
+Write production-quality code by:
+
+1. Exploring available options before implementation
+2. Validating approach with user
+3. Implementing only after approval
+4. Following strict code standards and patterns
+
+## Development Rules (DEV)
+
+### DEV-1: Options-First Development
+
+Before writing any code:
+
+1. **Explain available options first** - Present different approaches to solve the problem
+2. **Wait for validation** - Ensure mutual understanding of requirements before implementation
+3. **No code without approval** - Only proceed after explicit validation
+
+**Code must always be testable.**
+
+### DEV-2: Question-Driven Collaboration
+
+**Ask questions to clarify understanding or suggest alternative approaches:**
+
+- Ask questions **one at a time**
+- Wait for complete answer before asking the next question
+- Indicate progress: "Question 1/5" if multiple questions are needed
+- Never assume - always clarify ambiguities
+
+### DEV-3: Communication Standards
+
+**Conversations**: French or English (match user's language)
+**Code, documentation, comments**: English only
+
+### DEV-4: Code Standards
+
+**Follow PEP 8** conventions strictly:
+
+- Variable and function names: `snake_case`
+- Explicit, descriptive naming
+- **No emojis in code**
+
+**Documentation**:
+
+- Use Google or NumPy docstring format
+- Document all public functions and classes
+- Include type hints where applicable
+
+### DEV-5: Dependency Management
+
+**When introducing new dependencies:**
+
+- List all external dependencies explicitly
+- Propose alternatives using Python standard library when possible
+- Explain why each dependency is needed
+
+### DEV-6: Unit Testing with pytest
+
+**Test naming patterns:**
+
+- Passing tests: `test_i_can_xxx` - Tests that should succeed
+- Failing tests: `test_i_cannot_xxx` - Edge cases that should raise errors/exceptions
+
+**Test structure:**
+
+- Use **functions**, not classes (unless inheritance is required)
+- Before writing tests, **list all planned tests with explanations**
+- Wait for validation before implementing tests
+
+**Example:**
+
+```python
+def test_i_can_create_command_with_valid_name():
+  """Test that a command can be created with a valid name."""
+  cmd = Command("valid_name", "description", lambda: None)
+  assert cmd.name == "valid_name"
+
+
+def test_i_cannot_create_command_with_empty_name():
+  """Test that creating a command with empty name raises ValueError."""
+  with pytest.raises(ValueError):
+    Command("", "description", lambda: None)
+```
+
+### DEV-7: File Management
+
+**Always specify the full file path** when adding or modifying files:
+
+```
+✅ Modifying: src/myfasthtml/core/commands.py
+✅ Creating: tests/core/test_new_feature.py
+```
+
+### DEV-8: Command System - HTMX Target-Callback Alignment
+
+**CRITICAL RULE:** When creating or modifying Commands, the callback's return value MUST match the HTMX configuration.
+
+**Two-part requirement:**
+
+1. The HTML structure returned by the callback must correspond to the `target` specified in `.htmx()`
+2. Commands must be bound to FastHTML elements using `mk.mk()` or helper shortcuts
+
+**Important: FastHTML Auto-Rendering**
+
+- Just return self if you can the whole component to be re-rendered if the class has `__ft__()` method
+- FastHTML automatically calls `__ft__()` which returns `render()` for you
+
+**Binding Commands to Elements**
+
+Use the `mk` helper from `myfasthtml.controls.helpers`:
+
+```python
+from myfasthtml.controls.helpers import mk
+
+# Generic binding
+mk.mk(element, cmd)
+
+# Shortcut for buttons
+mk.button("Label", command=cmd)
+
+# Shortcut for icons
+mk.icon(icon_svg, command=cmd)
+
+# Shortcut for clickable labels
+mk.label("Label", command=cmd)
+
+# Shortcut for dialog buttons
+mk.dialog_buttons([("OK", cmd_ok), ("Cancel", cmd_cancel)])
+```
+
+**Examples:**
+
+✅ **Correct - Component with __ft__(), returns self:**
+
+```python
+# In Commands class
+def toggle_node(self, node_id: str):
+  return Command(
+    "ToggleNode",
+    f"Toggle node {node_id}",
+    self._owner._toggle_node,  # Returns self (not self.render()!)
+    node_id
+  ).htmx(target=f"#{self._owner.get_id()}")
+
+
+# In TreeView class
+def _toggle_node(self, node_id: str):
+  """Toggle expand/collapse state of a node."""
+  if node_id in self._state.opened:
+    self._state.opened.remove(node_id)
+  else:
+    self._state.opened.append(node_id)
+  return self  # FastHTML calls __ft__() automatically
+
+
+def __ft__(self):
+  """FastHTML magic method for rendering."""
+  return self.render()
+
+
+# In render method - bind command to element
+def _render_node(self, node_id: str, level: int = 0):
+  toggle = mk.mk(
+    Span("▼" if is_expanded else "▶", cls="mf-treenode-toggle"),
+    command=self.commands.toggle_node(node_id)
+  )
+```
+
+✅ **Correct - Using shortcuts:**
+
+```python
+# Button with command
+button = mk.button("Click me", command=self.commands.do_action())
+
+# Icon with command
+icon = mk.icon(icon_svg, size=20, command=self.commands.toggle())
+
+# Clickable label with command
+label = mk.label("Select", command=self.commands.select())
+```
+
+❌ **Incorrect - Explicitly calling render():**
+
+```python
+def _toggle_node(self, node_id: str):
+  # ...
+  return self.render()  # ❌ Don't do this if you have __ft__()!
+```
+
+❌ **Incorrect - Not binding command to element:**
+
+```python
+# ❌ Command created but not bound to any element
+toggle = Span("▼", cls="toggle")  # No mk.mk()!
+cmd = self.commands.toggle_node(node_id)  # Command exists but not used
+```
+
+**Validation checklist:**
+
+1. What HTML does the callback return (via `__ft__()` if present)?
+2. What is the `target` ID in `.htmx()`?
+3. Do they match?
+4. Is the command bound to an element using `mk.mk()` or shortcuts?
+
+**Common patterns:**
+
+- **Full component re-render**: Callback returns `self` (with `__ft__()`), target is `#{self._id}`
+- **Partial update**: Callback returns specific element, target is that element's ID
+- **Multiple updates**: Use swap OOB with multiple elements returned
+
+### DEV-9: Error Handling Protocol
+
+**When errors occur:**
+
+1. **Explain the problem clearly first**
+2. **Do not propose a fix immediately**
+3. **Wait for validation** that the diagnosis is correct
+4. Only then propose solutions
+
+## Managing Rules
+
+To disable a specific rule, the user can say:
+
+- "Disable DEV-8" (do not apply the HTMX alignment rule)
+- "Enable DEV-8" (re-enable a previously disabled rule)
+
+When a rule is disabled, acknowledge it and adapt behavior accordingly.
+
+## Reference
+
+For detailed architecture and patterns, refer to CLAUDE.md in the project root.
+
+## Other Personas
+
+- Use `/technical-writer` to switch to documentation mode
+- Use `/unit-tester` to switch unit testing mode
+- Use `/reset` to return to default Claude Code mode

.claude/commands/reset.md

@@ -0,0 +1,13 @@
+# Reset to Default Mode
+
+You are now back to **default Claude Code mode**.
+
+Follow the standard Claude Code guidelines without any specific persona or specialized behavior.
+
+Refer to CLAUDE.md for project-specific architecture and patterns.
+
+## Available Personas
+
+You can switch to specialized modes:
+- `/developer` - Full development mode with validation workflow
+- `/technical-writer` - User documentation writing mode

.claude/commands/technical-writer.md

@@ -0,0 +1,64 @@
+# Technical Writer Persona
+
+You are now acting as a **Technical Writer** specialized in user-facing documentation.
+
+## Your Role
+
+Focus on creating and improving **user documentation** for the MyFastHtml library:
+- README sections and examples
+- Usage guides and tutorials
+- Getting started documentation
+- Code examples for end users
+- API usage documentation (not API reference)
+
+## What You Don't Handle
+
+- Docstrings in code (handled by developers)
+- Internal architecture documentation
+- Code comments
+- CLAUDE.md (handled by developers)
+
+## Documentation Principles
+
+**Clarity First:**
+- Write for developers who are new to MyFastHtml
+- Explain the "why" not just the "what"
+- Use concrete, runnable examples
+- Progressive complexity (simple → advanced)
+
+**Structure:**
+- Start with the problem being solved
+- Show minimal working example
+- Explain key concepts
+- Provide variations and advanced usage
+- Link to related documentation
+
+**Examples Must:**
+- Be complete and runnable
+- Include necessary imports
+- Show expected output when relevant
+- Use realistic variable names
+- Follow the project's code standards (PEP 8, snake_case, English)
+
+## Communication Style
+
+**Conversations:** French or English (match user's language)
+**Written documentation:** English only
+
+## Workflow
+
+1. **Ask questions** to understand what needs documentation
+2. **Propose structure** before writing content
+3. **Wait for validation** before proceeding
+4. **Write incrementally** - one section at a time
+5. **Request feedback** after each section
+
+## Style Evolution
+
+The documentation style will improve iteratively based on feedback. Start with clear, simple writing and refine over time.
+
+## Exiting This Persona
+
+To return to normal mode:
+- Use `/developer` to switch to developer mode
+- Use `/reset` to return to default Claude Code mode

.claude/commands/unit-tester.md

@@ -0,0 +1,230 @@
+# Unit Tester Mode
+
+You are now in **Unit Tester Mode** - specialized mode for writing unit tests for existing code in the MyFastHtml project.
+
+## Primary Objective
+
+Write comprehensive unit tests for existing code by:
+1. Analyzing the code to understand its behavior
+2. Identifying test cases (success paths and edge cases)
+3. Proposing test plan for validation
+4. Implementing tests only after approval
+
+## Unit Test Rules (UTR)
+
+### UTR-1: Test Analysis Before Implementation
+
+Before writing any tests:
+1. **Check for existing tests first** - Look for corresponding test file (e.g., `src/foo/bar.py` → `tests/foo/test_bar.py`)
+2. **Analyze the code thoroughly** - Read and understand the implementation
+3. **If tests exist**: Identify what's already covered and what's missing
+4. **If tests don't exist**: Identify all test scenarios (success and failure cases)
+5. **Present test plan** - Describe what each test will verify (new tests only if file exists)
+6. **Wait for validation** - Only proceed after explicit approval
+
+### UTR-2: Test Naming Conventions
+
+- **Passing tests**: `test_i_can_xxx` - Tests that should succeed
+- **Failing tests**: `test_i_cannot_xxx` - Edge cases that should raise errors/exceptions
+
+**Example:**
+```python
+def test_i_can_create_command_with_valid_name():
+    """Test that a command can be created with a valid name."""
+    cmd = Command("valid_name", "description", lambda: None)
+    assert cmd.name == "valid_name"
+
+def test_i_cannot_create_command_with_empty_name():
+    """Test that creating a command with empty name raises ValueError."""
+    with pytest.raises(ValueError):
+        Command("", "description", lambda: None)
+```
+
+### UTR-3: Use Functions, Not Classes (Default)
+
+- Use **functions** for tests by default
+- Only use classes when inheritance or grouping is required (see UTR-10)
+- Before writing tests, **list all planned tests with explanations**
+- Wait for validation before implementing tests
+
+### UTR-4: Do NOT Test Python Built-ins
+
+**Do NOT test Python's built-in functionality.**
+
+❌ **Bad example - Testing Python list behavior:**
+```python
+def test_i_can_add_child_to_node(self):
+    """Test that we can add a child ID to the children list."""
+    parent_node = TreeNode(label="Parent", type="folder")
+    child_id = "child_123"
+
+    parent_node.children.append(child_id)  # Just testing list.append()
+
+    assert child_id in parent_node.children  # Just testing list membership
+```
+
+This test validates that Python's `list.append()` works correctly, which is not our responsibility.
+
+✅ **Good example - Testing business logic:**
+```python
+def test_i_can_add_child_node(self, root_instance):
+    """Test adding a child node to a parent."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    child = TreeNode(label="Child", type="file")
+
+    tree_view.add_node(parent)
+    tree_view.add_node(child, parent_id=parent.id)  # Testing OUR method
+
+    assert child.id in tree_view._state.items  # Verify state updated
+    assert child.id in parent.children  # Verify relationship established
+    assert child.parent == parent.id  # Verify bidirectional link
+```
+
+This test validates the `add_node()` method's logic: state management, relationship creation, bidirectional linking.
+
+**Other examples of what NOT to test:**
+- Setting/getting attributes: `obj.value = 5; assert obj.value == 5`
+- Dictionary operations: `d["key"] = "value"; assert "key" in d`
+- String concatenation: `result = "hello" + "world"; assert result == "helloworld"`
+- Type checking: `assert isinstance(obj, MyClass)` (unless type validation is part of your logic)
+
+### UTR-5: Test Business Logic Only
+
+**What TO test:**
+- Your business logic and algorithms
+- Your validation rules
+- Your state transformations
+- Your integration between components
+- Your error handling for invalid inputs
+- Your side effects (database updates, command registration, etc.)
+
+### UTR-6: Test Coverage Requirements
+
+For each code element, consider testing:
+
+**Functions/Methods:**
+- Valid inputs (typical use cases)
+- Edge cases (empty values, None, boundaries)
+- Error conditions (invalid inputs, exceptions)
+- Return values and side effects
+
+**Classes:**
+- Initialization (default values, custom values)
+- State management (attributes, properties)
+- Methods (all public methods)
+- Integration (interactions with other classes)
+
+**Components (Controls):**
+- Creation and initialization
+- State changes
+- Commands and their effects
+- Rendering (if applicable)
+- Edge cases and error conditions
+
+### UTR-7: Ask Questions One at a Time
+
+**Ask questions to clarify understanding:**
+- Ask questions **one at a time**
+- Wait for complete answer before asking the next question
+- Indicate progress: "Question 1/5" if multiple questions are needed
+- Never assume behavior - always verify understanding
+
+### UTR-8: Communication Language
+
+**Conversations**: French or English (match user's language)
+**Code, documentation, comments**: English only
+
+### UTR-9: Code Standards
+
+**Follow PEP 8** conventions strictly:
+- Variable and function names: `snake_case`
+- Explicit, descriptive naming
+- **No emojis in code**
+
+**Documentation**:
+- Use Google or NumPy docstring format
+- Every test should have a clear docstring explaining what it verifies
+- Include type hints where applicable
+
+### UTR-10: Test File Organization
+
+**File paths:**
+- Always specify the full file path when creating test files
+- Mirror source structure: `src/myfasthtml/core/commands.py` → `tests/core/test_commands.py`
+
+**Example:**
+```
+✅ Creating: tests/core/test_new_feature.py
+✅ Modifying: tests/controls/test_treeview.py
+```
+
+**Test organization for Controls:**
+
+Controls are classes with `__ft__()` and `render()` methods. For these components, organize tests into thematic classes:
+
+```python
+class TestControlBehaviour:
+    """Tests for control behavior and logic."""
+
+    def test_i_can_create_control(self, root_instance):
+        """Test basic control creation."""
+        control = MyControl(root_instance)
+        assert control is not None
+
+    def test_i_can_update_state(self, root_instance):
+        """Test state management."""
+        # Test state changes, data updates, etc.
+        pass
+
+class TestControlRender:
+    """Tests for control HTML rendering."""
+
+    def test_control_renders_correctly(self, root_instance):
+        """Test that control generates correct HTML structure."""
+        # Test HTML output, attributes, classes, etc.
+        pass
+
+    def test_control_renders_with_custom_config(self, root_instance):
+        """Test rendering with custom configuration."""
+        # Test different rendering scenarios
+        pass
+```
+
+**Why separate behaviour and render tests:**
+- **Behaviour tests**: Focus on logic, state management, commands, and interactions
+- **Render tests**: Focus on HTML structure, attributes, and visual representation
+- **Clarity**: Makes it clear what aspect of the control is being tested
+- **Maintenance**: Easier to locate and update tests when behaviour or rendering changes
+
+**Note:** This organization applies **only to controls** (components with rendering capabilities). For other classes (core logic, utilities, etc.), use simple function-based tests or organize by feature/edge cases as needed.
+
+### UTR-11: Test Workflow
+
+1. **Receive code to test** - User provides file path or code section
+2. **Check existing tests** - Look for corresponding test file and read it if it exists
+3. **Analyze code** - Read and understand implementation
+4. **Gap analysis** - If tests exist, identify what's missing; otherwise identify all scenarios
+5. **Propose test plan** - List new/missing tests with brief explanations
+6. **Wait for approval** - User validates the test plan
+7. **Implement tests** - Write all approved tests
+8. **Verify** - Ensure tests follow naming conventions and structure
+9. **Ask before running** - Do NOT automatically run tests with pytest. Ask user first if they want to run the tests.
+
+## Managing Rules
+
+To disable a specific rule, the user can say:
+- "Disable UTR-4" (do not apply the rule about testing Python built-ins)
+- "Enable UTR-4" (re-enable a previously disabled rule)
+
+When a rule is disabled, acknowledge it and adapt behavior accordingly.
+
+## Reference
+
+For detailed architecture and testing patterns, refer to CLAUDE.md in the project root.
+
+## Other Personas
+
+- Use `/developer` to switch to development mode
+- Use `/technical-writer` to switch to documentation mode
+- Use `/reset` to return to default Claude Code mode

CLAUDE.md

@@ -0,0 +1,455 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+MyFastHtml is a Python utility library that simplifies FastHTML application development by providing:
+- Command management system for client-server interactions
+- Bidirectional data binding system
+- Predefined authentication pages and routes
+- Interactive control helpers
+- Session-based instance management
+
+**Tech Stack**: Python 3.12+, FastHTML, HTMX, DaisyUI 5, Tailwind CSS 4
+
+## Development Workflow and Guidelines
+
+### Development Process
+
+**Code must always be testable**. Before writing any code:
+
+1. **Explain available options first** - Present different approaches to solve the problem
+2. **Wait for validation** - Ensure mutual understanding of requirements before implementation
+3. **No code without approval** - Only proceed after explicit validation
+
+### Collaboration Style
+
+**Ask questions to clarify understanding or suggest alternative approaches:**
+- Ask questions **one at a time**
+- Wait for complete answer before asking the next question
+- Indicate progress: "Question 1/5" if multiple questions are needed
+- Never assume - always clarify ambiguities
+
+### Communication
+
+**Conversations**: French or English
+**Code, documentation, comments**: English only
+
+### Code Standards
+
+**Follow PEP 8** conventions strictly:
+- Variable and function names: `snake_case`
+- Explicit, descriptive naming
+- **No emojis in code**
+
+**Documentation**:
+- Use Google or NumPy docstring format
+- Document all public functions and classes
+- Include type hints where applicable
+
+### Dependency Management
+
+**When introducing new dependencies:**
+- List all external dependencies explicitly
+- Propose alternatives using Python standard library when possible
+- Explain why each dependency is needed
+
+### Unit Testing with pytest
+
+**Test naming patterns:**
+- Passing tests: `test_i_can_xxx` - Tests that should succeed
+- Failing tests: `test_i_cannot_xxx` - Edge cases that should raise errors/exceptions
+
+**Test structure:**
+- Use **functions**, not classes (unless inheritance is required)
+- Before writing tests, **list all planned tests with explanations**
+- Wait for validation before implementing tests
+
+**Example:**
+```python
+def test_i_can_create_command_with_valid_name():
+    """Test that a command can be created with a valid name."""
+    cmd = Command("valid_name", "description", lambda: None)
+    assert cmd.name == "valid_name"
+
+def test_i_cannot_create_command_with_empty_name():
+    """Test that creating a command with empty name raises ValueError."""
+    with pytest.raises(ValueError):
+        Command("", "description", lambda: None)
+```
+
+### File Management
+
+**Always specify the full file path** when adding or modifying files:
+```
+✅ Modifying: src/myfasthtml/core/commands.py
+✅ Creating: tests/core/test_new_feature.py
+```
+
+### Error Handling
+
+**When errors occur:**
+1. **Explain the problem clearly first**
+2. **Do not propose a fix immediately**
+3. **Wait for validation** that the diagnosis is correct
+4. Only then propose solutions
+
+## Available Personas
+
+This project includes specialized personas (slash commands) for different types of work:
+
+### `/developer` - Development Mode (Default)
+**Use for:** Writing code, implementing features, fixing bugs
+
+Activates the full development workflow with:
+- Options-first approach before coding
+- Step-by-step validation
+- Strict PEP 8 compliance
+- Test-driven development with `test_i_can_xxx` / `test_i_cannot_xxx` patterns
+
+### `/technical-writer` - Documentation Mode
+**Use for:** Writing user-facing documentation
+
+Focused on creating:
+- README sections and examples
+- Usage guides and tutorials
+- Getting started documentation
+- Code examples for end users
+
+**Does NOT handle:**
+- Docstrings (developer responsibility)
+- Internal architecture docs
+- CLAUDE.md updates
+
+### `/reset` - Default Claude Code
+**Use for:** Return to standard Claude Code behavior without personas
+
+## Development Commands
+
+### Testing
+```bash
+# Run all tests
+pytest
+
+# Run specific test file
+pytest tests/core/test_bindings.py
+
+# Run specific test
+pytest tests/core/test_bindings.py::test_function_name
+
+# Run tests with verbose output
+pytest -v
+```
+
+### Cleaning
+```bash
+# Clean build artifacts and cache
+make clean
+
+# Clean package distribution files
+make clean-package
+
+# Clean test artifacts (.sesskey, test databases)
+make clean-tests
+
+# Clean everything including source artifacts
+make clean-all
+```
+
+### Package Building
+```bash
+# Build distribution
+python -m build
+
+# Install in development mode
+pip install -e .
+```
+
+## Architecture Overview
+
+### Core System: Commands
+
+Commands abstract HTMX interactions by encapsulating server-side actions. Located in `src/myfasthtml/core/commands.py`.
+
+**Key classes:**
+- `BaseCommand`: Base class for all commands with HTMX integration
+- `Command`: Standard command that executes a Python callable
+- `LambdaCommand`: Inline command for simple operations
+- `CommandsManager`: Global registry for command execution
+
+**How commands work:**
+1. Create command with action: `cmd = Command("name", "description", callable)`
+2. Command auto-registers with `CommandsManager`
+3. `cmd.get_htmx_params()` generates HTMX attributes (`hx-post`, `hx-vals`)
+4. HTMX posts to `/myfasthtml/commands` route with `c_id`
+5. `CommandsManager` routes to correct command's `execute()` method
+
+**Command customization:**
+```python
+# Change HTMX target and swap
+cmd.htmx(target="#result", swap="innerHTML")
+
+# Bind to observable data (disables swap by default)
+cmd.bind(data_object)
+```
+
+### Core System: Bindings
+
+Bidirectional data binding system connects UI components with Python data objects. Located in `src/myfasthtml/core/bindings.py`.
+
+**Key concepts:**
+- **Observable objects**: Use `make_observable()` from myutils to enable change detection
+- **Three-phase lifecycle**: Create → Activate (bind_ft) → Deactivate
+- **Detection modes**: How changes are detected (ValueChange, AttributePresence, SelectValueChange)
+- **Update modes**: How UI updates (ValueChange, AttributePresence, SelectValueChange)
+- **Data converters**: Transform data between UI and Python representations
+
+**Binding flow:**
+1. User changes input → HTMX posts to `/myfasthtml/bindings`
+2. `Binding.update()` receives form data, updates observable object
+3. Observable triggers change event → `Binding.notify()`
+4. All bound UI elements update via HTMX swap-oob
+
+**Helper usage:**
+```python
+from myfasthtml.controls.helpers import mk
+
+# Bind input and label to same data
+input_elt = Input(name="field")
+label_elt = Label()
+
+mk.manage_binding(input_elt, Binding(data, "attr"))
+mk.manage_binding(label_elt, Binding(data, "attr"))
+```
+
+**Important binding notes:**
+- Elements MUST have a `name` attribute to trigger updates
+- Multiple elements can bind to same data attribute
+- First binding call uses `init_binding=True` to set initial value
+- Bindings route through `/myfasthtml/bindings` endpoint
+
+### Core System: Instances
+
+Session-scoped instance management system. Located in `src/myfasthtml/core/instances.py`.
+
+**Key classes:**
+- `BaseInstance`: Base for all managed instances
+- `SingleInstance`: One instance per parent per session
+- `UniqueInstance`: One instance ever per session (singleton-like)
+- `RootInstance`: Top-level singleton for application
+- `InstancesManager`: Global registry with session-based isolation
+
+**Instance creation pattern:**
+```python
+# __new__ checks registry before creating
+# If instance exists with same (session_id, _id), returns existing
+instance = MyInstance(parent, session, _id="optional")
+```
+
+**Automatic ID generation:**
+- SingleInstance: `snake_case_class_name`
+- UniqueInstance: `snake_case_class_name`
+- Regular BaseInstance: `parent_prefix-uuid`
+
+### Application Setup
+
+**Main entry point**: `create_app()` in `src/myfasthtml/myfastapp.py`
+
+```python
+from myfasthtml.myfastapp import create_app
+
+app, rt = create_app(
+    daisyui=True,           # Include DaisyUI CSS
+    vis=True,               # Include vis-network.js
+    protect_routes=True,    # Enable auth beforeware
+    mount_auth_app=False,   # Mount auth routes
+    base_url=None           # Base URL for auth
+)
+```
+
+**What create_app does:**
+1. Adds MyFastHtml CSS/JS assets via custom static route
+2. Optionally adds DaisyUI 5 + Tailwind CSS 4
+3. Optionally adds vis-network.js
+4. Mounts `/myfasthtml` app for commands and bindings routes
+5. Optionally sets up auth routes and beforeware
+6. Creates AuthProxy instance if auth enabled
+
+### Authentication System
+
+Located in `src/myfasthtml/auth/`. Integrates with FastAPI backend (myauth package).
+
+**Key components:**
+- `auth/utils.py`: JWT helpers, beforeware for route protection
+- `auth/routes.py`: Login, register, logout routes
+- `auth/pages/`: LoginPage, RegisterPage, WelcomePage components
+
+**How auth works:**
+1. Beforeware checks `access_token` in session before each route
+2. Auto-refreshes token if < 5 minutes to expiry
+3. Redirects to `/login` if token invalid/missing
+4. Protected routes receive `auth` parameter with user info
+
+**Session structure:**
+```python
+{
+    'access_token': 'jwt_token',
+    'refresh_token': 'refresh_token',
+    'user_info': {
+        'email': 'user@example.com',
+        'username': 'user',
+        'roles': ['admin'],
+        'id': 'uuid',
+        'created_at': 'timestamp',
+        'updated_at': 'timestamp'
+    }
+}
+```
+
+## Project Structure
+
+```
+src/myfasthtml/
+├── myfastapp.py          # Main app factory (create_app)
+├── core/
+│   ├── commands.py       # Command system
+│   ├── bindings.py       # Binding system
+│   ├── instances.py      # Instance management
+│   ├── utils.py          # Utilities, routes app
+│   ├── constants.py      # Routes, constants
+│   ├── dbmanager.py      # Database helpers
+│   ├── AuthProxy.py      # Auth proxy instance
+│   └── network_utils.py  # Network utilities
+├── controls/
+│   ├── helpers.py        # mk class with UI helpers
+│   ├── BaseCommands.py   # Base command implementations
+│   ├── Search.py         # Search control
+│   └── Keyboard.py       # Keyboard shortcuts
+├── auth/
+│   ├── utils.py          # JWT, beforeware
+│   ├── routes.py         # Auth routes
+│   └── pages/            # Login, Register, Welcome pages
+├── icons/                # Icon libraries (fluent, material, etc.)
+├── assets/               # CSS/JS files
+└── test/                 # Test utilities
+
+tests/
+├── core/                 # Core system tests
+├── testclient/           # TestClient and TestableElement tests
+├── auth/                 # Authentication tests
+├── controls/             # Control tests
+└── html/                 # HTML component tests
+```
+
+## Testing System
+
+**Custom test client**: `myfasthtml.test.TestClient` extends FastHTML test client
+
+**Key features:**
+- `user.open(path)`: Navigate to route
+- `user.find_element(selector)`: Find element by CSS selector
+- `user.should_see(text)`: Assert text in response
+- Returns `TestableElement` objects with component-specific methods
+
+**Testable element types:**
+- `TestableInput`: `.send(value)`
+- `TestableCheckbox`: `.check()`, `.uncheck()`, `.toggle()`
+- `TestableTextarea`: `.send(value)`, `.append(text)`, `.clear()`
+- `TestableSelect`: `.select(value)`, `.select_by_text(text)`, `.deselect(value)`
+- `TestableRange`: `.set(value)`, `.increase()`, `.decrease()`
+- `TestableRadio`: `.select()`
+- `TestableButton`: `.click()`
+- `TestableDatalist`: `.send(value)`, `.select_suggestion(value)`
+
+**Test pattern:**
+```python
+def test_component(user, rt):
+    @rt("/")
+    def index():
+        data = Data("initial")
+        component = Component(name="field")
+        label = Label()
+
+        mk.manage_binding(component, Binding(data))
+        mk.manage_binding(label, Binding(data))
+
+        return component, label
+
+    user.open("/")
+    user.should_see("initial")
+
+    elem = user.find_element("selector")
+    elem.method("new_value")
+    user.should_see("new_value")
+```
+
+## Important Patterns
+
+### Creating interactive buttons with commands
+```python
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+
+def action():
+    return "Result"
+
+cmd = Command("action", "Description", action)
+button = mk.button("Click", command=cmd)
+```
+
+### Bidirectional binding
+```python
+from myutils.observable import make_observable
+from myfasthtml.core.bindings import Binding
+from myfasthtml.controls.helpers import mk
+
+data = make_observable(Data("value"))
+input_elt = Input(name="field")
+label_elt = Label()
+
+mk.manage_binding(input_elt, Binding(data, "value"))
+mk.manage_binding(label_elt, Binding(data, "value"))
+```
+
+### Using helpers (mk class)
+```python
+# Button with command
+mk.button("Text", command=cmd, cls="btn-primary")
+
+# Icon with command
+mk.icon(icon_svg, size=20, command=cmd)
+
+# Label with icon
+mk.label("Text", icon=icon_svg, size="sm")
+
+# Generic wrapper
+mk.mk(element, command=cmd, binding=binding)
+```
+
+## Common Gotchas
+
+1. **Bindings require `name` attribute**: Without it, form data won't include the field
+2. **Commands auto-register**: Don't manually register with CommandsManager
+3. **Instances use __new__ caching**: Same (session, id) returns existing instance
+4. **First binding needs init**: Use `init_binding=True` to set initial value
+5. **Observable required for bindings**: Use `make_observable()` from myutils
+6. **Auth routes need base_url**: Pass `base_url` to `create_app()` for proper auth API calls
+
+## Dependencies
+
+**Core:**
+- python-fasthtml: Web framework
+- myauth: Authentication backend
+- mydbengine: Database abstraction
+- myutils: Observable pattern, utilities
+
+**UI:**
+- DaisyUI 5: Component library
+- Tailwind CSS 4: Styling
+- vis-network: Network visualization
+
+**Development:**
+- pytest: Testing framework
+- httpx: HTTP client for tests
+- python-dotenv: Environment variables

Makefile

@@ -18,6 +18,7 @@ clean-tests:
 	rm -rf .sesskey
 	rm -rf tests/.sesskey
 	rm -rf tests/*.db
+	rm -rf tests/.myFastHtmlDb
 
 # Alias to clean everything
 clean: clean-build clean-tests

docs/Keyboard Support.md

@@ -187,6 +187,7 @@ All other `hx-*` attributes are supported and will be converted to the appropria
 The library automatically adds these parameters to every request:
 - `combination` - The combination that triggered the action (e.g., "Ctrl+S")
 - `has_focus` - Boolean indicating if the element had focus
+- `is_inside` - Boolean indicating if the focus is inside the element (element itself or any child)
 
 Example final request:
 ```javascript
@@ -196,7 +197,8 @@ htmx.ajax('POST', '/save-url', {
   values: {
     extra: "data",           // from hx-vals
     combination: "Ctrl+S",   // automatic
-    has_focus: true          // automatic
+    has_focus: true,         // automatic
+    is_inside: true          // automatic
   }
 })
 ```
@@ -262,6 +264,55 @@ f"add_keyboard_support('modal', '{json.dumps(modal_combinations)}')"
 f"add_keyboard_support('editor', '{json.dumps(editor_combinations)}')"
 ```
 
+### Removing Keyboard Support
+
+When you no longer need keyboard support for an element:
+
+```python
+# Remove keyboard support
+f"remove_keyboard_support('{element_id}')"
+```
+
+**Behavior**:
+- Removes the element from the keyboard registry
+- If this was the last element, automatically detaches global event listeners
+- Cleans up all associated state (timeouts, snapshots, etc.)
+- Other elements continue to work normally
+
+**Example**:
+```javascript
+// Add support
+add_keyboard_support('modal', '{"esc": {"hx-post": "/close"}}');
+
+// Later, remove support
+remove_keyboard_support('modal');
+// If no other elements remain, keyboard listeners are completely removed
+```
+
+## API Reference
+
+### add_keyboard_support(elementId, combinationsJson)
+
+Adds keyboard support to an element.
+
+**Parameters**:
+- `elementId` (string): ID of the HTML element
+- `combinationsJson` (string): JSON string of combinations with HTMX configs
+
+**Returns**: void
+
+### remove_keyboard_support(elementId)
+
+Removes keyboard support from an element.
+
+**Parameters**:
+- `elementId` (string): ID of the HTML element
+
+**Returns**: void
+
+**Side effects**:
+- If last element: detaches global event listeners and cleans up all state
+
 ## Technical Details
 
 ### Trie-based Matching
@@ -277,7 +328,7 @@ The library uses a prefix tree (trie) data structure:
 Configuration objects are mapped to htmx.ajax() calls:
 - `hx-*` attributes are converted to camelCase parameters
 - HTTP method is extracted from `hx-post`, `hx-get`, etc.
-- `combination` and `has_focus` are automatically added to values
+- `combination`, `has_focus`, and `is_inside` are automatically added to values
 - All standard HTMX options are supported
 
 ### Key Normalization

docs/Mouse Support.md

@@ -0,0 +1,439 @@
+# Mouse Support - Documentation
+
+## Overview
+
+The mouse support library provides keyboard-like binding capabilities for mouse actions. It supports simple clicks, modified clicks (with Ctrl/Shift/Alt), and sequences of clicks with smart timeout logic.
+
+## Features
+
+### Supported Mouse Actions
+
+**Basic Actions**:
+- `click` - Left click
+- `right_click` (or `rclick`) - Right click (contextmenu)
+
+**Modified Actions**:
+- `ctrl+click` (or `ctrl+rclick`) - Ctrl+Click (or Cmd+Click on Mac)
+- `shift+click` (or `shift+rclick`) - Shift+Click
+- `alt+click` (or `alt+rclick`) - Alt+Click
+- `ctrl+shift+click` - Multiple modifiers
+- Any combination of modifiers
+
+**Sequences**:
+- `click right_click` (or `click rclick`) - Click then right-click within 500ms
+- `click click` - Double click sequence
+- `ctrl+click click` - Ctrl+click then normal click
+- Any sequence of actions
+
+**Note**: `rclick` is an alias for `right_click` and can be used interchangeably.
+
+### Smart Timeout Logic
+
+Same as keyboard support:
+- If **any element** has a longer sequence possible, **all matching elements wait**
+- Timeout is 500ms between actions
+- Immediate trigger if no longer sequences exist
+
+### Multiple Element Support
+
+Multiple elements can listen to the same mouse action and all will trigger simultaneously.
+
+## Configuration Format
+
+Uses HTMX configuration objects (same as keyboard support):
+
+```javascript
+const combinations = {
+  "click": {
+    "hx-post": "/handle-click",
+    "hx-target": "#result"
+  },
+  "ctrl+click": {
+    "hx-post": "/handle-ctrl-click",
+    "hx-swap": "innerHTML"
+  },
+  "rclick": {  // Alias for right_click
+    "hx-post": "/context-menu"
+  },
+  "click rclick": {  // Can use rclick in sequences too
+    "hx-post": "/sequence-action",
+    "hx-vals": {"type": "sequence"}
+  }
+};
+
+add_mouse_support('my-element', JSON.stringify(combinations));
+```
+
+## API Reference
+
+### add_mouse_support(elementId, combinationsJson)
+
+Adds mouse support to an element.
+
+**Parameters**:
+- `elementId` (string): ID of the HTML element
+- `combinationsJson` (string): JSON string of combinations with HTMX configs
+
+**Returns**: void
+
+**Example**:
+```javascript
+add_mouse_support('button1', JSON.stringify({
+  "click": {"hx-post": "/click"},
+  "ctrl+click": {"hx-post": "/ctrl-click"}
+}));
+```
+
+### remove_mouse_support(elementId)
+
+Removes mouse support from an element.
+
+**Parameters**:
+- `elementId` (string): ID of the HTML element
+
+**Returns**: void
+
+**Side effects**:
+- If last element: detaches global event listeners and cleans up all state
+
+**Example**:
+```javascript
+remove_mouse_support('button1');
+```
+
+## Automatic Parameters
+
+The library automatically adds these parameters to every HTMX request:
+- `combination` - The mouse combination that triggered the action (e.g., "ctrl+click")
+- `has_focus` - Boolean indicating if the element had focus when clicked
+- `is_inside` - Boolean indicating if the click was inside the element
+  - For `click`: `true` if clicked inside element, `false` if clicked outside
+  - For `right_click`: always `true` (only triggers when clicking on element)
+- `has_focus` - Boolean indicating if the element had focus when the action triggered
+- `clicked_inside` - Boolean indicating if the click was inside the element or outside
+
+### Parameter Details
+
+**`has_focus`**: 
+- `true` if the registered element currently has focus
+- `false` otherwise
+- Useful for knowing if the element was the active element
+
+**`clicked_inside`**:
+- For `click` actions: `true` if clicked on/inside the element, `false` if clicked outside
+- For `right_click` actions: always `true` (since right-click only triggers on the element)
+- Useful for "click outside to close" logic
+
+**Example values sent**:
+```javascript
+// User clicks inside a modal
+{
+  combination: "click",
+  has_focus: true,
+  clicked_inside: true
+}
+
+// User clicks outside the modal (modal still gets triggered because click is global)
+{
+  combination: "click",
+  has_focus: false,
+  clicked_inside: false  // Perfect for closing the modal!
+}
+
+// User right-clicks on an item
+{
+  combination: "right_click",
+  has_focus: false,
+  clicked_inside: true  // Always true for right_click
+}
+```
+
+## Python Integration
+
+### Basic Usage
+
+```python
+combinations = {
+    "click": {
+        "hx-post": "/item/select"
+    },
+    "ctrl+click": {
+        "hx-post": "/item/select-multiple",
+        "hx-vals": json.dumps({"mode": "multi"})
+    },
+    "right_click": {
+        "hx-post": "/item/context-menu",
+        "hx-target": "#context-menu",
+        "hx-swap": "innerHTML"
+    }
+}
+
+f"add_mouse_support('{element_id}', '{json.dumps(combinations)}')"
+```
+
+### Sequences
+
+```python
+combinations = {
+    "click": {
+        "hx-post": "/single-click"
+    },
+    "click click": {
+        "hx-post": "/double-click-sequence"
+    },
+    "click right_click": {
+        "hx-post": "/click-then-right-click"
+    }
+}
+```
+
+### Multiple Elements
+
+```python
+# Item 1
+item1_combinations = {
+    "click": {"hx-post": f"/item/1/select"},
+    "ctrl+click": {"hx-post": f"/item/1/toggle"}
+}
+f"add_mouse_support('item-1', '{json.dumps(item1_combinations)}')"
+
+# Item 2
+item2_combinations = {
+    "click": {"hx-post": f"/item/2/select"},
+    "ctrl+click": {"hx-post": f"/item/2/toggle"}
+}
+f"add_mouse_support('item-2', '{json.dumps(item2_combinations)}')"
+```
+
+## Behavior Details
+
+### Click vs Right-Click Behavior
+
+**IMPORTANT**: The library handles `click` and `right_click` differently:
+
+**`click` (global detection)**:
+- Triggers for ALL registered elements, regardless of where you click
+- Useful for "click outside to close" functionality (modals, dropdowns, popups)
+- Example: Modal registered with `click` → clicking anywhere on the page triggers the modal's click action
+
+**`right_click` (element-specific detection)**:
+- Triggers ONLY when you right-click on (or inside) the registered element
+- Right-clicking outside the element does nothing and shows browser's context menu
+- This preserves normal browser behavior while adding custom actions on your elements
+
+**Example use case**:
+```javascript
+// Modal that closes when clicking anywhere
+add_mouse_support('modal', JSON.stringify({
+  "click": {"hx-post": "/close-modal"}  // Triggers even if you click outside modal
+}));
+
+// Context menu that only appears on element
+add_mouse_support('item', JSON.stringify({
+  "right_click": {"hx-post": "/item-menu"}  // Only triggers when right-clicking the item
+}));
+```
+
+### Modifier Keys (Cross-Platform)
+
+- **Windows/Linux**: `ctrl+click` uses Ctrl key
+- **Mac**: `ctrl+click` uses Cmd (⌘) key OR Ctrl key
+- This follows standard web conventions for cross-platform compatibility
+
+### Input Context Protection
+
+Mouse actions are **disabled** when clicking in input fields:
+- `<input>` elements
+- `<textarea>` elements  
+- Any `contenteditable` element
+
+This ensures normal text selection and interaction works in forms.
+
+### Right-Click Menu
+
+The contextmenu (right-click menu) is prevented with `preventDefault()` when:
+- A `right_click` action is configured for the element
+- The element is NOT an input/textarea/contenteditable
+
+### Event Bubbling
+
+The library checks if the click target OR any parent element is registered:
+```html
+<div id="container">
+  <button>Click me</button>
+</div>
+```
+If `container` is registered, clicking the button will trigger the container's actions.
+
+## Examples
+
+### Using Aliases
+
+You can use `rclick` instead of `right_click` anywhere:
+
+```javascript
+// These are equivalent
+const config1 = {
+  "right_click": {"hx-post": "/menu"}
+};
+
+const config2 = {
+  "rclick": {"hx-post": "/menu"}  // Shorter alias
+};
+
+// Works in sequences too
+const config3 = {
+  "click rclick": {"hx-post": "/sequence"}
+};
+
+// Works with modifiers
+const config4 = {
+  "ctrl+rclick": {"hx-post": "/ctrl-right-click"}
+};
+```
+
+### Context Menu
+
+```javascript
+const combinations = {
+  "right_click": {
+    "hx-post": "/show-context-menu",
+    "hx-target": "#menu",
+    "hx-swap": "innerHTML"
+  }
+};
+```
+
+### Close Modal/Popup on Click Outside
+
+Since `click` is detected globally (anywhere on the page), it's perfect for "click outside to close":
+
+```javascript
+// Modal element
+const modalCombinations = {
+  "click": {
+    "hx-post": "/close-modal",
+    "hx-target": "#modal",
+    "hx-swap": "outerHTML"
+  }
+};
+add_mouse_support('modal', JSON.stringify(modalCombinations));
+
+// Now clicking ANYWHERE on the page will trigger the handler
+// Your backend receives:
+// - clicked_inside: true (if clicked on modal) → maybe keep it open
+// - clicked_inside: false (if clicked outside) → close it!
+```
+
+**Backend example (Python/Flask)**:
+```python
+@app.route('/close-modal', methods=['POST'])
+def close_modal():
+    clicked_inside = request.form.get('clicked_inside') == 'true'
+    
+    if clicked_inside:
+        # User clicked inside the modal - keep it open
+        return render_template('modal_content.html')
+    else:
+        # User clicked outside - close the modal
+        return ''  # Empty response removes the modal
+```
+
+**Note**: The click handler on the modal element will trigger for all clicks on the page, not just clicks on the modal itself. Use the `clicked_inside` parameter to determine the appropriate action.
+
+### Multi-Select List
+
+```javascript
+const combinations = {
+  "click": {
+    "hx-post": "/select-item",
+    "hx-vals": {"mode": "single"}
+  },
+  "ctrl+click": {
+    "hx-post": "/select-item",
+    "hx-vals": {"mode": "toggle"}
+  },
+  "shift+click": {
+    "hx-post": "/select-range",
+    "hx-vals": {"mode": "range"}
+  }
+};
+```
+
+### Interactive Canvas/Drawing
+
+```javascript
+const combinations = {
+  "click": {
+    "hx-post": "/draw-point"
+  },
+  "ctrl+click": {
+    "hx-post": "/draw-special"
+  },
+  "click click": {
+    "hx-post": "/confirm-action"
+  }
+};
+```
+
+### Drag-and-Drop Alternative
+
+```javascript
+const combinations = {
+  "click": {
+    "hx-post": "/select-source"
+  },
+  "click click": {
+    "hx-post": "/set-destination"
+  }
+};
+```
+
+## Troubleshooting
+
+### Clicks not detected
+
+- Verify the element exists and has the correct ID
+- Check browser console for errors
+- Ensure HTMX is loaded before mouse_support.js
+
+### Right-click menu still appears
+
+- Check if element is in input context (input/textarea)
+- Verify the combination is configured correctly
+- Check browser console for configuration errors
+
+### Sequences not working
+
+- Ensure clicks happen within 500ms timeout
+- Check if longer sequences exist (causes waiting)
+- Verify the combination string format (space-separated)
+
+## Technical Details
+
+### Architecture
+
+- **Global listeners** on `document` for `click` and `contextmenu` events
+- **Tree-based matching** using prefix trees (same as keyboard support)
+- **Single timeout** for all elements (sequence-based, not element-based)
+- **Independent from keyboard support** (separate registry and timeouts)
+
+### Performance
+
+- Single event listener regardless of number of elements
+- O(n) matching where n is sequence length
+- Efficient memory usage with automatic cleanup
+
+### Browser Compatibility
+
+- Modern browsers (ES6+ required)
+- Chrome, Firefox, Safari, Edge
+- Requires HTMX library
+
+## Notes
+
+- Timeout value is the same as keyboard support (500ms) but in separate variable
+- Can be used independently or alongside keyboard support
+- Does not interfere with normal mouse behavior in inputs
+- Element must exist in DOM when `add_mouse_support()` is called
+- **Alias**: `rclick` can be used interchangeably with `right_click` for shorter syntax

src/app.py

@@ -4,14 +4,17 @@ import yaml
 from fasthtml import serve
 
 from myfasthtml.controls.CommandsDebugger import CommandsDebugger
+from myfasthtml.controls.Dropdown import Dropdown
 from myfasthtml.controls.FileUpload import FileUpload
 from myfasthtml.controls.InstancesDebugger import InstancesDebugger
 from myfasthtml.controls.Keyboard import Keyboard
 from myfasthtml.controls.Layout import Layout
 from myfasthtml.controls.TabsManager import TabsManager
+from myfasthtml.controls.TreeView import TreeView, TreeNode
 from myfasthtml.controls.helpers import Ids, mk
 from myfasthtml.core.instances import UniqueInstance
 from myfasthtml.icons.carbon import volume_object_storage
+from myfasthtml.icons.fluent_p2 import key_command16_regular
 from myfasthtml.icons.fluent_p3 import folder_open20_regular
 from myfasthtml.myfastapp import create_app
 
@@ -30,6 +33,52 @@ app, rt = create_app(protect_routes=True,
                      base_url="http://localhost:5003")
 
 
+def create_sample_treeview(parent):
+  """
+  Create a sample TreeView with a file structure for testing.
+
+  Args:
+      parent: Parent instance for the TreeView
+
+  Returns:
+      TreeView: Configured TreeView instance with sample data
+  """
+  tree_view = TreeView(parent, _id="-treeview")
+
+  # Create sample file structure
+  projects = TreeNode(label="Projects", type="folder")
+  tree_view.add_node(projects)
+
+  myfasthtml = TreeNode(label="MyFastHtml", type="folder")
+  tree_view.add_node(myfasthtml, parent_id=projects.id)
+
+  app_py = TreeNode(label="app.py", type="file")
+  tree_view.add_node(app_py, parent_id=myfasthtml.id)
+
+  readme = TreeNode(label="README.md", type="file")
+  tree_view.add_node(readme, parent_id=myfasthtml.id)
+
+  src_folder = TreeNode(label="src", type="folder")
+  tree_view.add_node(src_folder, parent_id=myfasthtml.id)
+
+  controls_py = TreeNode(label="controls.py", type="file")
+  tree_view.add_node(controls_py, parent_id=src_folder.id)
+
+  documents = TreeNode(label="Documents", type="folder")
+  tree_view.add_node(documents, parent_id=projects.id)
+
+  notes = TreeNode(label="notes.txt", type="file")
+  tree_view.add_node(notes, parent_id=documents.id)
+
+  todo = TreeNode(label="todo.md", type="file")
+  tree_view.add_node(todo, parent_id=documents.id)
+
+  # Expand all nodes to show the full structure
+  #tree_view.expand_all()
+
+  return tree_view
+
+
 @rt("/")
 def index(session):
   session_instance = UniqueInstance(session=session, _id=Ids.UserSession)
@@ -37,6 +86,7 @@ def index(session):
   layout.set_footer("Goodbye World")
   
   tabs_manager = TabsManager(layout, _id=f"-tabs_manager")
+  add_tab = tabs_manager.commands.add_tab
   btn_show_right_drawer = mk.button("show",
                                     command=layout.commands.toggle_drawer("right"),
                                     id="btn_show_right_drawer_id")
@@ -44,31 +94,37 @@ def index(session):
   instances_debugger = InstancesDebugger(layout)
   btn_show_instances_debugger = mk.label("Instances",
                                          icon=volume_object_storage,
-                                         command=tabs_manager.commands.add_tab("Instances", instances_debugger),
+                                         command=add_tab("Instances", instances_debugger),
                                          id=instances_debugger.get_id())
   
   commands_debugger = CommandsDebugger(layout)
   btn_show_commands_debugger = mk.label("Commands",
-                                        icon=None,
-                                        command=tabs_manager.commands.add_tab("Commands", commands_debugger),
+                                        icon=key_command16_regular,
+                                        command=add_tab("Commands", commands_debugger),
                                         id=commands_debugger.get_id())
   
   btn_file_upload = mk.label("Upload",
                              icon=folder_open20_regular,
-                             command=tabs_manager.commands.add_tab("File Open", FileUpload(layout, _id="-file_upload")),
+                             command=add_tab("File Open", FileUpload(layout, _id="-file_upload")),
                              id="file_upload_id")
   
+  btn_popup = mk.label("Popup",
+                       command=add_tab("Popup", Dropdown(layout, "Content", button="button", _id="-dropdown")))
+
+  # Create TreeView with sample data
+  tree_view = create_sample_treeview(layout)
+
   layout.header_left.add(tabs_manager.add_tab_btn())
   layout.header_right.add(btn_show_right_drawer)
   layout.left_drawer.add(btn_show_instances_debugger, "Debugger")
   layout.left_drawer.add(btn_show_commands_debugger, "Debugger")
   layout.left_drawer.add(btn_file_upload, "Test")
+  layout.left_drawer.add(btn_popup, "Test")
+  layout.left_drawer.add(tree_view, "TreeView")
   layout.set_main(tabs_manager)
   keyboard = Keyboard(layout, _id="-keyboard").add("ctrl+o",
-                                                   tabs_manager.commands.add_tab("File Open",
-                                                                                 FileUpload(layout,
-                                                                                            _id="-file_upload")))
-  keyboard.add("ctrl+n", tabs_manager.commands.add_tab("File Open", FileUpload(layout, _id="-file_upload")))
+                                                   add_tab("File Open", FileUpload(layout, _id="-file_upload")))
+  keyboard.add("ctrl+n", add_tab("File Open", FileUpload(layout, _id="-file_upload")))
   return layout, keyboard
 
 

src/myfasthtml/assets/myfasthtml.css

@@ -14,7 +14,6 @@
 }
 
 
-
 .mf-icon-16 {
     width: 16px;
     min-width: 16px;
@@ -441,3 +440,235 @@
     max-height: 200px;
     overflow: auto;
 }
+
+.mf-dropdown-wrapper {
+    position: relative; /* CRUCIAL for the anchor */
+    display: inline-block;
+}
+
+
+.mf-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0px;
+    z-index: 1;
+    width: 200px;
+    border: 1px solid black;
+    padding: 10px;
+    box-sizing: border-box;
+    overflow-x: auto;
+    /*opacity: 0;*/
+    /*transition: opacity 0.2s ease-in-out;*/
+}
+
+.mf-dropdown.is-visible {
+    display: block;
+    opacity: 1;
+}
+
+/* *********************************************** */
+/* ************** TreeView Component ************* */
+/* *********************************************** */
+
+/* TreeView Container */
+.mf-treeview {
+    width: 100%;
+    user-select: none;
+}
+
+/* TreeNode Container */
+.mf-treenode-container {
+    width: 100%;
+}
+
+/* TreeNode Element */
+.mf-treenode {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 2px 0.5rem;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    border-radius: 0.25rem;
+}
+
+/* Input for Editing */
+.mf-treenode-input {
+    flex: 1;
+    padding: 2px 0.25rem;
+    border: 1px solid var(--color-primary);
+    border-radius: 0.25rem;
+    background-color: var(--color-base-100);
+    outline: none;
+}
+
+
+.mf-treenode:hover {
+    background-color: var(--color-base-200);
+}
+
+.mf-treenode.selected {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+}
+
+/* Toggle Icon */
+.mf-treenode-toggle {
+    flex-shrink: 0;
+    width: 20px;
+    text-align: center;
+    font-size: 0.75rem;
+}
+
+/* Node Label */
+.mf-treenode-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+
+.mf-treenode-input:focus {
+    box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 25%, transparent);
+}
+
+/* Action Buttons - Hidden by default, shown on hover */
+.mf-treenode-actions {
+    display: none;
+    gap: 0.1rem;
+    white-space: nowrap;
+    margin-left: 0.5rem;
+}
+
+.mf-treenode:hover .mf-treenode-actions {
+    display: flex;
+}
+
+/* *********************************************** */
+/* ********** Generic Resizer Classes ************ */
+/* *********************************************** */
+
+/* Generic resizer - used by both Layout and Panel */
+.mf-resizer {
+    position: absolute;
+    width: 4px;
+    cursor: col-resize;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+    z-index: 100;
+    top: 0;
+    bottom: 0;
+}
+
+.mf-resizer:hover {
+    background-color: rgba(59, 130, 246, 0.3);
+}
+
+/* Active state during resize */
+.mf-resizing .mf-resizer {
+    background-color: rgba(59, 130, 246, 0.5);
+}
+
+/* Prevent text selection during resize */
+.mf-resizing {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+/* Cursor override for entire body during resize */
+.mf-resizing * {
+    cursor: col-resize !important;
+}
+
+/* Visual indicator for resizer on hover - subtle border */
+.mf-resizer::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 2px;
+    height: 40px;
+    background-color: rgba(156, 163, 175, 0.4);
+    border-radius: 2px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.mf-resizer:hover::before,
+.mf-resizing .mf-resizer::before {
+    opacity: 1;
+}
+
+/* Resizer positioning */
+/* Left resizer is on the right side of the left panel */
+.mf-resizer-left {
+    right: 0;
+}
+
+/* Right resizer is on the left side of the right panel */
+.mf-resizer-right {
+    left: 0;
+}
+
+/* Position indicator for resizer */
+.mf-resizer-left::before {
+    right: 1px;
+}
+
+.mf-resizer-right::before {
+    left: 1px;
+}
+
+/* Disable transitions during resize for smooth dragging */
+.mf-item-resizing {
+    transition: none !important;
+}
+
+/* *********************************************** */
+/* *************** Panel Component *************** */
+/* *********************************************** */
+
+/* Container principal du panel */
+.mf-panel {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Panel gauche */
+.mf-panel-left {
+    position: relative;
+    flex-shrink: 0;
+    width: 250px;
+    min-width: 150px;
+    max-width: 400px;
+    height: 100%;
+    overflow: auto;
+    border-right: 1px solid var(--color-border-primary);
+}
+
+/* Panel principal (centre) */
+.mf-panel-main {
+    flex: 1;
+    height: 100%;
+    overflow: auto;
+    min-width: 0; /* Important pour permettre le shrink du flexbox */
+}
+
+/* Panel droit */
+.mf-panel-right {
+    position: relative;
+    flex-shrink: 0;
+    width: 300px;
+    min-width: 150px;
+    max-width: 500px;
+    height: 100%;
+    overflow: auto;
+    border-left: 1px solid var(--color-border-primary);
+}

src/myfasthtml/controls/Dropdown.py

@@ -0,0 +1,93 @@
+from fastcore.xml import FT
+from fasthtml.components import Div
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.Keyboard import Keyboard
+from myfasthtml.controls.Mouse import Mouse
+from myfasthtml.core.commands import Command
+from myfasthtml.core.instances import MultipleInstance
+
+
+class Commands(BaseCommands):
+  def close(self):
+    return Command("Close", "Close Dropdown", self._owner.close).htmx(target=f"#{self._owner.get_id()}-content")
+  
+  def click(self):
+    return Command("Click", "Click on Dropdown", self._owner.on_click).htmx(target=f"#{self._owner.get_id()}-content")
+
+
+class DropdownState:
+  def __init__(self):
+    self.opened = False
+
+
+class Dropdown(MultipleInstance):
+  def __init__(self, parent, content=None, button=None, _id=None):
+    super().__init__(parent, _id=_id)
+    self.button = Div(button) if not isinstance(button, FT) else button
+    self.content = content
+    self.commands = Commands(self)
+    self._state = DropdownState()
+  
+  def toggle(self):
+    self._state.opened = not self._state.opened
+    return self._mk_content()
+  
+  def close(self):
+    self._state.opened = False
+    return self._mk_content()
+  
+  def on_click(self, combination, is_inside: bool):
+    if combination == "click":
+      self._state.opened = is_inside
+    return self._mk_content()
+  
+  def _mk_content(self):
+    return Div(self.content,
+               cls=f"mf-dropdown {'is-visible' if self._state.opened else ''}",
+               id=f"{self._id}-content"),
+  
+  def render(self):
+    return Div(
+      Div(
+        Div(self.button) if self.button else Div("None"),
+        self._mk_content(),
+        cls="mf-dropdown-wrapper"
+      ),
+      Keyboard(self, _id="-keyboard").add("esc", self.commands.close()),
+      Mouse(self, "-mouse").add("click", self.commands.click()),
+      id=self._id
+    )
+  
+  def __ft__(self):
+    return self.render()
+
+# document.addEventListener('htmx:afterSwap', function(event) {
+#     const targetElement = event.detail.target; // L'élément qui a été mis à jour (#popup-unique-id)
+#
+#     // Vérifie si c'est bien notre popup
+#     if (targetElement.classList.contains('mf-popup-container')) {
+#
+#         // Trouver l'élément déclencheur HTMX (le bouton existant)
+#         // HTMX stocke l'élément déclencheur dans event.detail.elt
+#         const trigger = document.querySelector('#mon-bouton-existant');
+#
+#         if (trigger) {
+#             // Obtenir les coordonnées de l'élément déclencheur par rapport à la fenêtre
+#             const rect = trigger.getBoundingClientRect();
+#
+#             // L'élément du popup à positionner
+#             const popup = targetElement;
+#
+#             // Appliquer la position au conteneur du popup
+#             // On utilise window.scrollY pour s'assurer que la position est absolue par rapport au document,
+#             // et non seulement à la fenêtre (car le popup est en position: absolute, pas fixed)
+#
+#             // Top: Juste en dessous de l'élément déclencheur
+#             popup.style.top = (rect.bottom + window.scrollY) + 'px';
+#
+#             // Left: Aligner avec le côté gauche de l'élément déclencheur
+#             popup.style.left = (rect.left + window.scrollX) + 'px';
+#         }
+#     }
+# });

src/myfasthtml/controls/InstancesDebugger.py

@@ -1,3 +1,4 @@
+from myfasthtml.controls.Panel import Panel
 from myfasthtml.controls.VisNetwork import VisNetwork
 from myfasthtml.core.instances import SingleInstance, InstancesManager
 from myfasthtml.core.network_utils import from_parent_child_list
@@ -6,9 +7,14 @@ from myfasthtml.core.network_utils import from_parent_child_list
 class InstancesDebugger(SingleInstance):
   def __init__(self, parent, _id=None):
     super().__init__(parent, _id=_id)
+    self._panel = Panel(self, _id="-panel")
   
   def render(self):
-    s_name = InstancesManager.get_session_user_name
+    nodes, edges = self._get_nodes_and_edges()
+    vis_network = VisNetwork(self, nodes=nodes, edges=edges, _id="-vis")
+    return self._panel.set_main(vis_network)
+  
+  def _get_nodes_and_edges(self):
     instances = self._get_instances()
     nodes, edges = from_parent_child_list(
       instances,
@@ -23,9 +29,7 @@ class InstancesDebugger(SingleInstance):
     for node in nodes:
       node["shape"] = "box"
     
-    vis_network = VisNetwork(self, nodes=nodes, edges=edges, _id="-vis")
-    # vis_network.add_to_options(physics={"wind": {"x": 0, "y": 1}})
-    return vis_network
+    return nodes, edges
   
   def _get_instances(self):
     return list(InstancesManager.instances.values())

src/myfasthtml/controls/Keyboard.py

@@ -7,7 +7,7 @@ from myfasthtml.core.instances import MultipleInstance
 
 
 class Keyboard(MultipleInstance):
-  def __init__(self, parent, _id=None, combinations=None):
+  def __init__(self, parent, combinations=None, _id=None):
     super().__init__(parent, _id=_id)
     self.combinations = combinations or {}
   

src/myfasthtml/controls/Layout.py

@@ -123,6 +123,7 @@ class Layout(SingleInstance):
     self.header_right = self.Content(self)
     self.footer_left = self.Content(self)
     self.footer_right = self.Content(self)
+    self._footer_content = None
   
   def set_footer(self, content):
     """
@@ -141,6 +142,7 @@ class Layout(SingleInstance):
         content: FastHTML component(s) or content for the main area
     """
     self._main_content = content
+    return self
   
   def toggle_drawer(self, side: Literal["left", "right"]):
     logger.debug(f"Toggle drawer: {side=}, {self._state.left_drawer_open=}")
@@ -233,7 +235,7 @@ class Layout(SingleInstance):
         Div: FastHTML Div component for left drawer
     """
     resizer = Div(
-      cls="mf-layout-resizer mf-layout-resizer-right",
+      cls="mf-resizer mf-resizer-left",
       data_command_id=self.commands.update_drawer_width("left").id,
       data_side="left"
     )
@@ -266,8 +268,9 @@ class Layout(SingleInstance):
     Returns:
         Div: FastHTML Div component for right drawer
     """
+    
     resizer = Div(
-      cls="mf-layout-resizer mf-layout-resizer-left",
+      cls="mf-resizer mf-resizer-right",
       data_command_id=self.commands.update_drawer_width("right").id,
       data_side="right"
     )
@@ -311,7 +314,7 @@ class Layout(SingleInstance):
       self._mk_main(),
       self._mk_right_drawer(),
       self._mk_footer(),
-      Script(f"initLayoutResizer('{self._id}');"),
+      Script(f"initResizer('{self._id}');"),
       id=self._id,
       cls="mf-layout",
     )

src/myfasthtml/controls/Mouse.py

@@ -0,0 +1,23 @@
+import json
+
+from fasthtml.xtend import Script
+
+from myfasthtml.core.commands import BaseCommand
+from myfasthtml.core.instances import MultipleInstance
+
+
+class Mouse(MultipleInstance):
+  def __init__(self, parent, _id=None, combinations=None):
+    super().__init__(parent, _id=_id)
+    self.combinations = combinations or {}
+  
+  def add(self, sequence: str, command: BaseCommand):
+    self.combinations[sequence] = command
+    return self
+  
+  def render(self):
+    str_combinations = {sequence: command.get_htmx_params() for sequence, command in self.combinations.items()}
+    return Script(f"add_mouse_support('{self._parent.get_id()}', '{json.dumps(str_combinations)}')")
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/Panel.py

@@ -0,0 +1,102 @@
+from dataclasses import dataclass
+from typing import Literal
+
+from fasthtml.components import Div
+from fasthtml.xtend import Script
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.core.commands import Command
+from myfasthtml.core.instances import MultipleInstance
+
+
+@dataclass
+class PanelConf:
+  left: bool = False
+  right: bool = True
+
+
+class Commands(BaseCommands):
+  def toggle_side(self, side: Literal["left", "right"]):
+    return Command("TogglePanelSide", f"Toggle {side} side panel", self._owner.toggle_side, side)
+  
+  def update_side_width(self, side: Literal["left", "right"]):
+    """
+    Create a command to update panel's side width.
+
+    Args:
+        side: Which panel's side to update ("left" or "right")
+
+    Returns:
+        Command: Command object for updating panel's side width
+    """
+    return Command(
+      f"UpdatePanelSideWidth_{side}",
+      f"Update {side} side panel width",
+      self._owner.update_side_width,
+      side
+    )
+
+
+class Panel(MultipleInstance):
+  def __init__(self, parent, conf=None, _id=None):
+    super().__init__(parent, _id=_id)
+    self.conf = conf or PanelConf()
+    self.commands = Commands(self)
+    self._main = None
+    self._right = None
+    self._left = None
+  
+  def update_side_width(self, side, width):
+    pass
+  
+  def toggle_side(self, side):
+    pass
+  
+  def set_main(self, main):
+    self._main = main
+    return self
+  
+  def set_right(self, right):
+    self._right = right
+    return self
+  
+  def set_left(self, left):
+    self._left = left
+    return self
+  
+  def _mk_right(self):
+    if not self.conf.right:
+      return None
+
+    resizer = Div(
+      cls="mf-resizer mf-resizer-right",
+      data_command_id=self.commands.update_side_width("right").id,
+      data_side="right"
+    )
+
+    return Div(resizer, self._right, cls="mf-panel-right")
+
+  def _mk_left(self):
+    if not self.conf.left:
+      return None
+
+    resizer = Div(
+      cls="mf-resizer mf-resizer-left",
+      data_command_id=self.commands.update_side_width("left").id,
+      data_side="left"
+    )
+
+    return Div(self._left, resizer, cls="mf-panel-left")
+  
+  def render(self):
+    return Div(
+      self._mk_left(),
+      Div(self._main, cls="mf-panel-main"),
+      self._mk_right(),
+      Script(f"initResizer('{self._id}');"),
+      cls="mf-panel",
+      id=self._id,
+    )
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/TabsManager.py

@@ -102,7 +102,7 @@ class TabsManager(MultipleInstance):
     tab_config = self._state.tabs[tab_id]
     if tab_config["component_type"] is None:
       return None
-    return InstancesManager.dynamic_get(self, tab_config["component_type"], tab_config["component_id"])
+    return InstancesManager.get(self._session,  tab_config["component_id"])
   
   @staticmethod
   def _get_tab_count():

src/myfasthtml/controls/TreeView.py

@@ -0,0 +1,400 @@
+"""
+TreeView component for hierarchical data visualization with inline editing.
+
+This component provides an interactive tree structure with expand/collapse,
+selection, and inline editing capabilities.
+"""
+import uuid
+from dataclasses import dataclass, field
+from typing import Optional
+
+from fasthtml.components import Div, Input, Span
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.Keyboard import Keyboard
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.dbmanager import DbObject
+from myfasthtml.core.instances import MultipleInstance
+from myfasthtml.icons.fluent_p1 import chevron_right20_regular, edit20_regular
+from myfasthtml.icons.fluent_p2 import chevron_down20_regular, add_circle20_regular, delete20_regular
+
+
+@dataclass
+class TreeNode:
+  """
+  Represents a node in the tree structure.
+
+  Attributes:
+      id: Unique identifier (auto-generated UUID if not provided)
+      label: Display text for the node
+      type: Node type for icon mapping
+      parent: ID of parent node (None for root)
+      children: List of child node IDs
+  """
+  id: str = field(default_factory=lambda: str(uuid.uuid4()))
+  label: str = ""
+  type: str = "default"
+  parent: Optional[str] = None
+  children: list[str] = field(default_factory=list)
+
+
+class TreeViewState(DbObject):
+  """
+  Persistent state for TreeView component.
+
+  Attributes:
+      items: Dictionary mapping node IDs to TreeNode instances
+      opened: List of expanded node IDs
+      selected: Currently selected node ID
+      editing: Node ID currently being edited (None if not editing)
+      icon_config: Mapping of node types to icon identifiers
+  """
+  
+  def __init__(self, owner):
+    super().__init__(owner)
+    with self.initializing():
+      self.items: dict[str, TreeNode] = {}
+      self.opened: list[str] = []
+      self.selected: Optional[str] = None
+      self.editing: Optional[str] = None
+      self.icon_config: dict[str, str] = {}
+
+
+class Commands(BaseCommands):
+  """Command handlers for TreeView actions."""
+  
+  def toggle_node(self, node_id: str):
+    """Create command to expand/collapse a node."""
+    return Command(
+      "ToggleNode",
+      f"Toggle node {node_id}",
+      self._owner._toggle_node,
+      node_id
+    ).htmx(target=f"#{self._owner.get_id()}")
+  
+  def add_child(self, parent_id: str):
+    """Create command to add a child node."""
+    return Command(
+      "AddChild",
+      f"Add child to {parent_id}",
+      self._owner._add_child,
+      parent_id
+    ).htmx(target=f"#{self._owner.get_id()}")
+  
+  def add_sibling(self, node_id: str):
+    """Create command to add a sibling node."""
+    return Command(
+      "AddSibling",
+      f"Add sibling to {node_id}",
+      self._owner._add_sibling,
+      node_id
+    ).htmx(target=f"#{self._owner.get_id()}")
+  
+  def start_rename(self, node_id: str):
+    """Create command to start renaming a node."""
+    return Command(
+      "StartRename",
+      f"Start renaming {node_id}",
+      self._owner._start_rename,
+      node_id
+    ).htmx(target=f"#{self._owner.get_id()}")
+  
+  def save_rename(self, node_id: str):
+    """Create command to save renamed node."""
+    return Command(
+      "SaveRename",
+      f"Save rename for {node_id}",
+      self._owner._save_rename,
+      node_id
+    ).htmx(target=f"#{self._owner.get_id()}")
+  
+  def cancel_rename(self):
+    """Create command to cancel renaming."""
+    return Command(
+      "CancelRename",
+      "Cancel rename",
+      self._owner._cancel_rename
+    ).htmx(target=f"#{self._owner.get_id()}")
+  
+  def delete_node(self, node_id: str):
+    """Create command to delete a node."""
+    return Command(
+      "DeleteNode",
+      f"Delete node {node_id}",
+      self._owner._delete_node,
+      node_id
+    ).htmx(target=f"#{self._owner.get_id()}")
+  
+  def select_node(self, node_id: str):
+    """Create command to select a node."""
+    return Command(
+      "SelectNode",
+      f"Select node {node_id}",
+      self._owner._select_node,
+      node_id
+    ).htmx(target=f"#{self._owner.get_id()}")
+
+
+class TreeView(MultipleInstance):
+  """
+  Interactive TreeView component with hierarchical data visualization.
+
+  Supports:
+  - Expand/collapse nodes
+  - Add child/sibling nodes
+  - Inline rename
+  - Delete nodes
+  - Node selection
+  """
+  
+  def __init__(self, parent, items: Optional[dict] = None, _id: Optional[str] = None):
+    """
+    Initialize TreeView component.
+
+    Args:
+        parent: Parent instance
+        items: Optional initial items dictionary {node_id: TreeNode}
+        _id: Optional custom ID
+    """
+    super().__init__(parent, _id=_id)
+    self._state = TreeViewState(self)
+    self.commands = Commands(self)
+    
+    if items:
+      self._state.items = items
+  
+  def set_icon_config(self, config: dict[str, str]):
+    """
+    Set icon configuration for node types.
+
+    Args:
+        config: Dictionary mapping node types to icon identifiers
+               Format: {type: "provider.icon_name"}
+    """
+    self._state.icon_config = config
+   
+  def add_node(self, node: TreeNode, parent_id: Optional[str] = None, insert_index: Optional[int] = None):
+    """
+    Add a node to the tree.
+
+    Args:
+        node: TreeNode instance to add
+        parent_id: Optional parent node ID (None for root)
+        insert_index: Optional index to insert at in parent's children list.
+                     If None, appends to end. If provided, inserts at that position.
+    """
+    self._state.items[node.id] = node
+    node.parent = parent_id
+    
+    if parent_id and parent_id in self._state.items:
+      parent = self._state.items[parent_id]
+      if node.id not in parent.children:
+        if insert_index is not None:
+          parent.children.insert(insert_index, node.id)
+        else:
+          parent.children.append(node.id)
+  
+  def expand_all(self):
+    """Expand all nodes that have children."""
+    for node_id, node in self._state.items.items():
+      if node.children and node_id not in self._state.opened:
+        self._state.opened.append(node_id)
+  
+  def _toggle_node(self, node_id: str):
+    """Toggle expand/collapse state of a node."""
+    if node_id in self._state.opened:
+      self._state.opened.remove(node_id)
+    else:
+      self._state.opened.append(node_id)
+    return self
+  
+  def _add_child(self, parent_id: str, new_label: Optional[str] = None):
+    """Add a child node to a parent."""
+    if parent_id not in self._state.items:
+      raise ValueError(f"Parent node {parent_id} does not exist")
+    
+    parent = self._state.items[parent_id]
+    new_node = TreeNode(
+      label=new_label or "New Node",
+      type=parent.type
+    )
+    
+    self.add_node(new_node, parent_id=parent_id)
+    
+    # Auto-expand parent
+    if parent_id not in self._state.opened:
+      self._state.opened.append(parent_id)
+    
+    return self
+  
+  def _add_sibling(self, node_id: str, new_label: Optional[str] = None):
+    """Add a sibling node next to a node."""
+    if node_id not in self._state.items:
+      raise ValueError(f"Node {node_id} does not exist")
+    
+    node = self._state.items[node_id]
+    
+    if node.parent is None:
+      raise ValueError("Cannot add sibling to root node")
+    
+    parent = self._state.items[node.parent]
+    new_node = TreeNode(
+      label=new_label or "New Node",
+      type=node.type
+    )
+    
+    # Insert after current node
+    insert_idx = parent.children.index(node_id) + 1
+    self.add_node(new_node, parent_id=node.parent, insert_index=insert_idx)
+    
+    return self
+  
+  def _start_rename(self, node_id: str):
+    """Start renaming a node (sets editing state)."""
+    if node_id not in self._state.items:
+      raise ValueError(f"Node {node_id} does not exist")
+    
+    self._state.editing = node_id
+    return self
+  
+  def _save_rename(self, node_id: str, node_label: str):
+    """Save renamed node with new label."""
+    if node_id not in self._state.items:
+      raise ValueError(f"Node {node_id} does not exist")
+    
+    self._state.items[node_id].label = node_label
+    self._state.editing = None
+    return self
+  
+  def _cancel_rename(self):
+    """Cancel renaming operation."""
+    self._state.editing = None
+    return self
+  
+  def _delete_node(self, node_id: str):
+    """Delete a node (only if it has no children)."""
+    if node_id not in self._state.items:
+      raise ValueError(f"Node {node_id} does not exist")
+    
+    node = self._state.items[node_id]
+    
+    if node.children:
+      raise ValueError(f"Cannot delete node {node_id} with children")
+    
+    # Remove from parent's children list
+    if node.parent and node.parent in self._state.items:
+      parent = self._state.items[node.parent]
+      parent.children.remove(node_id)
+    
+    # Remove from state
+    del self._state.items[node_id]
+    
+    if node_id in self._state.opened:
+      self._state.opened.remove(node_id)
+    
+    if self._state.selected == node_id:
+      self._state.selected = None
+    
+    return self
+  
+  def _select_node(self, node_id: str):
+    """Select a node."""
+    if node_id not in self._state.items:
+      raise ValueError(f"Node {node_id} does not exist")
+    
+    self._state.selected = node_id
+    return self
+  
+  def _render_action_buttons(self, node_id: str):
+    """Render action buttons for a node (visible on hover)."""
+    return Div(
+      mk.icon(add_circle20_regular, command=self.commands.add_child(node_id)),
+      mk.icon(edit20_regular, command=self.commands.start_rename(node_id)),
+      mk.icon(delete20_regular, command=self.commands.delete_node(node_id)),
+      cls="mf-treenode-actions"
+    )
+  
+  def _render_node(self, node_id: str, level: int = 0):
+    """
+    Render a single node and its children recursively.
+
+    Args:
+        node_id: ID of node to render
+        level: Indentation level
+
+    Returns:
+        Div containing the node and its children
+    """
+    node = self._state.items[node_id]
+    is_expanded = node_id in self._state.opened
+    is_selected = node_id == self._state.selected
+    is_editing = node_id == self._state.editing
+    has_children = len(node.children) > 0
+    
+    # Toggle icon
+    toggle = mk.icon(
+      chevron_down20_regular if is_expanded else chevron_right20_regular if has_children else " ",
+      command=self.commands.toggle_node(node_id))
+    
+    # Label or input for editing
+    if is_editing:
+      # TODO: Bind input to save_rename (Enter) and cancel_rename (Escape)
+      label_element = mk.mk(Input(
+        name="node_label",
+        value=node.label,
+        cls="mf-treenode-input input input-sm"
+      ), command=self.commands.save_rename(node_id))
+    else:
+      label_element = mk.mk(
+        Span(node.label, cls="mf-treenode-label text-sm"),
+        command=self.commands.select_node(node_id)
+      )
+    
+    # Node element
+    node_element = Div(
+      toggle,
+      label_element,
+      self._render_action_buttons(node_id),
+      cls=f"mf-treenode flex {'selected' if is_selected and not is_editing else ''}",
+      data_node_id=node_id,
+      style=f"padding-left: {level * 20}px"
+    )
+    
+    # Children (if expanded)
+    children_elements = []
+    if is_expanded and has_children:
+      for child_id in node.children:
+        children_elements.append(
+          self._render_node(child_id, level + 1)
+        )
+    
+    return Div(
+      node_element,
+      *children_elements,
+      cls="mf-treenode-container"
+    )
+  
+  def render(self):
+    """
+    Render the complete TreeView.
+
+    Returns:
+        Div: Complete TreeView HTML structure
+    """
+    # Find root nodes (nodes without parent)
+    root_nodes = [
+        node_id for node_id, node in self._state.items.items()
+        if node.parent is None
+    ]
+    
+    return Div(
+      *[self._render_node(node_id) for node_id in root_nodes],
+      Keyboard(self, {"esc": self.commands.cancel_rename()}, _id="_keyboard"),
+      id=self._id,
+      cls="mf-treeview"
+    )
+  
+  def __ft__(self):
+    """FastHTML magic method for rendering."""
+    return self.render()

src/myfasthtml/controls/helpers.py

@@ -15,6 +15,19 @@ class mk:
   
   @staticmethod
   def button(element, command: Command = None, binding: Binding = None, **kwargs):
+    """
+    Defines a static method for creating a Button object with specific configurations.
+
+    This method constructs a Button instance by wrapping an element with
+    additional configurations such as commands and bindings. Any extra keyword
+    arguments are passed when creating the Button.
+
+    :param element: The underlying widget or element to be wrapped in a Button.
+    :param command: An optional command to associate with the Button. Defaults to None.
+    :param binding: An optional event binding to associate with the Button. Defaults to None.
+    :param kwargs: Additional keyword arguments to further configure the Button.
+    :return: A fully constructed Button instance with the specified configurations.
+    """
     return mk.mk(Button(element, **kwargs), command=command, binding=binding)
   
   @staticmethod
@@ -33,13 +46,33 @@ class mk:
     )
   
   @staticmethod
-  def icon(icon, size=20,
+  def icon(icon,
+           size=20,
            can_select=True,
            can_hover=False,
            cls='',
            command: Command = None,
            binding: Binding = None,
            **kwargs):
+    """
+    Generates an icon element with customizable properties for size, class, and interactivity.
+
+    This method creates an icon element wrapped in a container with optional classes
+    and event bindings. The icon can be styled and its behavior defined using the parameters
+    provided, allowing for dynamic and reusable UI components.
+
+    :param icon: The icon to display inside the container.
+    :param size: The size of the icon, specified in pixels. Defaults to 20.
+    :param can_select: Indicates whether the icon can be selected. Defaults to True.
+    :param can_hover: Indicates whether the icon reacts to hovering. Defaults to False.
+    :param cls: A string of custom CSS classes to be added to the icon container.
+    :param command: The command object defining the function to be executed on icon interaction.
+    :param binding: The binding object for configuring additional event listeners on the icon.
+    :param kwargs: Additional keyword arguments for configuring attributes and behaviors of the
+                   icon element.
+    :return: A styled and interactive icon element embedded inside a container, configured
+             with the defined classes, size, and behaviors.
+    """
     merged_cls = merge_classes(f"mf-icon-{size}",
                                'icon-btn' if can_select else '',
                                'mmt-btn' if can_hover else '',

src/myfasthtml/core/dbmanager.py

@@ -10,6 +10,7 @@ from myfasthtml.core.utils import retrieve_user_info
 class DbManager(SingleInstance):
   def __init__(self, parent, root=".myFastHtmlDb", auto_register: bool = True):
     super().__init__(parent, auto_register=auto_register)
+    
     self.db = DbEngine(root=root)
   
   def save(self, entry, obj):

src/myfasthtml/core/instances.py

@@ -2,10 +2,8 @@ import logging
 import uuid
 from typing import Optional
 
-from dbengine.utils import get_class
-
 from myfasthtml.controls.helpers import Ids
-from myfasthtml.core.utils import pascal_to_snake, snake_to_pascal
+from myfasthtml.core.utils import pascal_to_snake
 
 logger = logging.getLogger("InstancesManager")
 
@@ -216,19 +214,5 @@ class InstancesManager:
         if key[0] != session_id
     }
 
-  @staticmethod
-  def dynamic_get(parent: BaseInstance, component_type: str, instance_id: str):
-    logger.debug(f"Dynamic get: {component_type=} {instance_id=}")
-    cls = InstancesManager._get_class_name(component_type)
-    fully_qualified_name = f"myfasthtml.controls.{cls}.{cls}"
-    cls = get_class(fully_qualified_name)
-    return cls(parent, instance_id)
-  
-  @staticmethod
-  def _get_class_name(component_type: str) -> str:
-    component_type = component_type.replace("mf-", "")
-    component_type = snake_to_pascal(component_type)
-    return component_type
-
 
 RootInstance = SingleInstance(None, special_session, Ids.Root)

src/myfasthtml/test/matcher.py

@@ -6,6 +6,8 @@ from fastcore.basics import NotStr
 from myfasthtml.core.utils import quoted_str
 from myfasthtml.test.testclient import MyFT
 
+MISSING_ATTR = "** MISSING **"
+
 
 class Predicate:
   def __init__(self, value):
@@ -114,6 +116,18 @@ class AttributeForbidden(ChildrenPredicate):
     return element
 
 
+class TestObject:
+  def __init__(self, cls, **kwargs):
+    self.cls = cls
+    self.attrs = kwargs
+
+
+class TestCommand(TestObject):
+  def __init__(self, name, **kwargs):
+    super().__init__("Command", **kwargs)
+    self.attrs = {"name": name} | kwargs  # name should be first
+
+
 @dataclass
 class DoNotCheck:
   desc: str = None
@@ -187,6 +201,16 @@ class ErrorOutput:
         
         self.indent = self.indent[:-2]
         self._add_to_output(")")
+    
+    elif isinstance(self.expected, TestObject):
+      cls = _mytype(self.element)
+      attrs = {attr_name: _mygetattr(self.element, attr_name) for attr_name in self.expected.attrs}
+      self._add_to_output(f"({cls} {_str_attrs(attrs)})")
+      # Try to show where the differences are
+      error_str = self._detect_error_2(self.element, self.expected)
+      if error_str:
+        self._add_to_output(error_str)
+    
     else:
       self._add_to_output(str(self.element))
       # Try to show where the differences are
@@ -205,7 +229,7 @@ class ErrorOutput:
     
     if hasattr(element, "tag"):
       # the attributes are compared to the expected element
-      elt_attrs = {attr_name: element.attrs.get(attr_name, "** MISSING **") for attr_name in
+      elt_attrs = {attr_name: element.attrs.get(attr_name, MISSING_ATTR) for attr_name in
                    [attr_name for attr_name in expected.attrs if attr_name is not None]}
       
       elt_attrs_str = " ".join(f'"{attr_name}"="{attr_value}"' for attr_name, attr_value in elt_attrs.items())
@@ -228,7 +252,7 @@ class ErrorOutput:
   def _detect_error(self, element, expected):
     if hasattr(expected, "tag") and hasattr(element, "tag"):
       tag_str = len(element.tag) * (" " if element.tag == expected.tag else "^")
-      elt_attrs = {attr_name: element.attrs.get(attr_name, "** MISSING **") for attr_name in expected.attrs}
+      elt_attrs = {attr_name: element.attrs.get(attr_name, MISSING_ATTR) for attr_name in expected.attrs}
       attrs_in_error = [attr_name for attr_name, attr_value in elt_attrs.items() if
                         not self._matches(attr_value, expected.attrs[attr_name])]
       if attrs_in_error:
@@ -242,6 +266,35 @@ class ErrorOutput:
     
     return None
   
+  def _detect_error_2(self, element, expected):
+    """
+    Too lazy to refactor original _detect_error
+    :param element:
+    :param expected:
+    :return:
+    """
+    if hasattr(expected, "tag") or isinstance(expected, TestObject):
+      element_cls = _mytype(element)
+      expected_cls = _mytype(expected)
+      str_tag_error = (" " if self._matches(element_cls, expected_cls) else "^") * len(element_cls)
+      
+      element_attrs = {attr_name: _mygetattr(element, attr_name) for attr_name in expected.attrs}
+      expected_attrs = {attr_name: _mygetattr(expected, attr_name) for attr_name in expected.attrs}
+      attrs_in_error = {attr_name for attr_name, attr_value in element_attrs.items() if
+                        not self._matches(attr_value, expected_attrs[attr_name])}
+      str_attrs_error = " ".join(len(f'"{name}"="{value}"') * ("^" if name in attrs_in_error else " ")
+                                 for name, value in element_attrs.items())
+      if str_attrs_error.strip() or str_tag_error.strip():
+        return f" {str_tag_error} {str_attrs_error}"
+      else:
+        return None
+    
+    else:
+      if not self._matches(element, expected):
+        return len(str(element)) * "^"
+    
+    return None
+  
   @staticmethod
   def _matches(element, expected):
     if element == expected:
@@ -347,6 +400,34 @@ def matches(actual, expected, path=""):
   # set the path
   path += "." + _get_current_path(actual) if path else _get_current_path(actual)
   
+  if isinstance(expected, TestObject):
+    assert _mytype(actual) == _mytype(expected), _error_msg("The types are different: ",
+                                                            _actual=actual,
+                                                            _expected=expected)
+    
+    for attr, value in expected.attrs.items():
+      assert hasattr(actual, attr), _error_msg(f"'{attr}' is not found in Actual.",
+                                               _actual=actual,
+                                               _expected=expected)
+      try:
+        matches(getattr(actual, attr), value)
+      except AssertionError as e:
+        match = re.search(r"Error : (.+?)\n", str(e))
+        if match:
+          assert False, _error_msg(f"{match.group(1)} for '{attr}':",
+                                   _actual=getattr(actual, attr),
+                                   _expected=value)
+        assert False, _error_msg(f"The values are different for '{attr}': ",
+                                 _actual=getattr(actual, attr),
+                                 _expected=value)
+    return True
+  
+  if isinstance(expected, Predicate):
+    assert expected.validate(actual), \
+      _error_msg(f"The condition '{expected}' is not satisfied.",
+                 _actual=actual,
+                 _expected=expected)
+  
   assert _type(actual) == _type(expected) or (hasattr(actual, "tag") and hasattr(expected, "tag")), \
     _error_msg("The types are different: ", _actual=actual, _expected=expected)
   
@@ -359,6 +440,14 @@ def matches(actual, expected, path=""):
     for actual_child, expected_child in zip(actual, expected):
       assert matches(actual_child, expected_child, path=path)
   
+  elif isinstance(expected, dict):
+    if len(actual) < len(expected):
+      _assert_error("Actual is smaller than expected: ", _actual=actual, _expected=expected)
+    if len(actual) > len(expected):
+      _assert_error("Actual is bigger than expected: ", _actual=actual, _expected=expected)
+    for k, v in expected.items():
+      assert matches(actual[k], v, path=f"{path}[{k}={v}]")
+  
   elif isinstance(expected, NotStr):
     to_compare = actual.s.lstrip('\n').lstrip()
     assert to_compare.startswith(expected.s), _error_msg("Notstr values are different: ",
@@ -404,8 +493,9 @@ def matches(actual, expected, path=""):
     for actual_child, expected_child in zip(actual.children, expected_children):
       assert matches(actual_child, expected_child, path=path)
   
+  
   else:
-    assert actual == expected, _error_msg("The values are different: ",
+    assert actual == expected, _error_msg("The values are different",
                                           _actual=actual,
                                           _expected=expected)
   
@@ -466,3 +556,25 @@ def find(ft, expected):
     raise AssertionError(f"No element found for '{expected}'")
   
   return res
+
+
+def _mytype(x):
+  if hasattr(x, "tag"):
+    return x.tag
+  if isinstance(x, TestObject):
+    return x.cls.__name__ if isinstance(x.cls, type) else str(x.cls)
+  return type(x).__name__
+
+
+def _mygetattr(x, attr):
+  if hasattr(x, "attrs"):
+    return x.attrs.get(attr, MISSING_ATTR)
+  
+  if not hasattr(x, attr):
+    return MISSING_ATTR
+  
+  return getattr(x, attr, MISSING_ATTR)
+
+
+def _str_attrs(attrs: dict):
+  return " ".join(f'"{attr_name}"="{attr_value}"' for attr_name, attr_value in attrs.items())

tests/controls/conftest.py

@@ -3,6 +3,11 @@ import pytest
 from myfasthtml.core.instances import SingleInstance
 
 
+class RootInstanceForTests(SingleInstance):
+  def __init__(self, session):
+    super().__init__(None, session, _id="TestRoot")
+
+
 @pytest.fixture(scope="session")
 def session():
   return {
@@ -20,4 +25,4 @@ def session():
 
 @pytest.fixture(scope="session")
 def root_instance(session):
-  return SingleInstance(None, session, "TestRoot")
+  return RootInstanceForTests(session=session)

tests/controls/test_treeview.py

@@ -0,0 +1,398 @@
+"""Unit tests for TreeView component."""
+import shutil
+
+import pytest
+from fasthtml.components import *
+
+from myfasthtml.controls.Keyboard import Keyboard
+from myfasthtml.controls.TreeView import TreeView, TreeNode
+from myfasthtml.test.matcher import matches, TestObject, TestCommand
+from .conftest import root_instance
+
+
+@pytest.fixture(autouse=True)
+def cleanup_db():
+  shutil.rmtree(".myFastHtmlDb", ignore_errors=True)
+
+
+class TestTreeviewBehaviour:
+  """Tests for TreeView behavior and logic."""
+  
+  def test_i_can_create_tree_node_with_auto_generated_id(self):
+    """Test that TreeNode generates UUID automatically."""
+    node = TreeNode(label="Test Node", type="folder")
+    
+    assert node.id is not None
+    assert isinstance(node.id, str)
+    assert len(node.id) > 0
+  
+  def test_i_can_create_tree_node_with_default_values(self):
+    """Test that TreeNode has correct default values."""
+    node = TreeNode()
+    
+    assert node.label == ""
+    assert node.type == "default"
+    assert node.parent is None
+    assert node.children == []
+  
+  def test_i_can_initialize_tree_view_state(self, root_instance):
+    """Test that TreeViewState initializes with default values."""
+    tree_view = TreeView(root_instance)
+    state = tree_view._state
+    
+    assert isinstance(state.items, dict)
+    assert len(state.items) == 0
+    assert state.opened == []
+    assert state.selected is None
+    assert state.editing is None
+    assert state.icon_config == {}
+  
+  def test_i_can_create_empty_treeview(self, root_instance):
+    """Test creating an empty TreeView."""
+    tree_view = TreeView(root_instance)
+    
+    assert tree_view is not None
+    assert len(tree_view._state.items) == 0
+  
+  def test_i_can_add_node_to_treeview(self, root_instance):
+    """Test adding a root node to the TreeView."""
+    tree_view = TreeView(root_instance)
+    node = TreeNode(label="Root Node", type="folder")
+    
+    tree_view.add_node(node)
+    
+    assert node.id in tree_view._state.items
+    assert tree_view._state.items[node.id].label == "Root Node"
+    assert tree_view._state.items[node.id].parent is None
+  
+  def test_i_can_add_child_node(self, root_instance):
+    """Test adding a child node to a parent."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    child = TreeNode(label="Child", type="file")
+    
+    tree_view.add_node(parent)
+    tree_view.add_node(child, parent_id=parent.id)
+    
+    assert child.id in tree_view._state.items
+    assert child.id in parent.children
+    assert child.parent == parent.id
+  
+  def test_i_can_set_icon_config(self, root_instance):
+    """Test setting icon configuration."""
+    tree_view = TreeView(root_instance)
+    config = {
+        "folder": "fluent.folder",
+        "file": "fluent.document"
+    }
+    
+    tree_view.set_icon_config(config)
+    
+    assert tree_view._state.icon_config == config
+    assert tree_view._state.icon_config["folder"] == "fluent.folder"
+  
+  def test_i_can_toggle_node(self, root_instance):
+    """Test expand/collapse a node."""
+    tree_view = TreeView(root_instance)
+    node = TreeNode(label="Node", type="folder")
+    tree_view.add_node(node)
+    
+    # Initially closed
+    assert node.id not in tree_view._state.opened
+    
+    # Toggle to open
+    tree_view._toggle_node(node.id)
+    assert node.id in tree_view._state.opened
+    
+    # Toggle to close
+    tree_view._toggle_node(node.id)
+    assert node.id not in tree_view._state.opened
+  
+  def test_i_can_expand_all_nodes(self, root_instance):
+    """Test that expand_all opens all nodes with children."""
+    tree_view = TreeView(root_instance)
+    
+    # Create hierarchy: root -> child1 -> grandchild
+    #                        -> child2 (leaf)
+    root = TreeNode(label="Root", type="folder")
+    child1 = TreeNode(label="Child 1", type="folder")
+    grandchild = TreeNode(label="Grandchild", type="file")
+    child2 = TreeNode(label="Child 2", type="file")
+    
+    tree_view.add_node(root)
+    tree_view.add_node(child1, parent_id=root.id)
+    tree_view.add_node(grandchild, parent_id=child1.id)
+    tree_view.add_node(child2, parent_id=root.id)
+    
+    # Initially all closed
+    assert len(tree_view._state.opened) == 0
+    
+    # Expand all
+    tree_view.expand_all()
+    
+    # Nodes with children should be opened
+    assert root.id in tree_view._state.opened
+    assert child1.id in tree_view._state.opened
+    
+    # Leaf nodes should not be in opened list
+    assert grandchild.id not in tree_view._state.opened
+    assert child2.id not in tree_view._state.opened
+  
+  def test_i_can_select_node(self, root_instance):
+    """Test selecting a node."""
+    tree_view = TreeView(root_instance)
+    node = TreeNode(label="Node", type="folder")
+    tree_view.add_node(node)
+    
+    tree_view._select_node(node.id)
+    
+    assert tree_view._state.selected == node.id
+  
+  def test_i_can_start_rename_node(self, root_instance):
+    """Test starting rename mode for a node."""
+    tree_view = TreeView(root_instance)
+    node = TreeNode(label="Old Name", type="folder")
+    tree_view.add_node(node)
+    
+    tree_view._start_rename(node.id)
+    
+    assert tree_view._state.editing == node.id
+  
+  def test_i_can_save_rename_node(self, root_instance):
+    """Test saving renamed node with new label."""
+    tree_view = TreeView(root_instance)
+    node = TreeNode(label="Old Name", type="folder")
+    tree_view.add_node(node)
+    tree_view._start_rename(node.id)
+    
+    tree_view._save_rename(node.id, "New Name")
+    
+    assert tree_view._state.items[node.id].label == "New Name"
+    assert tree_view._state.editing is None
+  
+  def test_i_can_cancel_rename_node(self, root_instance):
+    """Test canceling rename operation."""
+    tree_view = TreeView(root_instance)
+    node = TreeNode(label="Name", type="folder")
+    tree_view.add_node(node)
+    tree_view._start_rename(node.id)
+    
+    tree_view._cancel_rename()
+    
+    assert tree_view._state.editing is None
+    assert tree_view._state.items[node.id].label == "Name"
+  
+  def test_i_can_delete_leaf_node(self, root_instance):
+    """Test deleting a node without children."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    child = TreeNode(label="Child", type="file")
+    
+    tree_view.add_node(parent)
+    tree_view.add_node(child, parent_id=parent.id)
+    
+    # Delete child (leaf node)
+    tree_view._delete_node(child.id)
+    
+    assert child.id not in tree_view._state.items
+    assert child.id not in parent.children
+  
+  def test_i_can_add_sibling_node(self, root_instance):
+    """Test adding a sibling node."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    child1 = TreeNode(label="Child 1", type="file")
+    
+    tree_view.add_node(parent)
+    tree_view.add_node(child1, parent_id=parent.id)
+    
+    # Add sibling to child1
+    tree_view._add_sibling(child1.id, new_label="Child 2")
+    
+    assert len(parent.children) == 2
+    # Sibling should be after child1
+    assert parent.children.index(child1.id) < len(parent.children) - 1
+  
+  def test_i_cannot_delete_node_with_children(self, root_instance):
+    """Test that deleting a node with children raises an error."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    child = TreeNode(label="Child", type="file")
+    
+    tree_view.add_node(parent)
+    tree_view.add_node(child, parent_id=parent.id)
+    
+    # Try to delete parent (has children)
+    with pytest.raises(ValueError, match="Cannot delete node.*with children"):
+      tree_view._delete_node(parent.id)
+  
+  def test_i_cannot_add_sibling_to_root(self, root_instance):
+    """Test that adding sibling to root node raises an error."""
+    tree_view = TreeView(root_instance)
+    root = TreeNode(label="Root", type="folder")
+    tree_view.add_node(root)
+    
+    # Try to add sibling to root (no parent)
+    with pytest.raises(ValueError, match="Cannot add sibling to root node"):
+      tree_view._add_sibling(root.id)
+  
+  def test_i_cannot_select_nonexistent_node(self, root_instance):
+    """Test that selecting a nonexistent node raises an error."""
+    tree_view = TreeView(root_instance)
+    
+    # Try to select node that doesn't exist
+    with pytest.raises(ValueError, match="Node.*does not exist"):
+      tree_view._select_node("nonexistent_id")
+  
+  def test_add_node_prevents_duplicate_children(self, root_instance):
+    """Test that add_node prevents adding duplicate child IDs."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    child = TreeNode(label="Child", type="file")
+    
+    tree_view.add_node(parent)
+    tree_view.add_node(child, parent_id=parent.id)
+    
+    # Try to add the same child again
+    tree_view.add_node(child, parent_id=parent.id)
+    
+    # Child should appear only once in parent's children list
+    assert parent.children.count(child.id) == 1
+  
+  def test_sibling_is_inserted_at_correct_position(self, root_instance):
+    """Test that _add_sibling inserts sibling exactly after reference node."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    child1 = TreeNode(label="Child 1", type="file")
+    child3 = TreeNode(label="Child 3", type="file")
+    
+    tree_view.add_node(parent)
+    tree_view.add_node(child1, parent_id=parent.id)
+    tree_view.add_node(child3, parent_id=parent.id)
+    
+    # Add sibling after child1
+    tree_view._add_sibling(child1.id, new_label="Child 2")
+    
+    # Get the newly added sibling
+    sibling_id = parent.children[1]
+    
+    # Verify order: child1, sibling (child2), child3
+    assert parent.children[0] == child1.id
+    assert tree_view._state.items[sibling_id].label == "Child 2"
+    assert parent.children[2] == child3.id
+    assert len(parent.children) == 3
+  
+  def test_add_child_auto_expands_parent(self, root_instance):
+    """Test that _add_child automatically expands the parent node."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    
+    tree_view.add_node(parent)
+    
+    # Parent should not be expanded initially
+    assert parent.id not in tree_view._state.opened
+    
+    # Add child
+    tree_view._add_child(parent.id, new_label="Child")
+    
+    # Parent should now be expanded
+    assert parent.id in tree_view._state.opened
+  
+  def test_i_cannot_add_child_to_nonexistent_parent(self, root_instance):
+    """Test that adding child to nonexistent parent raises error."""
+    tree_view = TreeView(root_instance)
+    
+    # Try to add child to parent that doesn't exist
+    with pytest.raises(ValueError, match="Parent node.*does not exist"):
+      tree_view._add_child("nonexistent_parent_id")
+  
+  def test_delete_node_clears_selection_if_selected(self, root_instance):
+    """Test that deleting a selected node clears the selection."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    child = TreeNode(label="Child", type="file")
+    
+    tree_view.add_node(parent)
+    tree_view.add_node(child, parent_id=parent.id)
+    
+    # Select the child
+    tree_view._select_node(child.id)
+    assert tree_view._state.selected == child.id
+    
+    # Delete the selected child
+    tree_view._delete_node(child.id)
+    
+    # Selection should be cleared
+    assert tree_view._state.selected is None
+  
+  def test_delete_node_removes_from_opened_if_expanded(self, root_instance):
+    """Test that deleting an expanded node removes it from opened list."""
+    tree_view = TreeView(root_instance)
+    parent = TreeNode(label="Parent", type="folder")
+    child = TreeNode(label="Child", type="file")
+    
+    tree_view.add_node(parent)
+    tree_view.add_node(child, parent_id=parent.id)
+    
+    # Expand the parent
+    tree_view._toggle_node(parent.id)
+    assert parent.id in tree_view._state.opened
+    
+    # Delete the child (making parent a leaf)
+    tree_view._delete_node(child.id)
+    
+    # Now delete the parent (now a leaf node)
+    # First remove it from root by creating a grandparent
+    grandparent = TreeNode(label="Grandparent", type="folder")
+    tree_view.add_node(grandparent)
+    parent.parent = grandparent.id
+    grandparent.children.append(parent.id)
+    
+    tree_view._delete_node(parent.id)
+    
+    # Parent should be removed from opened list
+    assert parent.id not in tree_view._state.opened
+  
+  def test_i_cannot_start_rename_nonexistent_node(self, root_instance):
+    """Test that starting rename on nonexistent node raises error."""
+    tree_view = TreeView(root_instance)
+    
+    # Try to start rename on node that doesn't exist
+    with pytest.raises(ValueError, match="Node.*does not exist"):
+      tree_view._start_rename("nonexistent_id")
+  
+  def test_i_cannot_save_rename_nonexistent_node(self, root_instance):
+    """Test that saving rename for nonexistent node raises error."""
+    tree_view = TreeView(root_instance)
+    
+    # Try to save rename for node that doesn't exist
+    with pytest.raises(ValueError, match="Node.*does not exist"):
+      tree_view._save_rename("nonexistent_id", "New Name")
+  
+  def test_i_cannot_add_sibling_to_nonexistent_node(self, root_instance):
+    """Test that adding sibling to nonexistent node raises error."""
+    tree_view = TreeView(root_instance)
+    
+    # Try to add sibling to node that doesn't exist
+    with pytest.raises(ValueError, match="Node.*does not exist"):
+      tree_view._add_sibling("nonexistent_id")
+
+
+class TestTreeViewRender:
+  """Tests for TreeView HTML rendering."""
+  
+  def test_i_can_render_empty_treeview(self, root_instance):
+    """Test that TreeView generates correct HTML structure."""
+    tree_view = TreeView(root_instance)
+    expected = Div(
+      TestObject(Keyboard, combinations={"esc": TestCommand("CancelRename")}),
+      _id=tree_view.get_id(),
+      cls="mf-treeview"
+    )
+    
+    assert matches(tree_view.__ft__(), expected)
+  
+  def test_node_action_buttons_are_rendered(self):
+    """Test that action buttons are present in rendered HTML."""
+    # Signature only - implementation later
+    pass

tests/html/keyboard_support.js

@@ -0,0 +1,450 @@
+/**
+ * Create keyboard bindings
+ */
+(function () {
+  /**
+   * Global registry to store keyboard shortcuts for multiple elements
+   */
+  const KeyboardRegistry = {
+    elements: new Map(), // elementId -> { tree, element }
+    listenerAttached: false,
+    currentKeys: new Set(),
+    snapshotHistory: [],
+    pendingTimeout: null,
+    pendingMatches: [], // Array of matches waiting for timeout
+    sequenceTimeout: 500 // 500ms timeout for sequences
+  };
+
+  /**
+   * Normalize key names to lowercase for case-insensitive comparison
+   * @param {string} key - The key to normalize
+   * @returns {string} - Normalized key name
+   */
+  function normalizeKey(key) {
+    const keyMap = {
+      'control': 'ctrl',
+      'escape': 'esc',
+      'delete': 'del'
+    };
+
+    const normalized = key.toLowerCase();
+    return keyMap[normalized] || normalized;
+  }
+
+  /**
+   * Create a unique string key from a Set of keys for Map indexing
+   * @param {Set} keySet - Set of normalized keys
+   * @returns {string} - Sorted string representation
+   */
+  function setToKey(keySet) {
+    return Array.from(keySet).sort().join('+');
+  }
+
+  /**
+   * Parse a single element (can be a single key or a simultaneous combination)
+   * @param {string} element - The element string (e.g., "a" or "Ctrl+C")
+   * @returns {Set} - Set of normalized keys
+   */
+  function parseElement(element) {
+    if (element.includes('+')) {
+      // Simultaneous combination
+      return new Set(element.split('+').map(k => normalizeKey(k.trim())));
+    }
+    // Single key
+    return new Set([normalizeKey(element.trim())]);
+  }
+
+  /**
+   * Parse a combination string into sequence elements
+   * @param {string} combination - The combination string (e.g., "Ctrl+C C" or "A B C")
+   * @returns {Array} - Array of Sets representing the sequence
+   */
+  function parseCombination(combination) {
+    // Check if it's a sequence (contains space)
+    if (combination.includes(' ')) {
+      return combination.split(' ').map(el => parseElement(el.trim()));
+    }
+
+    // Single element (can be a key or simultaneous combination)
+    return [parseElement(combination)];
+  }
+
+  /**
+   * Create a new tree node
+   * @returns {Object} - New tree node
+   */
+  function createTreeNode() {
+    return {
+      config: null,
+      combinationStr: null,
+      children: new Map()
+    };
+  }
+
+  /**
+   * Build a tree from combinations
+   * @param {Object} combinations - Map of combination strings to HTMX config objects
+   * @returns {Object} - Root tree node
+   */
+  function buildTree(combinations) {
+    const root = createTreeNode();
+
+    for (const [combinationStr, config] of Object.entries(combinations)) {
+      const sequence = parseCombination(combinationStr);
+      console.log("Parsing combination", combinationStr, "=>", sequence);
+      let currentNode = root;
+
+      for (const keySet of sequence) {
+        const key = setToKey(keySet);
+
+        if (!currentNode.children.has(key)) {
+          currentNode.children.set(key, createTreeNode());
+        }
+
+        currentNode = currentNode.children.get(key);
+      }
+
+      // Mark as end of sequence and store config
+      currentNode.config = config;
+      currentNode.combinationStr = combinationStr;
+    }
+
+    return root;
+  }
+
+  /**
+   * Traverse the tree with the current snapshot history
+   * @param {Object} treeRoot - Root of the tree
+   * @param {Array} snapshotHistory - Array of Sets representing pressed keys
+   * @returns {Object|null} - Current node or null if no match
+   */
+  function traverseTree(treeRoot, snapshotHistory) {
+    let currentNode = treeRoot;
+
+    for (const snapshot of snapshotHistory) {
+      const key = setToKey(snapshot);
+
+      if (!currentNode.children.has(key)) {
+        return null;
+      }
+
+      currentNode = currentNode.children.get(key);
+    }
+
+    return currentNode;
+  }
+
+  /**
+   * Check if we're inside an input element where typing should work normally
+   * @returns {boolean} - True if inside an input-like element
+   */
+  function isInInputContext() {
+    const activeElement = document.activeElement;
+    if (!activeElement) return false;
+
+    const tagName = activeElement.tagName.toLowerCase();
+
+    // Check for input/textarea
+    if (tagName === 'input' || tagName === 'textarea') {
+      return true;
+    }
+
+    // Check for contenteditable
+    if (activeElement.isContentEditable) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Trigger an action for a matched combination
+   * @param {string} elementId - ID of the element
+   * @param {Object} config - HTMX configuration object
+   * @param {string} combinationStr - The matched combination string
+   * @param {boolean} isInside - Whether the focus is inside the element
+   */
+  function triggerAction(elementId, config, combinationStr, isInside) {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+
+    const hasFocus = document.activeElement === element;
+
+    // Extract HTTP method and URL from hx-* attributes
+    let method = 'POST'; // default
+    let url = null;
+
+    const methodMap = {
+      'hx-post': 'POST',
+      'hx-get': 'GET',
+      'hx-put': 'PUT',
+      'hx-delete': 'DELETE',
+      'hx-patch': 'PATCH'
+    };
+
+    for (const [attr, httpMethod] of Object.entries(methodMap)) {
+      if (config[attr]) {
+        method = httpMethod;
+        url = config[attr];
+        break;
+      }
+    }
+
+    if (!url) {
+      console.error('No HTTP method attribute found in config:', config);
+      return;
+    }
+
+    // Build htmx.ajax options
+    const htmxOptions = {};
+
+    // Map hx-target to target
+    if (config['hx-target']) {
+      htmxOptions.target = config['hx-target'];
+    }
+
+    // Map hx-swap to swap
+    if (config['hx-swap']) {
+      htmxOptions.swap = config['hx-swap'];
+    }
+
+    // Map hx-vals to values and add combination, has_focus, and is_inside
+    const values = {};
+    if (config['hx-vals']) {
+      Object.assign(values, config['hx-vals']);
+    }
+    values.combination = combinationStr;
+    values.has_focus = hasFocus;
+    values.is_inside = isInside;
+    htmxOptions.values = values;
+
+    // Add any other hx-* attributes (like hx-headers, hx-select, etc.)
+    for (const [key, value] of Object.entries(config)) {
+      if (key.startsWith('hx-') && !['hx-post', 'hx-get', 'hx-put', 'hx-delete', 'hx-patch', 'hx-target', 'hx-swap', 'hx-vals'].includes(key)) {
+        // Remove 'hx-' prefix and convert to camelCase
+        const optionKey = key.substring(3).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        htmxOptions[optionKey] = value;
+      }
+    }
+
+    // Make AJAX call with htmx
+    htmx.ajax(method, url, htmxOptions);
+  }
+
+  /**
+   * Handle keyboard events and trigger matching combinations
+   * @param {KeyboardEvent} event - The keyboard event
+   */
+  function handleKeyboardEvent(event) {
+    const key = normalizeKey(event.key);
+
+    // Add key to current pressed keys
+    KeyboardRegistry.currentKeys.add(key);
+    console.debug("Received key", key);
+
+    // Create a snapshot of current keyboard state
+    const snapshot = new Set(KeyboardRegistry.currentKeys);
+
+    // Add snapshot to history
+    KeyboardRegistry.snapshotHistory.push(snapshot);
+
+    // Cancel any pending timeout
+    if (KeyboardRegistry.pendingTimeout) {
+      clearTimeout(KeyboardRegistry.pendingTimeout);
+      KeyboardRegistry.pendingTimeout = null;
+      KeyboardRegistry.pendingMatches = [];
+    }
+
+    // Collect match information for all elements
+    const currentMatches = [];
+    let anyHasLongerSequence = false;
+    let foundAnyMatch = false;
+
+    // Check all registered elements for matching combinations
+    for (const [elementId, data] of KeyboardRegistry.elements) {
+      const element = document.getElementById(elementId);
+      if (!element) continue;
+
+      // Check if focus is inside this element (element itself or any child)
+      const isInside = element.contains(document.activeElement);
+
+      const treeRoot = data.tree;
+
+      // Traverse the tree with current snapshot history
+      const currentNode = traverseTree(treeRoot, KeyboardRegistry.snapshotHistory);
+
+      if (!currentNode) {
+        // No match in this tree, continue to next element
+        console.debug("No match in tree for event", key);
+        continue;
+      }
+
+      // We found at least a partial match
+      foundAnyMatch = true;
+
+      // Check if we have a match (node has a URL)
+      const hasMatch = currentNode.config !== null;
+
+      // Check if there are longer sequences possible (node has children)
+      const hasLongerSequences = currentNode.children.size > 0;
+
+      // Track if ANY element has longer sequences possible
+      if (hasLongerSequences) {
+        anyHasLongerSequence = true;
+      }
+
+      // Collect matches
+      if (hasMatch) {
+        currentMatches.push({
+          elementId: elementId,
+          config: currentNode.config,
+          combinationStr: currentNode.combinationStr,
+          isInside: isInside
+        });
+      }
+    }
+
+    // Prevent default if we found any match and not in input context
+    if (currentMatches.length > 0 && !isInInputContext()) {
+      event.preventDefault();
+    }
+
+    // Decision logic based on matches and longer sequences
+    if (currentMatches.length > 0 && !anyHasLongerSequence) {
+      // We have matches and NO element has longer sequences possible
+      // Trigger ALL matches immediately
+      for (const match of currentMatches) {
+        triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
+      }
+
+      // Clear history after triggering
+      KeyboardRegistry.snapshotHistory = [];
+
+    } else if (currentMatches.length > 0 && anyHasLongerSequence) {
+      // We have matches but AT LEAST ONE element has longer sequences possible
+      // Wait for timeout - ALL current matches will be triggered if timeout expires
+
+      KeyboardRegistry.pendingMatches = currentMatches;
+
+      KeyboardRegistry.pendingTimeout = setTimeout(() => {
+        // Timeout expired, trigger ALL pending matches
+        for (const match of KeyboardRegistry.pendingMatches) {
+          triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
+        }
+
+        // Clear state
+        KeyboardRegistry.snapshotHistory = [];
+        KeyboardRegistry.pendingMatches = [];
+        KeyboardRegistry.pendingTimeout = null;
+      }, KeyboardRegistry.sequenceTimeout);
+
+    } else if (currentMatches.length === 0 && anyHasLongerSequence) {
+      // No matches yet but longer sequences are possible
+      // Just wait, don't trigger anything
+
+    } else {
+      // No matches and no longer sequences possible
+      // This is an invalid sequence - clear history
+      KeyboardRegistry.snapshotHistory = [];
+    }
+
+    // If we found no match at all, clear the history
+    // This handles invalid sequences like "A C" when only "A B" exists
+    if (!foundAnyMatch) {
+      KeyboardRegistry.snapshotHistory = [];
+    }
+
+    // Also clear history if it gets too long (prevent memory issues)
+    if (KeyboardRegistry.snapshotHistory.length > 10) {
+      KeyboardRegistry.snapshotHistory = [];
+    }
+  }
+
+  /**
+   * Handle keyup event to remove keys from current pressed keys
+   * @param {KeyboardEvent} event - The keyboard event
+   */
+  function handleKeyUp(event) {
+    const key = normalizeKey(event.key);
+    KeyboardRegistry.currentKeys.delete(key);
+  }
+
+  /**
+   * Attach the global keyboard event listener if not already attached
+   */
+  function attachGlobalListener() {
+    if (!KeyboardRegistry.listenerAttached) {
+      document.addEventListener('keydown', handleKeyboardEvent);
+      document.addEventListener('keyup', handleKeyUp);
+      KeyboardRegistry.listenerAttached = true;
+    }
+  }
+
+  /**
+   * Detach the global keyboard event listener
+   */
+  function detachGlobalListener() {
+    if (KeyboardRegistry.listenerAttached) {
+      document.removeEventListener('keydown', handleKeyboardEvent);
+      document.removeEventListener('keyup', handleKeyUp);
+      KeyboardRegistry.listenerAttached = false;
+
+      // Clean up all state
+      KeyboardRegistry.currentKeys.clear();
+      KeyboardRegistry.snapshotHistory = [];
+      if (KeyboardRegistry.pendingTimeout) {
+        clearTimeout(KeyboardRegistry.pendingTimeout);
+        KeyboardRegistry.pendingTimeout = null;
+      }
+      KeyboardRegistry.pendingMatches = [];
+    }
+  }
+
+  /**
+   * Add keyboard support to an element
+   * @param {string} elementId - The ID of the element
+   * @param {string} combinationsJson - JSON string of combinations mapping
+   */
+  window.add_keyboard_support = function (elementId, combinationsJson) {
+    // Parse the combinations JSON
+    const combinations = JSON.parse(combinationsJson);
+
+    // Build tree for this element
+    const tree = buildTree(combinations);
+
+    // Get element reference
+    const element = document.getElementById(elementId);
+    if (!element) {
+      console.error("Element with ID", elementId, "not found!");
+      return;
+    }
+
+    // Add to registry
+    KeyboardRegistry.elements.set(elementId, {
+      tree: tree,
+      element: element
+    });
+
+    // Attach global listener if not already attached
+    attachGlobalListener();
+  };
+
+  /**
+   * Remove keyboard support from an element
+   * @param {string} elementId - The ID of the element
+   */
+  window.remove_keyboard_support = function (elementId) {
+    // Remove from registry
+    if (!KeyboardRegistry.elements.has(elementId)) {
+      console.warn("Element with ID", elementId, "not found in keyboard registry!");
+      return;
+    }
+
+    KeyboardRegistry.elements.delete(elementId);
+
+    // If no more elements, detach global listeners
+    if (KeyboardRegistry.elements.size === 0) {
+      detachGlobalListener();
+    }
+  };
+})();

tests/html/mouse_support.js

@@ -0,0 +1,634 @@
+/**
+ * Create mouse bindings
+ */
+(function () {
+  /**
+   * Global registry to store mouse shortcuts for multiple elements
+   */
+  const MouseRegistry = {
+    elements: new Map(), // elementId -> { tree, element }
+    listenerAttached: false,
+    snapshotHistory: [],
+    pendingTimeout: null,
+    pendingMatches: [], // Array of matches waiting for timeout
+    sequenceTimeout: 500, // 500ms timeout for sequences
+    clickHandler: null,
+    contextmenuHandler: null
+  };
+
+  /**
+   * Normalize mouse action names
+   * @param {string} action - The action to normalize
+   * @returns {string} - Normalized action name
+   */
+  function normalizeAction(action) {
+    const normalized = action.toLowerCase().trim();
+
+    // Handle aliases
+    const aliasMap = {
+      'rclick': 'right_click'
+    };
+
+    return aliasMap[normalized] || normalized;
+  }
+
+  /**
+   * Create a unique string key from a Set of actions for Map indexing
+   * @param {Set} actionSet - Set of normalized actions
+   * @returns {string} - Sorted string representation
+   */
+  function setToKey(actionSet) {
+    return Array.from(actionSet).sort().join('+');
+  }
+
+  /**
+   * Parse a single element (can be a simple click or click with modifiers)
+   * @param {string} element - The element string (e.g., "click" or "ctrl+click")
+   * @returns {Set} - Set of normalized actions
+   */
+  function parseElement(element) {
+    if (element.includes('+')) {
+      // Click with modifiers
+      return new Set(element.split('+').map(a => normalizeAction(a)));
+    }
+    // Simple click
+    return new Set([normalizeAction(element)]);
+  }
+
+  /**
+   * Parse a combination string into sequence elements
+   * @param {string} combination - The combination string (e.g., "click right_click")
+   * @returns {Array} - Array of Sets representing the sequence
+   */
+  function parseCombination(combination) {
+    // Check if it's a sequence (contains space)
+    if (combination.includes(' ')) {
+      return combination.split(' ').map(el => parseElement(el.trim()));
+    }
+
+    // Single element (can be a click or click with modifiers)
+    return [parseElement(combination)];
+  }
+
+  /**
+   * Create a new tree node
+   * @returns {Object} - New tree node
+   */
+  function createTreeNode() {
+    return {
+      config: null,
+      combinationStr: null,
+      children: new Map()
+    };
+  }
+
+  /**
+   * Build a tree from combinations
+   * @param {Object} combinations - Map of combination strings to HTMX config objects
+   * @returns {Object} - Root tree node
+   */
+  function buildTree(combinations) {
+    const root = createTreeNode();
+
+    for (const [combinationStr, config] of Object.entries(combinations)) {
+      const sequence = parseCombination(combinationStr);
+      console.log("Parsing mouse combination", combinationStr, "=>", sequence);
+      let currentNode = root;
+
+      for (const actionSet of sequence) {
+        const key = setToKey(actionSet);
+
+        if (!currentNode.children.has(key)) {
+          currentNode.children.set(key, createTreeNode());
+        }
+
+        currentNode = currentNode.children.get(key);
+      }
+
+      // Mark as end of sequence and store config
+      currentNode.config = config;
+      currentNode.combinationStr = combinationStr;
+    }
+
+    return root;
+  }
+
+  /**
+   * Traverse the tree with the current snapshot history
+   * @param {Object} treeRoot - Root of the tree
+   * @param {Array} snapshotHistory - Array of Sets representing mouse actions
+   * @returns {Object|null} - Current node or null if no match
+   */
+  function traverseTree(treeRoot, snapshotHistory) {
+    let currentNode = treeRoot;
+
+    for (const snapshot of snapshotHistory) {
+      const key = setToKey(snapshot);
+
+      if (!currentNode.children.has(key)) {
+        return null;
+      }
+
+      currentNode = currentNode.children.get(key);
+    }
+
+    return currentNode;
+  }
+
+  /**
+   * Check if we're inside an input element where clicking should work normally
+   * @returns {boolean} - True if inside an input-like element
+   */
+  function isInInputContext() {
+    const activeElement = document.activeElement;
+    if (!activeElement) return false;
+
+    const tagName = activeElement.tagName.toLowerCase();
+
+    // Check for input/textarea
+    if (tagName === 'input' || tagName === 'textarea') {
+      return true;
+    }
+
+    // Check for contenteditable
+    if (activeElement.isContentEditable) {
+      return true;
+    }
+
+    return false;
+  }
+
+  /**
+   * Get the element that was actually clicked (from registered elements)
+   * @param {Element} target - The clicked element
+   * @returns {string|null} - Element ID if found, null otherwise
+   */
+  function findRegisteredElement(target) {
+    // Check if target itself is registered
+    if (target.id && MouseRegistry.elements.has(target.id)) {
+      return target.id;
+    }
+
+    // Check if any parent is registered
+    let current = target.parentElement;
+    while (current) {
+      if (current.id && MouseRegistry.elements.has(current.id)) {
+        return current.id;
+      }
+      current = current.parentElement;
+    }
+
+    return null;
+  }
+
+  /**
+   * Create a snapshot from mouse event
+   * @param {MouseEvent} event - The mouse event
+   * @param {string} baseAction - The base action ('click' or 'right_click')
+   * @returns {Set} - Set of actions representing this click
+   */
+  function createSnapshot(event, baseAction) {
+    const actions = new Set([baseAction]);
+
+    // Add modifiers if present
+    if (event.ctrlKey || event.metaKey) {
+      actions.add('ctrl');
+    }
+    if (event.shiftKey) {
+      actions.add('shift');
+    }
+    if (event.altKey) {
+      actions.add('alt');
+    }
+
+    return actions;
+  }
+
+  /**
+   * Trigger an action for a matched combination
+   * @param {string} elementId - ID of the element
+   * @param {Object} config - HTMX configuration object
+   * @param {string} combinationStr - The matched combination string
+   * @param {boolean} isInside - Whether the click was inside the element
+   */
+  function triggerAction(elementId, config, combinationStr, isInside) {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+
+    const hasFocus = document.activeElement === element;
+
+    // Extract HTTP method and URL from hx-* attributes
+    let method = 'POST'; // default
+    let url = null;
+
+    const methodMap = {
+      'hx-post': 'POST',
+      'hx-get': 'GET',
+      'hx-put': 'PUT',
+      'hx-delete': 'DELETE',
+      'hx-patch': 'PATCH'
+    };
+
+    for (const [attr, httpMethod] of Object.entries(methodMap)) {
+      if (config[attr]) {
+        method = httpMethod;
+        url = config[attr];
+        break;
+      }
+    }
+
+    if (!url) {
+      console.error('No HTTP method attribute found in config:', config);
+      return;
+    }
+
+    // Build htmx.ajax options
+    const htmxOptions = {};
+
+    // Map hx-target to target
+    if (config['hx-target']) {
+      htmxOptions.target = config['hx-target'];
+    }
+
+    // Map hx-swap to swap
+    if (config['hx-swap']) {
+      htmxOptions.swap = config['hx-swap'];
+    }
+
+    // Map hx-vals to values and add combination, has_focus, and is_inside
+    const values = {};
+    if (config['hx-vals']) {
+      Object.assign(values, config['hx-vals']);
+    }
+    values.combination = combinationStr;
+    values.has_focus = hasFocus;
+    values.is_inside = isInside;
+    htmxOptions.values = values;
+
+    // Add any other hx-* attributes (like hx-headers, hx-select, etc.)
+    for (const [key, value] of Object.entries(config)) {
+      if (key.startsWith('hx-') && !['hx-post', 'hx-get', 'hx-put', 'hx-delete', 'hx-patch', 'hx-target', 'hx-swap', 'hx-vals'].includes(key)) {
+        // Remove 'hx-' prefix and convert to camelCase
+        const optionKey = key.substring(3).replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+        htmxOptions[optionKey] = value;
+      }
+    }
+
+    // Make AJAX call with htmx
+    htmx.ajax(method, url, htmxOptions);
+  }
+
+  /**
+   * Handle mouse events and trigger matching combinations
+   * @param {MouseEvent} event - The mouse event
+   * @param {string} baseAction - The base action ('click' or 'right_click')
+   */
+  function handleMouseEvent(event, baseAction) {
+    // Different behavior for click vs right_click
+    if (baseAction === 'click') {
+      // Click: trigger for ALL registered elements (useful for closing modals/popups)
+      handleGlobalClick(event);
+    } else if (baseAction === 'right_click') {
+      // Right-click: trigger ONLY if clicked on a registered element
+      handleElementRightClick(event);
+    }
+  }
+
+  /**
+   * Handle global click events (triggers for all registered elements)
+   * @param {MouseEvent} event - The mouse event
+   */
+  function handleGlobalClick(event) {
+    console.debug("Global click detected");
+
+    // Create a snapshot of current mouse action with modifiers
+    const snapshot = createSnapshot(event, 'click');
+
+    // Add snapshot to history
+    MouseRegistry.snapshotHistory.push(snapshot);
+
+    // Cancel any pending timeout
+    if (MouseRegistry.pendingTimeout) {
+      clearTimeout(MouseRegistry.pendingTimeout);
+      MouseRegistry.pendingTimeout = null;
+      MouseRegistry.pendingMatches = [];
+    }
+
+    // Collect match information for ALL registered elements
+    const currentMatches = [];
+    let anyHasLongerSequence = false;
+    let foundAnyMatch = false;
+
+    for (const [elementId, data] of MouseRegistry.elements) {
+      const element = document.getElementById(elementId);
+      if (!element) continue;
+
+      // Check if click was inside this element
+      const isInside = element.contains(event.target);
+
+      const treeRoot = data.tree;
+
+      // Traverse the tree with current snapshot history
+      const currentNode = traverseTree(treeRoot, MouseRegistry.snapshotHistory);
+
+      if (!currentNode) {
+        // No match in this tree
+        continue;
+      }
+
+      // We found at least a partial match
+      foundAnyMatch = true;
+
+      // Check if we have a match (node has config)
+      const hasMatch = currentNode.config !== null;
+
+      // Check if there are longer sequences possible (node has children)
+      const hasLongerSequences = currentNode.children.size > 0;
+
+      if (hasLongerSequences) {
+        anyHasLongerSequence = true;
+      }
+
+      // Collect matches
+      if (hasMatch) {
+        currentMatches.push({
+          elementId: elementId,
+          config: currentNode.config,
+          combinationStr: currentNode.combinationStr,
+          isInside: isInside
+        });
+      }
+    }
+
+    // Prevent default if we found any match and not in input context
+    if (currentMatches.length > 0 && !isInInputContext()) {
+      event.preventDefault();
+    }
+
+    // Decision logic based on matches and longer sequences
+    if (currentMatches.length > 0 && !anyHasLongerSequence) {
+      // We have matches and NO longer sequences possible
+      // Trigger ALL matches immediately
+      for (const match of currentMatches) {
+        triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
+      }
+
+      // Clear history after triggering
+      MouseRegistry.snapshotHistory = [];
+
+    } else if (currentMatches.length > 0 && anyHasLongerSequence) {
+      // We have matches but longer sequences are possible
+      // Wait for timeout - ALL current matches will be triggered if timeout expires
+
+      MouseRegistry.pendingMatches = currentMatches;
+
+      MouseRegistry.pendingTimeout = setTimeout(() => {
+        // Timeout expired, trigger ALL pending matches
+        for (const match of MouseRegistry.pendingMatches) {
+          triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
+        }
+
+        // Clear state
+        MouseRegistry.snapshotHistory = [];
+        MouseRegistry.pendingMatches = [];
+        MouseRegistry.pendingTimeout = null;
+      }, MouseRegistry.sequenceTimeout);
+
+    } else if (currentMatches.length === 0 && anyHasLongerSequence) {
+      // No matches yet but longer sequences are possible
+      // Just wait, don't trigger anything
+
+    } else {
+      // No matches and no longer sequences possible
+      // This is an invalid sequence - clear history
+      MouseRegistry.snapshotHistory = [];
+    }
+
+    // If we found no match at all, clear the history
+    if (!foundAnyMatch) {
+      MouseRegistry.snapshotHistory = [];
+    }
+
+    // Also clear history if it gets too long (prevent memory issues)
+    if (MouseRegistry.snapshotHistory.length > 10) {
+      MouseRegistry.snapshotHistory = [];
+    }
+  }
+
+  /**
+   * Handle right-click events (triggers only for clicked element)
+   * @param {MouseEvent} event - The mouse event
+   */
+  function handleElementRightClick(event) {
+    // Find which registered element was clicked
+    const elementId = findRegisteredElement(event.target);
+
+    if (!elementId) {
+      // Right-click wasn't on a registered element - don't prevent default
+      // This allows browser context menu to appear
+      return;
+    }
+
+    console.debug("Right-click on registered element", elementId);
+
+    // For right-click, clicked_inside is always true (we only trigger if clicked on element)
+    const clickedInside = true;
+
+    // Create a snapshot of current mouse action with modifiers
+    const snapshot = createSnapshot(event, 'right_click');
+
+    // Add snapshot to history
+    MouseRegistry.snapshotHistory.push(snapshot);
+
+    // Cancel any pending timeout
+    if (MouseRegistry.pendingTimeout) {
+      clearTimeout(MouseRegistry.pendingTimeout);
+      MouseRegistry.pendingTimeout = null;
+      MouseRegistry.pendingMatches = [];
+    }
+
+    // Collect match information for this element
+    const currentMatches = [];
+    let anyHasLongerSequence = false;
+    let foundAnyMatch = false;
+
+    const data = MouseRegistry.elements.get(elementId);
+    if (!data) return;
+
+    const treeRoot = data.tree;
+
+    // Traverse the tree with current snapshot history
+    const currentNode = traverseTree(treeRoot, MouseRegistry.snapshotHistory);
+
+    if (!currentNode) {
+      // No match in this tree
+      console.debug("No match in tree for right-click");
+      // Clear history for invalid sequences
+      MouseRegistry.snapshotHistory = [];
+      return;
+    }
+
+    // We found at least a partial match
+    foundAnyMatch = true;
+
+    // Check if we have a match (node has config)
+    const hasMatch = currentNode.config !== null;
+
+    // Check if there are longer sequences possible (node has children)
+    const hasLongerSequences = currentNode.children.size > 0;
+
+    if (hasLongerSequences) {
+      anyHasLongerSequence = true;
+    }
+
+    // Collect matches
+    if (hasMatch) {
+      currentMatches.push({
+        elementId: elementId,
+        config: currentNode.config,
+        combinationStr: currentNode.combinationStr,
+        isInside: true  // Right-click only triggers when clicking on element
+      });
+    }
+
+    // Prevent default if we found any match and not in input context
+    if (currentMatches.length > 0 && !isInInputContext()) {
+      event.preventDefault();
+    }
+
+    // Decision logic based on matches and longer sequences
+    if (currentMatches.length > 0 && !anyHasLongerSequence) {
+      // We have matches and NO longer sequences possible
+      // Trigger ALL matches immediately
+      for (const match of currentMatches) {
+        triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
+      }
+
+      // Clear history after triggering
+      MouseRegistry.snapshotHistory = [];
+
+    } else if (currentMatches.length > 0 && anyHasLongerSequence) {
+      // We have matches but longer sequences are possible
+      // Wait for timeout - ALL current matches will be triggered if timeout expires
+
+      MouseRegistry.pendingMatches = currentMatches;
+
+      MouseRegistry.pendingTimeout = setTimeout(() => {
+        // Timeout expired, trigger ALL pending matches
+        for (const match of MouseRegistry.pendingMatches) {
+          triggerAction(match.elementId, match.config, match.combinationStr, match.isInside);
+        }
+
+        // Clear state
+        MouseRegistry.snapshotHistory = [];
+        MouseRegistry.pendingMatches = [];
+        MouseRegistry.pendingTimeout = null;
+      }, MouseRegistry.sequenceTimeout);
+
+    } else if (currentMatches.length === 0 && anyHasLongerSequence) {
+      // No matches yet but longer sequences are possible
+      // Just wait, don't trigger anything
+
+    } else {
+      // No matches and no longer sequences possible
+      // This is an invalid sequence - clear history
+      MouseRegistry.snapshotHistory = [];
+    }
+
+    // If we found no match at all, clear the history
+    if (!foundAnyMatch) {
+      MouseRegistry.snapshotHistory = [];
+    }
+
+    // Also clear history if it gets too long (prevent memory issues)
+    if (MouseRegistry.snapshotHistory.length > 10) {
+      MouseRegistry.snapshotHistory = [];
+    }
+  }
+
+  /**
+   * Attach the global mouse event listeners if not already attached
+   */
+  function attachGlobalListener() {
+    if (!MouseRegistry.listenerAttached) {
+      // Store handler references for proper removal
+      MouseRegistry.clickHandler = (e) => handleMouseEvent(e, 'click');
+      MouseRegistry.contextmenuHandler = (e) => handleMouseEvent(e, 'right_click');
+
+      document.addEventListener('click', MouseRegistry.clickHandler);
+      document.addEventListener('contextmenu', MouseRegistry.contextmenuHandler);
+      MouseRegistry.listenerAttached = true;
+    }
+  }
+
+  /**
+   * Detach the global mouse event listeners
+   */
+  function detachGlobalListener() {
+    if (MouseRegistry.listenerAttached) {
+      document.removeEventListener('click', MouseRegistry.clickHandler);
+      document.removeEventListener('contextmenu', MouseRegistry.contextmenuHandler);
+      MouseRegistry.listenerAttached = false;
+
+      // Clean up handler references
+      MouseRegistry.clickHandler = null;
+      MouseRegistry.contextmenuHandler = null;
+
+      // Clean up all state
+      MouseRegistry.snapshotHistory = [];
+      if (MouseRegistry.pendingTimeout) {
+        clearTimeout(MouseRegistry.pendingTimeout);
+        MouseRegistry.pendingTimeout = null;
+      }
+      MouseRegistry.pendingMatches = [];
+    }
+  }
+
+  /**
+   * Add mouse support to an element
+   * @param {string} elementId - The ID of the element
+   * @param {string} combinationsJson - JSON string of combinations mapping
+   */
+  window.add_mouse_support = function (elementId, combinationsJson) {
+    // Parse the combinations JSON
+    const combinations = JSON.parse(combinationsJson);
+
+    // Build tree for this element
+    const tree = buildTree(combinations);
+
+    // Get element reference
+    const element = document.getElementById(elementId);
+    if (!element) {
+      console.error("Element with ID", elementId, "not found!");
+      return;
+    }
+
+    // Add to registry
+    MouseRegistry.elements.set(elementId, {
+      tree: tree,
+      element: element
+    });
+
+    // Attach global listener if not already attached
+    attachGlobalListener();
+  };
+
+  /**
+   * Remove mouse support from an element
+   * @param {string} elementId - The ID of the element
+   */
+  window.remove_mouse_support = function (elementId) {
+    // Remove from registry
+    if (!MouseRegistry.elements.has(elementId)) {
+      console.warn("Element with ID", elementId, "not found in mouse registry!");
+      return;
+    }
+
+    MouseRegistry.elements.delete(elementId);
+
+    // If no more elements, detach global listeners
+    if (MouseRegistry.elements.size === 0) {
+      detachGlobalListener();
+    }
+  };
+})();

tests/html/test_keyboard_support.html

@@ -137,6 +137,12 @@
   <div class="test-container">
     <h2>Test Input (typing should work normally here)</h2>
     <input type="text" placeholder="Try typing Ctrl+C, Ctrl+A here - should work normally" style="width: 100%; padding: 10px; font-size: 14px;">
+    <p style="margin-top: 10px; padding: 10px; background-color: #e3f2fd; border-left: 4px solid #2196F3; border-radius: 3px;">
+      <strong>Parameters Explained:</strong><br>
+      • <code>has_focus</code>: Whether the registered element itself has focus<br>
+      • <code>is_inside</code>: Whether the focus is on the registered element or any of its children<br>
+      <em>Example: If focus is on this input and its parent div is registered, has_focus=false but is_inside=true</em>
+    </p>
   </div>
 
   <div class="test-container">
@@ -151,6 +157,9 @@
     <div id="test-element-2" class="test-element" tabindex="0">
       This element also responds to ESC and Shift Shift
     </div>
+    <button class="clear-button" onclick="removeElement2()" style="background-color: #FF5722; margin-top: 10px;">
+      Remove Element 2 Keyboard Support
+    </button>
   </div>
 
   <div class="test-container">
@@ -172,12 +181,14 @@
       window.htmx.ajax = function(method, url, config) {
         const timestamp = new Date().toLocaleTimeString();
         const hasFocus = config.values.has_focus;
+        const isInside = config.values.is_inside;
         const combination = config.values.combination;
 
         // Build details string with all config options
         const details = [
           `Combination: "${combination}"`,
-          `Element has focus: ${hasFocus}`
+          `Element has focus: ${hasFocus}`,
+          `Focus inside element: ${isInside}`
         ];
 
         if (config.target) {
@@ -223,6 +234,16 @@
     function clearLog() {
       document.getElementById('log').innerHTML = '';
     }
+
+    function removeElement2() {
+      remove_keyboard_support('test-element-2');
+      logEvent('Element 2 keyboard support removed',
+               'ESC and Shift Shift no longer trigger for Element 2',
+               'Element 1 still active', false);
+      // Disable the button
+      event.target.disabled = true;
+      event.target.textContent = 'Keyboard Support Removed';
+    }
   </script>
 
   <!-- Include keyboard support script -->

tests/html/test_mouse_support.html

@@ -0,0 +1,356 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mouse Support Test</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      max-width: 1200px;
+      margin: 20px auto;
+      padding: 0 20px;
+    }
+
+    .test-container {
+      border: 2px solid #333;
+      padding: 20px;
+      margin: 20px 0;
+      border-radius: 5px;
+    }
+
+    .test-element {
+      background-color: #f0f0f0;
+      border: 2px solid #999;
+      padding: 30px;
+      text-align: center;
+      border-radius: 5px;
+      cursor: pointer;
+      margin: 10px 0;
+      user-select: none;
+    }
+
+    .test-element:hover {
+      background-color: #e0e0e0;
+    }
+
+    .test-element:focus {
+      background-color: #e3f2fd;
+      border-color: #2196F3;
+      outline: none;
+    }
+
+    .log-container {
+      background-color: #1e1e1e;
+      color: #d4d4d4;
+      padding: 15px;
+      border-radius: 5px;
+      max-height: 400px;
+      overflow-y: auto;
+      font-family: 'Courier New', monospace;
+      font-size: 14px;
+      margin-top: 20px;
+    }
+
+    .log-entry {
+      margin: 5px 0;
+      padding: 5px;
+      border-left: 3px solid #4CAF50;
+      padding-left: 10px;
+    }
+
+    .log-entry.focus {
+      border-left-color: #2196F3;
+    }
+
+    .log-entry.no-focus {
+      border-left-color: #FF9800;
+    }
+
+    .actions-list {
+      background-color: #fff3cd;
+      border: 1px solid #ffc107;
+      padding: 15px;
+      border-radius: 5px;
+      margin: 10px 0;
+    }
+
+    .actions-list h3 {
+      margin-top: 0;
+    }
+
+    .actions-list ul {
+      margin: 10px 0;
+      padding-left: 20px;
+    }
+
+    .actions-list code {
+      background-color: #f5f5f5;
+      padding: 2px 6px;
+      border-radius: 3px;
+      font-family: 'Courier New', monospace;
+    }
+
+    .clear-button {
+      background-color: #f44336;
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 14px;
+    }
+
+    .clear-button:hover {
+      background-color: #d32f2f;
+    }
+
+    .remove-button {
+      background-color: #FF5722;
+      color: white;
+      border: none;
+      padding: 10px 20px;
+      border-radius: 5px;
+      cursor: pointer;
+      font-size: 14px;
+      margin-top: 10px;
+    }
+
+    .remove-button:hover {
+      background-color: #E64A19;
+    }
+
+    .remove-button:disabled {
+      background-color: #ccc;
+      cursor: not-allowed;
+    }
+
+    h1, h2 {
+      color: #333;
+    }
+
+    .note {
+      background-color: #e3f2fd;
+      border-left: 4px solid #2196F3;
+      padding: 10px 15px;
+      margin: 10px 0;
+      border-radius: 3px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Mouse Support Test Page</h1>
+
+  <div class="actions-list">
+    <h3>🖱️ Configured Mouse Actions</h3>
+    <p><strong>Element 1 - All Actions:</strong></p>
+    <ul>
+      <li><code>click</code> - Simple left click</li>
+      <li><code>right_click</code> - Right click (context menu blocked)</li>
+      <li><code>ctrl+click</code> - Ctrl/Cmd + Click</li>
+      <li><code>shift+click</code> - Shift + Click</li>
+      <li><code>ctrl+shift+click</code> - Ctrl + Shift + Click</li>
+      <li><code>click right_click</code> - Click then right-click within 500ms</li>
+      <li><code>click click</code> - Click twice in sequence</li>
+    </ul>
+    <p><strong>Element 2 - Using rclick alias:</strong></p>
+    <ul>
+      <li><code>click</code> - Simple click</li>
+      <li><code>rclick</code> - Right click (using rclick alias)</li>
+      <li><code>click rclick</code> - Click then right-click sequence (using alias)</li>
+    </ul>
+    <p><strong>Note:</strong> <code>rclick</code> is an alias for <code>right_click</code> and works identically.</p>
+    <p><strong>Tip:</strong> Try different click combinations! Right-click menu will be blocked on test elements.</p>
+  </div>
+
+  <div class="note">
+    <strong>Click Behavior:</strong> The <code>click</code> action is detected GLOBALLY (anywhere on the page).
+    Try clicking outside the test elements - the click action will still trigger! The <code>is_inside</code>
+    parameter tells you if the click was inside or outside the element (perfect for "close popup if clicked outside" logic).
+  </div>
+
+  <div class="note">
+    <strong>Right-Click Behavior:</strong> The <code>right_click</code> action is detected ONLY when clicking ON the element.
+    Try right-clicking outside the test elements - the browser's context menu will appear normally.
+  </div>
+
+  <div class="note">
+    <strong>Mac Users:</strong> Use Cmd (⌘) instead of Ctrl. The library handles cross-platform compatibility automatically.
+  </div>
+
+  <div class="test-container">
+    <h2>Test Element 1 (All Actions)</h2>
+    <div id="test-element-1" class="test-element" tabindex="0">
+      Try different mouse actions here!<br>
+      Click, Right-click, Ctrl+Click, Shift+Click, sequences...
+    </div>
+  </div>
+
+  <div class="test-container">
+    <h2>Test Element 2 (Using rclick alias)</h2>
+    <div id="test-element-2" class="test-element" tabindex="0">
+      This element uses "rclick" alias for right-click<br>
+      Also has a "click rclick" sequence
+    </div>
+    <button class="remove-button" onclick="removeElement2()">
+      Remove Element 2 Mouse Support
+    </button>
+  </div>
+
+  <div class="test-container">
+    <h2>Test Input (normal clicking should work here)</h2>
+    <input type="text" placeholder="Try clicking, right-clicking here - should work normally"
+           style="width: 100%; padding: 10px; font-size: 14px;">
+  </div>
+
+  <div class="test-container" style="background-color: #f9f9f9;">
+    <h2>🎯 Click Outside Test Area</h2>
+    <p>Click anywhere in this gray area (outside the test elements above) to see that <code>click</code> is detected globally!</p>
+    <p style="margin-top: 20px; padding: 30px; background-color: white; border: 2px dashed #999; border-radius: 5px; text-align: center;">
+      This is just empty space - but clicking here will still trigger the registered <code>click</code> actions!
+    </p>
+  </div>
+
+  <div class="test-container">
+    <h2>Event Log</h2>
+    <button class="clear-button" onclick="clearLog()">Clear Log</button>
+    <div id="log" class="log-container"></div>
+  </div>
+
+  <!-- Include htmx -->
+  <script src="https://unpkg.com/htmx.org@1.9.10"></script>
+
+  <!-- Mock htmx.ajax for testing -->
+  <script>
+    // Store original htmx.ajax if it exists
+    const originalHtmxAjax = window.htmx && window.htmx.ajax;
+
+    // Override htmx.ajax for testing purposes
+    if (window.htmx) {
+      window.htmx.ajax = function(method, url, config) {
+        const timestamp = new Date().toLocaleTimeString();
+        const hasFocus = config.values.has_focus;
+        const isInside = config.values.is_inside;
+        const combination = config.values.combination;
+
+        // Build details string with all config options
+        const details = [
+          `Combination: "${combination}"`,
+          `Element has focus: ${hasFocus}`,
+          `Click inside element: ${isInside}`
+        ];
+
+        if (config.target) {
+          details.push(`Target: ${config.target}`);
+        }
+        if (config.swap) {
+          details.push(`Swap: ${config.swap}`);
+        }
+        if (config.values) {
+          const extraVals = Object.keys(config.values).filter(k => k !== 'combination' && k !== 'has_focus' && k !== 'is_inside');
+          if (extraVals.length > 0) {
+            details.push(`Extra values: ${JSON.stringify(extraVals.reduce((obj, k) => ({...obj, [k]: config.values[k]}), {}))}`);
+          }
+        }
+
+        logEvent(
+          `[${timestamp}] ${method} ${url}`,
+          ...details,
+          hasFocus
+        );
+
+        // Uncomment below to use real htmx.ajax if you have a backend
+        // if (originalHtmxAjax) {
+        //   originalHtmxAjax.call(this, method, url, config);
+        // }
+      };
+    }
+
+    function logEvent(title, ...details) {
+      const log = document.getElementById('log');
+      const hasFocus = details[details.length - 1];
+
+      const entry = document.createElement('div');
+      entry.className = `log-entry ${hasFocus ? 'focus' : 'no-focus'}`;
+      entry.innerHTML = `
+        <strong>${title}</strong><br>
+        ${details.slice(0, -1).join('<br>')}
+      `;
+
+      log.insertBefore(entry, log.firstChild);
+    }
+
+    function clearLog() {
+      document.getElementById('log').innerHTML = '';
+    }
+
+    function removeElement2() {
+      remove_mouse_support('test-element-2');
+      logEvent('Element 2 mouse support removed',
+               'Click and right-click no longer trigger for Element 2',
+               'Element 1 still active', false);
+      // Disable the button
+      event.target.disabled = true;
+      event.target.textContent = 'Mouse Support Removed';
+    }
+  </script>
+
+  <!-- Include mouse support script -->
+  <script src="mouse_support.js"></script>
+
+  <!-- Initialize mouse support -->
+  <script>
+    // Element 1 - Full configuration
+    const combinations1 = {
+      "click": {
+        "hx-post": "/test/click"
+      },
+      "right_click": {
+        "hx-post": "/test/right-click"
+      },
+      "ctrl+click": {
+        "hx-post": "/test/ctrl-click",
+        "hx-swap": "innerHTML"
+      },
+      "shift+click": {
+        "hx-post": "/test/shift-click",
+        "hx-target": "#result"
+      },
+      "ctrl+shift+click": {
+        "hx-post": "/test/ctrl-shift-click",
+        "hx-vals": {"modifier": "both"}
+      },
+      "click right_click": {
+        "hx-post": "/test/click-then-right-click",
+        "hx-vals": {"type": "sequence"}
+      },
+      "click click": {
+        "hx-post": "/test/double-click-sequence"
+      }
+    };
+
+    add_mouse_support('test-element-1', JSON.stringify(combinations1));
+
+    // Element 2 - Using rclick alias
+    const combinations2 = {
+      "click": {
+        "hx-post": "/test/element2-click"
+      },
+      "rclick": {  // Using rclick alias instead of right_click
+        "hx-post": "/test/element2-rclick"
+      },
+      "click rclick": {  // Sequence using rclick alias
+        "hx-post": "/test/element2-click-rclick-sequence"
+      }
+    };
+
+    add_mouse_support('test-element-2', JSON.stringify(combinations2));
+
+    // Log initial state
+    logEvent('Mouse support initialized',
+             'Element 1: All mouse actions configured',
+             'Element 2: Using "rclick" alias (click, rclick, and click rclick sequence)',
+             'Smart timeout: 500ms for sequences', false);
+  </script>
+</body>
+</html>

tests/testclient/test_matches.py

@@ -3,361 +3,440 @@ from fastcore.basics import NotStr
 from fasthtml.components import *
 
 from myfasthtml.test.matcher import matches, StartsWith, Contains, DoesNotContain, Empty, DoNotCheck, ErrorOutput, \
-  ErrorComparisonOutput, AttributeForbidden, AnyValue, NoChildren
+  ErrorComparisonOutput, AttributeForbidden, AnyValue, NoChildren, TestObject
 from myfasthtml.test.testclient import MyFT
 
 
-@pytest.mark.parametrize('actual, expected', [
-    (None, None),
-    (123, 123),
-    (Div(), Div()),
-    ([Div(), Span()], [Div(), Span()]),
-    (Div(attr1="value"), Div(attr1="value")),
-    (Div(attr1="value", attr2="value"), Div(attr1="value")),
-    (Div(attr1="valueXXX", attr2="value"), Div(attr1=StartsWith("value"))),
-    (Div(attr1="before value after", attr2="value"), Div(attr1=Contains("value"))),
-    (Div(attr1="before after", attr2="value"), Div(attr1=DoesNotContain("value"))),
-    (Div(attr1="value"), Div(attr1=AnyValue())),
-    (None, DoNotCheck()),
-    (123, DoNotCheck()),
-    (Div(), DoNotCheck()),
-    ([Div(), Span()], DoNotCheck()),
-    (NotStr("123456"), NotStr("123")),  # for NotStr, only the beginning is checked
-    (Div(), Div(Empty())),
-    (Div(), Div(NoChildren())),
-    (Div(attr1="value"), Div(NoChildren())),
-    (Div(attr1="value1"), Div(AttributeForbidden("attr2"))),
-    (Div(123), Div(123)),
-    (Div(Span(123)), Div(Span(123))),
-    (Div(Span(123)), Div(DoNotCheck())),
-])
-def test_i_can_match(actual, expected):
-  assert matches(actual, expected)
+class Dummy:
+  def __init__(self, attr1, attr2=None):
+    self.attr1 = attr1
+    self.attr2 = attr2
 
 
-@pytest.mark.parametrize('actual, expected, error_message', [
-    (None, Div(), "Actual is None"),
-    (Div(), None, "Actual is not None"),
-    (123, Div(), "The types are different"),
-    (123, 124, "The values are different"),
-    ([Div(), Span()], [], "Actual is bigger than expected"),
-    ([], [Div(), Span()], "Actual is smaller than expected"),
-    ("not a list", [Div(), Span()], "The types are different"),
-    ([Div(), Span()], [Div(), 123], "The types are different"),
-    (Div(), Span(), "The elements are different"),
-    ([Div(), Span()], [Div(), Div()], "The elements are different"),
-    (Div(), Div(attr1="value"), "'attr1' is not found in Actual"),
-    (Div(attr2="value"), Div(attr1="value"), "'attr1' is not found in Actual"),
-    (Div(attr1="value1"), Div(attr1="value2"), "The values are different for 'attr1'"),
-    (Div(attr1="value1"), Div(attr1=StartsWith("value2")), "The condition 'StartsWith(value2)' is not satisfied"),
-    (Div(attr1="value1"), Div(attr1=Contains("value2")), "The condition 'Contains(value2)' is not satisfied"),
-    (Div(attr1="value1 value2"), Div(attr1=DoesNotContain("value2")), "The condition 'DoesNotContain(value2)'"),
-    (Div(attr1=None), Div(attr1=AnyValue()), "'attr1' is not found in Actual"),
-    (Div(), Div(attr1=AnyValue()), "'attr1' is not found in Actual"),
-    (NotStr("456"), NotStr("123"), "Notstr values are different"),
-    (Div(attr="value"), Div(Empty()), "The condition 'Empty()' is not satisfied"),
-    (Div(Span()), Div(NoChildren()), "The condition 'NoChildren()' is not satisfied"),
-    (Div(120), Div(Empty()), "The condition 'Empty()' is not satisfied"),
-    (Div(Span()), Div(Empty()), "The condition 'Empty()' is not satisfied"),
-    (Div(), Div(Span()), "Actual is lesser than expected"),
-    (Div(), Div(123), "Actual is lesser than expected"),
-    (Div(Span()), Div(Div()), "The elements are different"),
-    (Div(123), Div(Div()), "The types are different"),
-    (Div(123), Div(456), "The values are different"),
-    (Div(Span(), Span()), Div(Span(), Div()), "The elements are different"),
-    (Div(Span(Div())), Div(Span(Span())), "The elements are different"),
-    (Div(attr1="value1"), Div(AttributeForbidden("attr1")), "condition 'AttributeForbidden(attr1)' is not satisfied"),
-])
-def test_i_can_detect_errors(actual, expected, error_message):
-  with pytest.raises(AssertionError) as exc_info:
-    matches(actual, expected)
-  assert error_message in str(exc_info.value)
+class Dummy2:
+  def __init__(self, attr1, attr2):
+    self.attr1 = attr1
+    self.attr2 = attr2
 
 
-@pytest.mark.parametrize('element, expected_path', [
-    (Div(), "Path  : 'div"),
-    (Div(Span()), "Path  : 'div.span"),
-    (Div(Span(Div())), "Path  : 'div.span.div"),
-    (Div(id="div_id"), "Path  : 'div#div_id"),
-    (Div(cls="div_class"), "Path  : 'div[class=div_class]"),
-    (Div(name="div_class"), "Path  : 'div[name=div_class]"),
-    (Div(attr="value"), "Path  : 'div"),
-    (Div(Span(Div(), cls="span_class"), id="div_id"), "Path  : 'div#div_id.span[class=span_class].div"),
-])
-def test_i_can_properly_show_path(element, expected_path):
-  def _construct_test_element(source, tail):
-    res = MyFT(source.tag, source.attrs)
-    if source.children:
-      res.children = [_construct_test_element(child, tail) for child in source.children]
-    else:
-      res.children = [tail]
-    return res
+class TestMatches:
   
-  with pytest.raises(AssertionError) as exc_info:
-    actual = _construct_test_element(element, "Actual")
-    expected = _construct_test_element(element, "Expected")
-    matches(actual, expected)
+  @pytest.mark.parametrize('actual, expected', [
+      (None, None),
+      (123, 123),
+      (Div(), Div()),
+      ([Div(), Span()], [Div(), Span()]),
+      ({"key": Div(attr="value")}, {"key": Div(attr="value")}),
+      ({"key": Dummy(attr1="value")}, {"key": TestObject(Dummy, attr1="value")}),
+      (Div(attr1="value"), Div(attr1="value")),
+      (Div(attr1="value", attr2="value"), Div(attr1="value")),
+      (Div(attr1="valueXXX", attr2="value"), Div(attr1=StartsWith("value"))),
+      (Div(attr1="before value after", attr2="value"), Div(attr1=Contains("value"))),
+      (Div(attr1="before after", attr2="value"), Div(attr1=DoesNotContain("value"))),
+      (Div(attr1="value"), Div(attr1=AnyValue())),
+      (None, DoNotCheck()),
+      (123, DoNotCheck()),
+      (Div(), DoNotCheck()),
+      ([Div(), Span()], DoNotCheck()),
+      (NotStr("123456"), NotStr("123")),  # for NotStr, only the beginning is checked
+      (Div(), Div(Empty())),
+      (Div(), Div(NoChildren())),
+      (Div(attr1="value"), Div(NoChildren())),
+      (Div(attr1="value1"), Div(AttributeForbidden("attr2"))),
+      (Div(123), Div(123)),
+      (Div(Span(123)), Div(Span(123))),
+      (Div(Span(123)), Div(DoNotCheck())),
+      (Dummy(123, "value"), TestObject(Dummy, attr1=123, attr2="value")),
+      (Dummy(123, "value"), TestObject(Dummy, attr2="value")),
+      (Div(Dummy(123, "value")), Div(TestObject(Dummy, attr1=123))),
+      (Dummy(123, "value"), TestObject("Dummy", attr1=123, attr2="value")),
+  ])
+  def test_i_can_match(self, actual, expected):
+    assert matches(actual, expected)
   
-  assert expected_path in str(exc_info.value)
+  @pytest.mark.parametrize('actual, expected, error_message', [
+      (None, Div(), "Actual is None"),
+      (Div(), None, "Actual is not None"),
+      (123, Div(), "The types are different"),
+      (123, 124, "The values are different"),
+      ([Div(), Span()], [], "Actual is bigger than expected"),
+      ([], [Div(), Span()], "Actual is smaller than expected"),
+      ("not a list", [Div(), Span()], "The types are different"),
+      ([Div(), Span()], [Div(), 123], "The types are different"),
+      (Div(), Span(), "The elements are different"),
+      ([Div(), Span()], [Div(), Div()], "The elements are different"),
+      (Div(), Div(attr1="value"), "'attr1' is not found in Actual"),
+      (Div(attr2="value"), Div(attr1="value"), "'attr1' is not found in Actual"),
+      (Div(attr1="value1"), Div(attr1="value2"), "The values are different for 'attr1'"),
+      (Div(attr1="value1"), Div(attr1=StartsWith("value2")), "The condition 'StartsWith(value2)' is not satisfied"),
+      (Div(attr1="value1"), Div(attr1=Contains("value2")), "The condition 'Contains(value2)' is not satisfied"),
+      (Div(attr1="value1 value2"), Div(attr1=DoesNotContain("value2")), "The condition 'DoesNotContain(value2)'"),
+      (Div(attr1=None), Div(attr1=AnyValue()), "'attr1' is not found in Actual"),
+      (Div(), Div(attr1=AnyValue()), "'attr1' is not found in Actual"),
+      (NotStr("456"), NotStr("123"), "Notstr values are different"),
+      (Div(attr="value"), Div(Empty()), "The condition 'Empty()' is not satisfied"),
+      (Div(Span()), Div(NoChildren()), "The condition 'NoChildren()' is not satisfied"),
+      (Div(120), Div(Empty()), "The condition 'Empty()' is not satisfied"),
+      (Div(Span()), Div(Empty()), "The condition 'Empty()' is not satisfied"),
+      (Div(), Div(Span()), "Actual is lesser than expected"),
+      (Div(), Div(123), "Actual is lesser than expected"),
+      (Div(Span()), Div(Div()), "The elements are different"),
+      (Div(123), Div(Div()), "The types are different"),
+      (Div(123), Div(456), "The values are different"),
+      (Div(Span(), Span()), Div(Span(), Div()), "The elements are different"),
+      (Div(Span(Div())), Div(Span(Span())), "The elements are different"),
+      (Div(attr1="value1"), Div(AttributeForbidden("attr1")), "condition 'AttributeForbidden(attr1)' is not satisfied"),
+      (Div(123, "value"), TestObject(Dummy, attr1=123, attr2="value2"), "The types are different:"),
+      (Dummy(123, "value"), TestObject(Dummy, attr1=123, attr3="value3"), "'attr3' is not found in Actual"),
+      (Dummy(123, "value"), TestObject(Dummy, attr1=123, attr2="value2"), "The values are different for 'attr2'"),
+      (Div(Div(123, "value")), Div(TestObject(Dummy, attr1=123, attr2="value2")), "The types are different:"),
+      (Div(Dummy(123, "value")), Div(TestObject(Dummy, attr1=123, attr3="value3")), "'attr3' is not found in Actual"),
+      (Div(Dummy(123, "value")), Div(TestObject(Dummy, attr1=123, attr2="value2")), "are different for 'attr2'"),
+      (Div(123, "value"), TestObject("Dummy", attr1=123, attr2="value2"), "The types are different:"),
+      (Dummy(123, "value"), TestObject("Dummy", attr1=123, attr2=Contains("value2")), "The condition 'Contains(value2)' is not satisfied"),
+  
+  ])
+  def test_i_can_detect_errors(self, actual, expected, error_message):
+    with pytest.raises(AssertionError) as exc_info:
+      matches(actual, expected)
+    assert error_message in str(exc_info.value)
+  
+  @pytest.mark.parametrize('element, expected_path', [
+      (Div(), "Path  : 'div"),
+      (Div(Span()), "Path  : 'div.span"),
+      (Div(Span(Div())), "Path  : 'div.span.div"),
+      (Div(id="div_id"), "Path  : 'div#div_id"),
+      (Div(cls="div_class"), "Path  : 'div[class=div_class]"),
+      (Div(name="div_class"), "Path  : 'div[name=div_class]"),
+      (Div(attr="value"), "Path  : 'div"),
+      (Div(Span(Div(), cls="span_class"), id="div_id"), "Path  : 'div#div_id.span[class=span_class].div"),
+  ])
+  def test_i_can_properly_show_path(self, element, expected_path):
+    def _construct_test_element(source, tail):
+      res = MyFT(source.tag, source.attrs)
+      if source.children:
+        res.children = [_construct_test_element(child, tail) for child in source.children]
+      else:
+        res.children = [tail]
+      return res
+    
+    with pytest.raises(AssertionError) as exc_info:
+      actual = _construct_test_element(element, "Actual")
+      expected = _construct_test_element(element, "Expected")
+      matches(actual, expected)
+    
+    assert expected_path in str(exc_info.value)
 
 
-def test_i_can_output_error_path():
-  elt = Div()
-  expected = Div()
-  path = "div#div_id.div.span[class=span_class].p[name=p_name].div"
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "id"="div_id" ...',
-                                 '  (div ...',
-                                 '    (span "class"="span_class" ...',
-                                 '      (p "name"="p_name" ...',
-                                 '        (div )']
+class TestErrorOutput:
+  def test_i_can_output_error_path(self):
+    """The output follows the representation of the given path"""
+    elt = Div()
+    expected = Div()
+    path = "div#div_id.div.span[class=span_class].p[name=p_name].div"
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "id"="div_id" ...',
+                                   '  (div ...',
+                                   '    (span "class"="span_class" ...',
+                                   '      (p "name"="p_name" ...',
+                                   '        (div )']
+  
+  def test_i_can_output_error_attribute(self):
+    elt = Div(attr1="value1", attr2="value2")
+    expected = elt
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "attr1"="value1" "attr2"="value2")']
+  
+  def test_i_can_output_error_attribute_missing_1(self):
+    elt = Div(attr2="value2")
+    expected = Div(attr1="value1", attr2="value2")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "attr1"="** MISSING **" "attr2"="value2")',
+                                   '     ^^^^^^^^^^^^^^^^^^^^^^^                 ']
+  
+  def test_i_can_output_error_attribute_missing_2(self):
+    elt = Div(attr1="value1")
+    expected = Div(attr1="value1", attr2="value2")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "attr1"="value1" "attr2"="** MISSING **")',
+                                   '                      ^^^^^^^^^^^^^^^^^^^^^^^']
+  
+  def test_i_can_output_error_attribute_wrong_value(self):
+    elt = Div(attr1="value3", attr2="value2")
+    expected = Div(attr1="value1", attr2="value2")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "attr1"="value3" "attr2"="value2")',
+                                   '     ^^^^^^^^^^^^^^^^                 ']
+  
+  def test_i_can_output_error_constant(self):
+    elt = 123
+    expected = elt
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['123']
+  
+  def test_i_can_output_error_constant_wrong_value(self):
+    elt = 123
+    expected = 456
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['123',
+                                   '^^^']
+  
+  def test_i_can_output_error_when_predicate(self):
+    elt = "before value after"
+    expected = Contains("value")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ["before value after"]
+  
+  def test_i_can_output_error_when_predicate_wrong_value(self):
+    """I can display error when the condition predicate is not satisfied."""
+    elt = "before after"
+    expected = Contains("value")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ["before after",
+                                   "^^^^^^^^^^^^"]
+  
+  def test_i_can_output_error_child_element(self):
+    """I can display error when the element has children"""
+    elt = Div(P(id="p_id"), Div(id="child_1"), Div(id="child_2"), attr1="value1")
+    expected = elt
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "attr1"="value1"',
+                                   '  (p "id"="p_id")',
+                                   '  (div "id"="child_1")',
+                                   '  (div "id"="child_2")',
+                                   ')',
+                                   ]
+  
+  def test_i_can_output_error_child_element_text(self):
+    """I can display error when the children is not a FT"""
+    elt = Div("Hello world", Div(id="child_1"), Div(id="child_2"), attr1="value1")
+    expected = elt
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "attr1"="value1"',
+                                   '  "Hello world"',
+                                   '  (div "id"="child_1")',
+                                   '  (div "id"="child_2")',
+                                   ')',
+                                   ]
+  
+  def test_i_can_output_error_child_element_indicating_sub_children(self):
+    elt = Div(P(id="p_id"), Div(Div(id="child_2"), id="child_1"), attr1="value1")
+    expected = elt
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "attr1"="value1"',
+                                   '  (p "id"="p_id")',
+                                   '  (div "id"="child_1" ...)',
+                                   ')',
+                                   ]
+  
+  def test_i_can_output_error_child_element_wrong_value(self):
+    elt = Div(P(id="p_id"), Div(id="child_2"), attr1="value1")
+    expected = Div(P(id="p_id"), Div(id="child_1"), attr1="value1")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "attr1"="value1"',
+                                   '  (p "id"="p_id")',
+                                   '  (div "id"="child_2")',
+                                   '       ^^^^^^^^^^^^^^',
+                                   ')',
+                                   ]
+  
+  def test_i_can_output_error_fewer_elements(self):
+    elt = Div(P(id="p_id"), attr1="value1")
+    expected = Div(P(id="p_id"), Div(id="child_1"), attr1="value1")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(div "attr1"="value1"',
+                                   '  (p "id"="p_id")',
+                                   '  ! ** MISSING ** !',
+                                   ')',
+                                   ]
+  
+  def test_i_can_output_error_test_object(self):
+    elt = TestObject(Dummy, attr1=123, attr2="value2")
+    expected = elt
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == ['(Dummy "attr1"="123" "attr2"="value2")']
+  
+  def test_i_can_output_error_test_object_wrong_type(self):
+    elt = Div(attr1=123, attr2="value2")
+    expected = TestObject(Dummy, attr1=123, attr2="value2")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == [
+        '(div "attr1"="123" "attr2"="value2")',
+        ' ^^^                               '
+    ]
+  
+  def test_i_can_output_error_test_object_wrong_type_2(self):
+    elt = Dummy2(attr1=123, attr2="value2")
+    expected = TestObject(Dummy, attr1=123, attr2="value2")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == [
+        '(Dummy2 "attr1"="123" "attr2"="value2")',
+        ' ^^^^^^                               '
+    ]
+  
+  def test_i_can_output_error_test_object_wrong_type_3(self):
+    elt = Div(attr1=123, attr2="value2")
+    expected = TestObject("Dummy", attr1=123, attr2="value2")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == [
+        '(div "attr1"="123" "attr2"="value2")',
+        ' ^^^                               '
+    ]
+  
+  def test_i_can_output_error_test_object_wrong_value(self):
+    elt = Dummy(attr1="456", attr2="value2")
+    expected = TestObject(Dummy, attr1="123", attr2="value2")
+    path = ""
+    error_output = ErrorOutput(path, elt, expected)
+    error_output.compute()
+    assert error_output.output == [
+        '(Dummy "attr1"="456" "attr2"="value2")',
+        '       ^^^^^^^^^^^^^                 '
+    ]
 
 
-def test_i_can_output_error_attribute():
-  elt = Div(attr1="value1", attr2="value2")
-  expected = elt
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "attr1"="value1" "attr2"="value2")']
+class TestErrorComparisonOutput:
+  def test_i_can_output_comparison(self):
+    actual = Div(P(id="p_id"), attr1="value1")
+    expected = actual
+    actual_out = ErrorOutput("", actual, expected)
+    expected_out = ErrorOutput("", expected, expected)
     
+    comparison_out = ErrorComparisonOutput(actual_out, expected_out)
     
-def test_i_can_output_error_attribute_missing_1():
-  elt = Div(attr2="value2")
-  expected = Div(attr1="value1", attr2="value2")
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "attr1"="** MISSING **" "attr2"="value2")',
-                                 '     ^^^^^^^^^^^^^^^^^^^^^^^                 ']
+    res = comparison_out.render()
     
-
-def test_i_can_output_error_attribute_missing_2():
-  elt = Div(attr1="value1")
-  expected = Div(attr1="value1", attr2="value2")
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "attr1"="value1" "attr2"="** MISSING **")',
-                                 '                      ^^^^^^^^^^^^^^^^^^^^^^^']
-
-
-def test_i_can_output_error_attribute_wrong_value():
-  elt = Div(attr1="value3", attr2="value2")
-  expected = Div(attr1="value1", attr2="value2")
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "attr1"="value3" "attr2"="value2")',
-                                 '     ^^^^^^^^^^^^^^^^                 ']
-
-
-def test_i_can_output_error_constant():
-  elt = 123
-  expected = elt
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['123']
-
-
-def test_i_can_output_error_constant_wrong_value():
-  elt = 123
-  expected = 456
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['123',
-                                 '^^^']
-
-
-def test_i_can_output_error_when_predicate():
-  elt = "before value after"
-  expected = Contains("value")
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ["before value after"]
-
-
-def test_i_can_output_error_when_predicate_wrong_value():
-  """I can display error when the condition predicate is not satisfied."""
-  elt = "before after"
-  expected = Contains("value")
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ["before after",
-                                 "^^^^^^^^^^^^"]
-
-
-def test_i_can_output_error_child_element():
-  """I can display error when the element has children"""
-  elt = Div(P(id="p_id"), Div(id="child_1"), Div(id="child_2"), attr1="value1")
-  expected = elt
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "attr1"="value1"',
-                                 '  (p "id"="p_id")',
-                                 '  (div "id"="child_1")',
-                                 '  (div "id"="child_2")',
-                                 ')',
-                                 ]
-
-
-def test_i_can_output_error_child_element_text():
-  """I can display error when the children is not a FT"""
-  elt = Div("Hello world", Div(id="child_1"), Div(id="child_2"), attr1="value1")
-  expected = elt
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "attr1"="value1"',
-                                 '  "Hello world"',
-                                 '  (div "id"="child_1")',
-                                 '  (div "id"="child_2")',
-                                 ')',
-                                 ]
-
-
-def test_i_can_output_error_child_element_indicating_sub_children():
-  elt = Div(P(id="p_id"), Div(Div(id="child_2"), id="child_1"), attr1="value1")
-  expected = elt
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "attr1"="value1"',
-                                 '  (p "id"="p_id")',
-                                 '  (div "id"="child_1" ...)',
-                                 ')',
-                                 ]
-
-
-def test_i_can_output_error_child_element_wrong_value():
-  elt = Div(P(id="p_id"), Div(id="child_2"), attr1="value1")
-  expected = Div(P(id="p_id"), Div(id="child_1"), attr1="value1")
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "attr1"="value1"',
-                                 '  (p "id"="p_id")',
-                                 '  (div "id"="child_2")',
-                                 '       ^^^^^^^^^^^^^^',
-                                 ')',
-                                 ]
-
-
-def test_i_can_output_error_fewer_elements():
-  elt = Div(P(id="p_id"), attr1="value1")
-  expected = Div(P(id="p_id"), Div(id="child_1"), attr1="value1")
-  path = ""
-  error_output = ErrorOutput(path, elt, expected)
-  error_output.compute()
-  assert error_output.output == ['(div "attr1"="value1"',
-                                 '  (p "id"="p_id")',
-                                 '  ! ** MISSING ** !',
-                                 ')',
-                                 ]
-
-
-def test_i_can_output_comparison():
-  actual = Div(P(id="p_id"), attr1="value1")
-  expected = actual
-  actual_out = ErrorOutput("", actual, expected)
-  expected_out = ErrorOutput("", expected, expected)
-  
-  comparison_out = ErrorComparisonOutput(actual_out, expected_out)
-  
-  res = comparison_out.render()
-  
-  assert "\n" + res == '''
+    assert "\n" + res == '''
 (div "attr1"="value1" | (div "attr1"="value1"
   (p "id"="p_id")     |   (p "id"="p_id")
 )                     | )'''
   
+  def test_i_can_output_comparison_with_path(self):
+    actual = Div(P(id="p_id"), attr1="value1")
+    expected = actual
+    actual_out = ErrorOutput("div#div_id.span[class=cls].div", actual, expected)
+    expected_out = ErrorOutput("div#div_id.span[class=cls].div", expected, expected)
     
-def test_i_can_output_comparison_with_path():
-  actual = Div(P(id="p_id"), attr1="value1")
-  expected = actual
-  actual_out = ErrorOutput("div#div_id.span[class=cls].div", actual, expected)
-  expected_out = ErrorOutput("div#div_id.span[class=cls].div", expected, expected)
+    comparison_out = ErrorComparisonOutput(actual_out, expected_out)
     
-  comparison_out = ErrorComparisonOutput(actual_out, expected_out)
+    res = comparison_out.render()
     
-  res = comparison_out.render()
-  
-  assert "\n" + res == '''
+    assert "\n" + res == '''
 (div "id"="div_id" ...    | (div "id"="div_id" ...
   (span "class"="cls" ... |   (span "class"="cls" ...
     (div "attr1"="value1" |     (div "attr1"="value1"
       (p "id"="p_id")     |       (p "id"="p_id")
     )                     |     )'''
   
+  def test_i_can_output_comparison_when_missing_attributes(self):
+    actual = Div(P(id="p_id"), attr1="value1")
+    expected = Div(P(id="p_id"), attr2="value1")
+    actual_out = ErrorOutput("", actual, expected)
+    expected_out = ErrorOutput("", expected, expected)
     
-def test_i_can_output_comparison_when_missing_attributes():
-  actual = Div(P(id="p_id"), attr1="value1")
-  expected = Div(P(id="p_id"), attr2="value1")
-  actual_out = ErrorOutput("", actual, expected)
-  expected_out = ErrorOutput("", expected, expected)
+    comparison_out = ErrorComparisonOutput(actual_out, expected_out)
     
-  comparison_out = ErrorComparisonOutput(actual_out, expected_out)
+    res = comparison_out.render()
     
-  res = comparison_out.render()
-  
-  assert "\n" + res == '''
+    assert "\n" + res == '''
 (div "attr2"="** MISSING **" | (div "attr2"="value1"
      ^^^^^^^^^^^^^^^^^^^^^^^ |
   (p "id"="p_id")            |   (p "id"="p_id")
 )                            | )'''
   
+  def test_i_can_output_comparison_when_wrong_attributes(self):
+    actual = Div(P(id="p_id"), attr1="value2")
+    expected = Div(P(id="p_id"), attr1="value1")
+    actual_out = ErrorOutput("", actual, expected)
+    expected_out = ErrorOutput("", expected, expected)
     
-def test_i_can_output_comparison_when_wrong_attributes():
-  actual = Div(P(id="p_id"), attr1="value2")
-  expected = Div(P(id="p_id"), attr1="value1")
-  actual_out = ErrorOutput("", actual, expected)
-  expected_out = ErrorOutput("", expected, expected)
+    comparison_out = ErrorComparisonOutput(actual_out, expected_out)
     
-  comparison_out = ErrorComparisonOutput(actual_out, expected_out)
+    res = comparison_out.render()
     
-  res = comparison_out.render()
-  
-  assert "\n" + res == '''
+    assert "\n" + res == '''
 (div "attr1"="value2" | (div "attr1"="value1"
      ^^^^^^^^^^^^^^^^ |
   (p "id"="p_id")     |   (p "id"="p_id")
 )                     | )'''
   
+  def test_i_can_output_comparison_when_fewer_elements(self):
+    actual = Div(P(id="p_id"), attr1="value1")
+    expected = Div(Span(id="s_id"), P(id="p_id"), attr1="value1")
+    actual_out = ErrorOutput("", actual, expected)
+    expected_out = ErrorOutput("", expected, expected)
     
-def test_i_can_output_comparison_when_fewer_elements():
-  actual = Div(P(id="p_id"), attr1="value1")
-  expected = Div(Span(id="s_id"), P(id="p_id"), attr1="value1")
-  actual_out = ErrorOutput("", actual, expected)
-  expected_out = ErrorOutput("", expected, expected)
+    comparison_out = ErrorComparisonOutput(actual_out, expected_out)
     
-  comparison_out = ErrorComparisonOutput(actual_out, expected_out)
+    res = comparison_out.render()
     
-  res = comparison_out.render()
-  
-  assert "\n" + res == '''
+    assert "\n" + res == '''
 (div "attr1"="value1" | (div "attr1"="value1"
   (p "id"="p_id")     |   (span "id"="s_id")
    ^ ^^^^^^^^^^^      |
   ! ** MISSING ** !   |   (p "id"="p_id")
 )                     | )'''
   
+  def test_i_can_see_the_diff_when_matching(self):
+    actual = Div(attr1="value1")
+    expected = Div(attr1=Contains("value2"))
     
-def test_i_can_see_the_diff_when_matching():
-  actual = Div(attr1="value1")
-  expected = Div(attr1=Contains("value2"))
+    with pytest.raises(AssertionError) as exc_info:
+      matches(actual, expected)
     
-  with pytest.raises(AssertionError) as exc_info:
-    matches(actual, expected)
-  
-  debug_output = str(exc_info.value)
-  assert "\n" + debug_output == """
+    debug_output = str(exc_info.value)
+    assert "\n" + debug_output == """
 Path  : 'div'
 Error : The condition 'Contains(value2)' is not satisfied.
 (div "attr1"="value1") | (div "attr1"="Contains(value2)")
      ^^^^^^^^^^^^^^^^  |"""
+  
+  def test_i_can_see_the_diff_with_test_object_when_wrong_type(self):
+    actual = Div(attr1=123, attr2="value2")
+    expected = TestObject(Dummy, attr1=123, attr2="value2")
+    
+    actual_out = ErrorOutput("dummy", actual, expected)
+    expected_out = ErrorOutput("div", expected, expected)
+    
+    comparison_out = ErrorComparisonOutput(actual_out, expected_out)
+    
+    res = comparison_out.render()
+    
+    assert "\n" + res == '''
+(div "attr1"="123" "attr2"="value2") | (Dummy "attr1"="123" "attr2"="value2")
+ ^^^                                 |'''