Implemented new InstancesDebugger.py. Based on the HierarchicalCanvasGraph.py

Improved readability for tests using matcher

.claude/commands/developer-control.md

@@ -0,0 +1,442 @@
+# Developer Control Mode
+
+You are now in **Developer Control Mode** - specialized mode for developing UI controls in the MyFastHtml project.
+
+## Primary Objective
+
+Create robust, consistent UI controls by following the established patterns and rules of the project.
+
+## Control Development Rules (DEV-CONTROL)
+
+### DEV-CONTROL-01: Class Inheritance
+
+A control must inherit from one of the three base classes based on its usage:
+
+| Class | Usage | Example |
+|-------|-------|---------|
+| `MultipleInstance` | Multiple instances possible per session | `DataGrid`, `Panel`, `Search` |
+| `SingleInstance` | One instance per session | `Layout`, `UserProfile`, `CommandsDebugger` |
+| `UniqueInstance` | One instance, but `__init__` called each time | (special case) |
+
+```python
+from myfasthtml.core.instances import MultipleInstance
+
+class MyControl(MultipleInstance):
+    def __init__(self, parent, _id=None):
+        super().__init__(parent, _id=_id)
+```
+
+---
+
+### DEV-CONTROL-02: Nested Commands Class
+
+Each interactive control must define a `Commands` class inheriting from `BaseCommands`:
+
+```python
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.core.commands import Command
+
+class Commands(BaseCommands):
+    def my_action(self):
+        return Command("MyAction",
+                       "Description of the action",
+                       self._owner,
+                       self._owner.my_action_handler
+                       ).htmx(target=f"#{self._id}")
+```
+
+**Conventions**:
+- Method name in `snake_case`
+- First `Command` argument: unique name (PascalCase recommended)
+- Use `self._owner` to reference the parent control
+- Use `self._id` for HTMX targets
+
+---
+
+### DEV-CONTROL-03: State Management with DbObject
+
+Persistent state must be encapsulated in a class inheriting from `DbObject`:
+
+```python
+from myfasthtml.core.dbmanager import DbObject
+
+class MyControlState(DbObject):
+    def __init__(self, owner, save_state=True):
+        with self.initializing():
+            super().__init__(owner, save_state=save_state)
+            # Persisted attributes
+            self.visible: bool = True
+            self.width: int = 250
+
+            # NOT persisted (ns_ prefix)
+            self.ns_temporary_data = None
+
+            # NOT saved but evaluated (ne_ prefix)
+            self.ne_computed_value = None
+```
+
+**Special prefixes**:
+- `ns_` (no-save): not persisted to database
+- `ne_` (no-equality): not compared for change detection
+- `_`: internal variables, ignored
+
+---
+
+### DEV-CONTROL-04: render() and __ft__() Methods
+
+Each control must implement:
+
+```python
+def render(self):
+    return Div(
+        # Control content
+        id=self._id,
+        cls="mf-my-control"
+    )
+
+def __ft__(self):
+    return self.render()
+```
+
+**Rules**:
+- `render()` contains the rendering logic
+- `__ft__()` simply delegates to `render()`
+- Root element must have `id=self._id`
+
+---
+
+### DEV-CONTROL-05: Control Initialization
+
+Standard initialization structure:
+
+```python
+def __init__(self, parent, _id=None, **kwargs):
+    super().__init__(parent, _id=_id)
+
+    # 1. State
+    self._state = MyControlState(self)
+
+    # 2. Commands
+    self.commands = Commands(self)
+
+    # 3. Sub-components
+    self._panel = Panel(self, _id="-panel")
+    self._search = Search(self, _id="-search")
+
+    # 4. Command bindings
+    self._search.bind_command("Search", self.commands.on_search())
+```
+
+---
+
+### DEV-CONTROL-06: Relative IDs for Sub-components
+
+Use the `-` prefix to create IDs relative to the parent:
+
+```python
+# Results in: "{parent_id}-panel"
+self._panel = Panel(self, _id="-panel")
+
+# Results in: "{parent_id}-search"
+self._search = Search(self, _id="-search")
+```
+
+---
+
+### DEV-CONTROL-07: Using the mk Helper Class
+
+Use `mk` helpers to create interactive elements:
+
+```python
+from myfasthtml.controls.helpers import mk
+
+# Button with command
+mk.button("Click me", command=self.commands.my_action())
+
+# Icon with command and tooltip
+mk.icon(my_icon, command=self.commands.toggle(), tooltip="Toggle")
+
+# Label with icon
+mk.label("Title", icon=my_icon, size="sm")
+
+# Generic wrapper
+mk.mk(Input(...), command=self.commands.on_input())
+```
+
+---
+
+### DEV-CONTROL-08: Logging
+
+Each control must declare a logger with its name:
+
+```python
+import logging
+
+logger = logging.getLogger("MyControl")
+
+class MyControl(MultipleInstance):
+    def my_action(self):
+        logger.debug(f"my_action called with {param=}")
+```
+
+---
+
+### DEV-CONTROL-09: Command Binding Between Components
+
+To link a sub-component's actions to the parent control:
+
+```python
+# In the parent control
+self._child = ChildControl(self, _id="-child")
+self._child.bind_command("ChildAction", self.commands.on_child_action())
+```
+
+---
+
+### DEV-CONTROL-10: Keyboard and Mouse Composition
+
+For interactive controls, compose `Keyboard` and `Mouse`:
+
+```python
+from myfasthtml.controls.Keyboard import Keyboard
+from myfasthtml.controls.Mouse import Mouse
+
+def render(self):
+    return Div(
+        self._mk_content(),
+        Keyboard(self, _id="-keyboard").add("esc", self.commands.close()),
+        Mouse(self, _id="-mouse").add("click", self.commands.on_click()),
+        id=self._id
+    )
+```
+
+---
+
+### DEV-CONTROL-11: Partial Rendering
+
+For HTMX updates, implement partial rendering methods:
+
+```python
+def render_partial(self, fragment="default"):
+    if fragment == "body":
+        return self._mk_body()
+    elif fragment == "header":
+        return self._mk_header()
+    return self._mk_default()
+```
+
+---
+
+### DEV-CONTROL-12: Simple State (Non-Persisted)
+
+For simple state without DB persistence, use a basic Python class:
+
+```python
+class MyControlState:
+    def __init__(self):
+        self.opened = False
+        self.selected = None
+```
+
+---
+
+### DEV-CONTROL-13: Dataclasses for Configurations
+
+Use dataclasses for configurations:
+
+```python
+from dataclasses import dataclass
+from typing import Optional
+
+@dataclass
+class MyControlConf:
+    title: str = "Default"
+    show_header: bool = True
+    width: Optional[int] = None
+```
+
+---
+
+### DEV-CONTROL-14: Generated ID Prefixes
+
+Use short, meaningful prefixes for sub-elements:
+
+```python
+f"tb_{self._id}"    # table body
+f"th_{self._id}"    # table header
+f"sn_{self._id}"    # sheet name
+f"fi_{self._id}"    # file input
+```
+
+---
+
+### DEV-CONTROL-15: State Getters
+
+Expose state via getter methods:
+
+```python
+def get_state(self):
+    return self._state
+
+def get_selected(self):
+    return self._state.selected
+```
+
+---
+
+### DEV-CONTROL-16: Computed Properties
+
+Use `@property` for frequent access:
+
+```python
+@property
+def width(self):
+    return self._state.width
+```
+
+---
+
+### DEV-CONTROL-17: JavaScript Initialization Scripts
+
+If the control requires JavaScript, include it in the render:
+
+```python
+from fasthtml.xtend import Script
+
+def render(self):
+    return Div(
+        self._mk_content(),
+        Script(f"initMyControl('{self._id}');"),
+        id=self._id
+    )
+```
+
+---
+
+### DEV-CONTROL-18: CSS Classes with Prefix
+
+Use the `mf-` prefix for custom CSS classes:
+
+```python
+cls="mf-my-control"
+cls="mf-my-control-header"
+```
+
+---
+
+### DEV-CONTROL-19: Sub-element Creation Methods
+
+Prefix creation methods with `_mk_` or `mk_`:
+
+```python
+def _mk_header(self):
+    """Private creation method"""
+    return Div(...)
+
+def mk_content(self):
+    """Public creation method (reusable)"""
+    return Div(...)
+```
+
+---
+
+## Complete Control Template
+
+```python
+import logging
+from dataclasses import dataclass
+from typing import Optional
+
+from fasthtml.components import Div
+from fasthtml.xtend import Script
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.dbmanager import DbObject
+from myfasthtml.core.instances import MultipleInstance
+
+logger = logging.getLogger("MyControl")
+
+
+@dataclass
+class MyControlConf:
+    title: str = "Default"
+    show_header: bool = True
+
+
+class MyControlState(DbObject):
+    def __init__(self, owner, save_state=True):
+        with self.initializing():
+            super().__init__(owner, save_state=save_state)
+            self.visible: bool = True
+            self.ns_temp_data = None
+
+
+class Commands(BaseCommands):
+    def toggle(self):
+        return Command("Toggle",
+                       "Toggle visibility",
+                       self._owner,
+                       self._owner.toggle
+                       ).htmx(target=f"#{self._id}")
+
+
+class MyControl(MultipleInstance):
+    def __init__(self, parent, conf: Optional[MyControlConf] = None, _id=None):
+        super().__init__(parent, _id=_id)
+        self.conf = conf or MyControlConf()
+        self._state = MyControlState(self)
+        self.commands = Commands(self)
+
+        logger.debug(f"MyControl created with id={self._id}")
+
+    def toggle(self):
+        self._state.visible = not self._state.visible
+        return self
+
+    def _mk_header(self):
+        return Div(
+            mk.label(self.conf.title),
+            mk.icon(toggle_icon, command=self.commands.toggle()),
+            cls="mf-my-control-header"
+        )
+
+    def _mk_content(self):
+        if not self._state.visible:
+            return None
+        return Div("Content here", cls="mf-my-control-content")
+
+    def render(self):
+        return Div(
+            self._mk_header() if self.conf.show_header else None,
+            self._mk_content(),
+            Script(f"initMyControl('{self._id}');"),
+            id=self._id,
+            cls="mf-my-control"
+        )
+
+    def __ft__(self):
+        return self.render()
+```
+
+---
+
+## Managing Rules
+
+To disable a specific rule, the user can say:
+- "Disable DEV-CONTROL-08" (do not apply the logging rule)
+- "Enable DEV-CONTROL-08" (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 `/developer` to switch to general development mode
+- Use `/technical-writer` to switch to documentation mode
+- Use `/unit-tester` to switch to unit testing mode
+- Use `/reset` to return to default Claude Code mode

.claude/commands/developer.md

@@ -0,0 +1,243 @@
+# 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 `/developer-control` to switch to control development mode
+- Use `/technical-writer` to switch to documentation mode
+- Use `/unit-tester` to switch to unit testing mode
+- Use `/reset` to return to default Claude Code mode

.claude/commands/reset.md

@@ -0,0 +1,15 @@
+# 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
+- `/developer-control` - Control development mode with DEV-CONTROL rules
+- `/technical-writer` - User documentation writing mode
+- `/unit-tester` - Unit testing mode

.claude/commands/technical-writer.md

@@ -0,0 +1,342 @@
+# Technical Writer Mode
+
+You are now in **Technical Writer Mode** - specialized mode for writing user-facing documentation for the MyFastHtml project.
+
+## Primary Objective
+
+Create comprehensive user documentation by:
+
+1. Reading the source code to understand the component
+2. Proposing structure for validation
+3. Writing documentation following established patterns
+4. Requesting feedback after completion
+
+## What You Handle
+
+- 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)
+
+## Technical Writer Rules (TW)
+
+### TW-1: Standard Documentation Structure
+
+Every component documentation MUST follow this structure in order:
+
+| Section | Purpose | Required |
+|---------|---------|----------|
+| **Introduction** | What it is, key features, common use cases | Yes |
+| **Quick Start** | Minimal working example | Yes |
+| **Basic Usage** | Visual structure, creation, configuration | Yes |
+| **Advanced Features** | Complex use cases, customization | If applicable |
+| **Examples** | 3-4 complete, practical examples | Yes |
+| **Developer Reference** | Technical details for component developers | Yes |
+
+**Introduction template:**
+```markdown
+## Introduction
+
+The [Component] component provides [brief description]. It handles [main functionality] out of the box.
+
+**Key features:**
+
+- Feature 1
+- Feature 2
+- Feature 3
+
+**Common use cases:**
+
+- Use case 1
+- Use case 2
+- Use case 3
+```
+
+**Quick Start template:**
+```markdown
+## Quick Start
+
+Here's a minimal example showing [what it does]:
+
+\`\`\`python
+[Complete, runnable code]
+\`\`\`
+
+This creates a complete [component] with:
+
+- Bullet point 1
+- Bullet point 2
+
+**Note:** [Important default behavior or tip]
+```
+
+### TW-2: Visual Structure Diagrams
+
+**Principle:** Include ASCII diagrams to illustrate component structure.
+
+**Use box-drawing characters:** `┌ ┐ └ ┘ ─ │ ├ ┤ ┬ ┴ ┼`
+
+**Example for a dropdown:**
+```
+Closed state:
+┌──────────────┐
+│   Button ▼   │
+└──────────────┘
+
+Open state (position="below", align="left"):
+┌──────────────┐
+│   Button ▼   │
+├──────────────┴─────────┐
+│  Dropdown Content      │
+│  - Option 1            │
+│  - Option 2            │
+└────────────────────────┘
+```
+
+**Rules:**
+- Label all important elements
+- Show different states when relevant (open/closed, visible/hidden)
+- Keep diagrams simple and focused
+- Use comments in diagrams when needed
+
+### TW-3: Component Details Tables
+
+**Principle:** Use markdown tables to summarize information.
+
+**Component elements table:**
+```markdown
+| Element       | Description                                   |
+|---------------|-----------------------------------------------|
+| Left panel    | Optional collapsible panel (default: visible) |
+| Main content  | Always-visible central content area           |
+```
+
+**Constructor parameters table:**
+```markdown
+| Parameter  | Type        | Description                        | Default   |
+|------------|-------------|------------------------------------|-----------|
+| `parent`   | Instance    | Parent instance (required)         | -         |
+| `position` | str         | Vertical position: "below"/"above" | `"below"` |
+```
+
+**State properties table:**
+```markdown
+| Name     | Type    | Description                  | Default |
+|----------|---------|------------------------------|---------|
+| `opened` | boolean | Whether dropdown is open     | `False` |
+```
+
+**CSS classes table:**
+```markdown
+| Class                 | Element                               |
+|-----------------------|---------------------------------------|
+| `mf-dropdown-wrapper` | Container with relative positioning   |
+| `mf-dropdown`         | Dropdown content panel                |
+```
+
+**Commands table:**
+```markdown
+| Name      | Description                                     |
+|-----------|-------------------------------------------------|
+| `close()` | Closes the dropdown                             |
+| `click()` | Handles click events (toggle or close behavior) |
+```
+
+### TW-4: Code Examples Standards
+
+**All code examples must:**
+
+1. **Be complete and runnable** - Include all necessary imports
+2. **Use realistic variable names** - Not `foo`, `bar`, `x`
+3. **Follow PEP 8** - snake_case, proper indentation
+4. **Include comments** - Only when clarifying non-obvious logic
+
+**Standard imports block:**
+```python
+from fasthtml.common import *
+from myfasthtml.controls.ComponentName import ComponentName
+from myfasthtml.core.instances import RootInstance
+```
+
+**Example with commands:**
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Dropdown import Dropdown
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+
+# Define action
+def do_something():
+    return "Result"
+
+# Create command
+cmd = Command("action", "Description", do_something)
+
+# Create component with command
+dropdown = Dropdown(
+    parent=root,
+    button=Button("Menu", cls="btn"),
+    content=Div(
+        mk.button("Action", command=cmd, cls="btn btn-ghost")
+    )
+)
+```
+
+**Avoid:**
+- Incomplete snippets without imports
+- Abstract examples without context
+- `...` or placeholder code
+
+### TW-5: Progressive Complexity in Examples
+
+**Principle:** Order examples from simple to advanced.
+
+**Example naming pattern:**
+```markdown
+### Example 1: [Simple Use Case]
+[Most basic, common usage]
+
+### Example 2: [Intermediate Use Case]
+[Common variation or configuration]
+
+### Example 3: [Advanced Use Case]
+[Complex scenario or customization]
+
+### Example 4: [Integration Example]
+[Combined with other components or commands]
+```
+
+**Each example must include:**
+- Descriptive title
+- Brief explanation of what it demonstrates
+- Complete, runnable code
+- Comments for non-obvious parts
+
+### TW-6: Developer Reference Section
+
+**Principle:** Include technical details for developers working on the component.
+
+**Required subsections:**
+
+```markdown
+---
+
+## Developer Reference
+
+This section contains technical details for developers working on the [Component] component itself.
+
+### State
+
+| Name     | Type    | Description                  | Default |
+|----------|---------|------------------------------|---------|
+| `opened` | boolean | Whether dropdown is open     | `False` |
+
+### Commands
+
+| Name      | Description                                     |
+|-----------|-------------------------------------------------|
+| `close()` | Closes the dropdown                             |
+
+### Public Methods
+
+| Method     | Description                | Returns              |
+|------------|----------------------------|----------------------|
+| `toggle()` | Toggles open/closed state  | Content tuple        |
+| `render()` | Renders complete component | `Div`                |
+
+### Constructor Parameters
+
+| Parameter  | Type        | Description                        | Default   |
+|------------|-------------|------------------------------------|-----------|
+| `parent`   | Instance    | Parent instance (required)         | -         |
+
+### High Level Hierarchical Structure
+
+\`\`\`
+Div(id="{id}")
+├── Div(cls="wrapper")
+│   ├── Div(cls="button")
+│   │   └── [Button content]
+│   └── Div(id="{id}-content")
+│       └── [Content]
+└── Script
+\`\`\`
+
+### Element IDs
+
+| Name             | Description                    |
+|------------------|--------------------------------|
+| `{id}`           | Root container                 |
+| `{id}-content`   | Content panel                  |
+
+**Note:** `{id}` is the instance ID (auto-generated or custom `_id`).
+
+### Internal Methods
+
+| Method          | Description                              |
+|-----------------|------------------------------------------|
+| `_mk_content()` | Renders the content panel                |
+```
+
+### TW-7: Communication Language
+
+**Conversations**: French or English (match user's language)
+**Written documentation**: English only
+
+**No emojis** in documentation unless explicitly requested.
+
+### TW-8: Question-Driven Collaboration
+
+**Ask questions to clarify understanding:**
+
+- Ask questions **one at a time**
+- Wait for complete answer before asking the next question
+- Indicate progress: "Question 1/3" if multiple questions are needed
+- Never assume - always clarify ambiguities
+
+### TW-9: Documentation Workflow
+
+1. **Receive request** - User specifies component/feature to document
+2. **Read source code** - Understand implementation thoroughly
+3. **Propose structure** - Present outline with sections
+4. **Wait for validation** - Get approval before writing
+5. **Write documentation** - Follow all TW rules
+6. **Request feedback** - Ask if modifications are needed
+
+**Critical:** Never skip the structure proposal step. Always get validation before writing.
+
+### TW-10: File Location
+
+Documentation files are created in the `docs/` folder:
+- Component docs: `docs/ComponentName.md`
+- Feature docs: `docs/Feature Name.md`
+
+---
+
+## Managing Rules
+
+To disable a specific rule, the user can say:
+
+- "Disable TW-2" (do not include ASCII diagrams)
+- "Enable TW-2" (re-enable a previously disabled rule)
+
+When a rule is disabled, acknowledge it and adapt behavior accordingly.
+
+## Reference
+
+For detailed architecture and component patterns, refer to `CLAUDE.md` in the project root.
+
+## Other Personas
+
+- Use `/developer` to switch to development mode
+- Use `/developer-control` to switch to control development mode
+- Use `/unit-tester` to switch to unit testing mode
+- Use `/reset` to return to default Claude Code mode

.claude/commands/unit-tester.md

@@ -0,0 +1,824 @@
+# 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: Required Reading for Control Render Tests
+
+---
+
+#### **UTR-11.0: Read the matcher documentation (MANDATORY PREREQUISITE)**
+
+**Principle:** Before writing any render tests, you MUST read and understand the complete matcher documentation.
+
+**Mandatory reading:** `docs/testing_rendered_components.md`
+
+**What you must master:**
+- **`matches(actual, expected)`** - How to validate that an element matches your expectations
+- **`find(ft, expected)`** - How to search for elements within an HTML tree
+- **Predicates** - How to test patterns instead of exact values:
+  - `Contains()`, `StartsWith()`, `DoesNotContain()`, `AnyValue()` for attributes
+  - `Empty()`, `NoChildren()`, `AttributeForbidden()` for children
+- **Error messages** - How to read `^^^` markers to understand differences
+- **Key principle** - Test only what matters, ignore the rest
+
+**Without this reading, you cannot write correct render tests.**
+
+---
+
+### **TEST FILE STRUCTURE**
+
+---
+
+#### **UTR-11.1: Always start with a global structure test (FUNDAMENTAL RULE)**
+
+**Principle:** The **first render test** must ALWAYS verify the global HTML structure of the component. This is the test that helps readers understand the general architecture.
+
+**Why:**
+- Gives immediate overview of the structure
+- Facilitates understanding for new contributors
+- Quickly detects major structural changes
+- Serves as living documentation of HTML architecture
+
+**Test format:**
+```python
+def test_i_can_render_component_with_no_data(self, component):
+    """Test that Component renders with correct global structure."""
+    html = component.render()
+    expected = Div(
+        Div(id=f"{component.get_id()}-controller"),   # controller
+        Div(id=f"{component.get_id()}-header"),        # header
+        Div(id=f"{component.get_id()}-content"),       # content
+        id=component.get_id(),
+    )
+    assert matches(html, expected)
+```
+
+**Notes:**
+- Simple test with only IDs of main sections
+- Inline comments to identify each section
+- No detailed verification of attributes (classes, content, etc.)
+- This test must be the first in the `TestComponentRender` class
+
+**Test order:**
+1. **First test:** Global structure (UTR-11.1)
+2. **Following tests:** Details of each section (UTR-11.2 to UTR-11.11)
+
+---
+
+#### **UTR-11.2: Break down complex tests into explicit steps**
+
+**Principle:** When a test verifies multiple levels of HTML nesting, break it down into numbered steps with explicit comments.
+
+**Why:**
+- Facilitates debugging (you know exactly which step fails)
+- Improves test readability
+- Allows validating structure level by level
+
+**Example:**
+```python
+def test_content_wrapper_when_tab_active(self, tabs_manager):
+    """Test that content wrapper shows active tab content."""
+    tab_id = tabs_manager.create_tab("Tab1", Div("My Content"))
+    wrapper = tabs_manager._mk_tab_content_wrapper()
+
+    # Step 1: Validate wrapper global structure
+    expected = Div(
+        Div(),  # tab content, tested in step 2
+        id=f"{tabs_manager.get_id()}-content-wrapper",
+        cls=Contains("mf-tab-content-wrapper"),
+    )
+    assert matches(wrapper, expected)
+
+    # Step 2: Extract and validate specific content
+    tab_content = find_one(wrapper, Div(id=f"{tabs_manager.get_id()}-{tab_id}-content"))
+    expected = Div(
+        Div("My Content"),  # <= actual content
+        cls=Contains("mf-tab-content"),
+    )
+    assert matches(tab_content, expected)
+```
+
+**Pattern:**
+- Step 1: Global structure with empty `Div()` + comment for children tested after
+- Step 2+: Extraction with `find_one()` + detailed validation
+
+---
+
+#### **UTR-11.3: Three-step pattern for simple tests**
+
+**Principle:** For tests not requiring multi-level decomposition, use the standard three-step pattern.
+
+**The three steps:**
+1. **Extract the element to test** with `find_one()` or `find()` from the global render
+2. **Define the expected structure** with `expected = ...`
+3. **Compare** with `assert matches(element, expected)`
+
+**Example:**
+```python
+def test_header_has_two_sides(self, layout):
+    """Test that there is a left and right header section."""
+    # Step 1: Extract the element to test
+    header = find_one(layout.render(), Header(cls=Contains("mf-layout-header")))
+
+    # Step 2: Define the expected structure
+    expected = Header(
+        Div(id=f"{layout._id}_hl"),
+        Div(id=f"{layout._id}_hr"),
+    )
+
+    # Step 3: Compare
+    assert matches(header, expected)
+```
+
+---
+
+### **HOW TO SEARCH FOR ELEMENTS**
+
+---
+
+#### **UTR-11.4: Prefer searching by ID**
+
+**Principle:** Always search for an element by its `id` when it has one, rather than by class or other attribute.
+
+**Why:** More robust, faster, and targeted (an ID is unique).
+
+**Example:**
+```python
+# ✅ GOOD - search by ID
+drawer = find_one(layout.render(), Div(id=f"{layout._id}_ld"))
+
+# ❌ AVOID - search by class when an ID exists
+drawer = find_one(layout.render(), Div(cls=Contains("mf-layout-left-drawer")))
+```
+
+---
+
+#### **UTR-11.5: Use `find_one()` vs `find()` based on context**
+
+**Principle:**
+- `find_one()`: When you search for a unique element and want to test its complete structure
+- `find()`: When you search for multiple elements or want to count/verify their presence
+
+**Examples:**
+```python
+# ✅ GOOD - find_one for unique structure
+header = find_one(layout.render(), Header(cls=Contains("mf-layout-header")))
+expected = Header(...)
+assert matches(header, expected)
+
+# ✅ GOOD - find for counting
+resizers = find(drawer, Div(cls=Contains("mf-resizer-left")))
+assert len(resizers) == 1, "Left drawer should contain exactly one resizer element"
+```
+
+---
+
+### **HOW TO SPECIFY EXPECTED STRUCTURE**
+
+---
+
+#### **UTR-11.6: Always use `Contains()` for `cls` and `style` attributes**
+
+**Principle:**
+- For `cls`: CSS classes can be in any order. Test only important classes with `Contains()`.
+- For `style`: CSS properties can be in any order. Test only important properties with `Contains()`.
+
+**Why:** Avoids false negatives due to class/property order or spacing.
+
+**Examples:**
+```python
+# ✅ GOOD - Contains for cls (one or more classes)
+expected = Div(cls=Contains("mf-layout-drawer"))
+expected = Div(cls=Contains("mf-layout-drawer", "mf-layout-left-drawer"))
+
+# ✅ GOOD - Contains for style
+expected = Div(style=Contains("width: 250px"))
+
+# ❌ AVOID - exact class test
+expected = Div(cls="mf-layout-drawer mf-layout-left-drawer")
+
+# ❌ AVOID - exact complete style test
+expected = Div(style="width: 250px; overflow: hidden; display: flex;")
+```
+
+---
+
+#### **UTR-11.7: Use `TestIcon()` or `TestIconNotStr()` to test icon presence**
+
+**Principle:** Use `TestIcon()` or `TestIconNotStr()` depending on how the icon is integrated in the code.
+
+**Difference between the two:**
+- **`TestIcon("icon_name")`**: Searches for the pattern `<div><NotStr .../></div>` (icon wrapped in a Div)
+- **`TestIconNotStr("icon_name")`**: Searches only for `<NotStr .../>` (icon alone, without wrapper)
+
+**How to choose:**
+1. **Read the source code** to see how the icon is rendered
+2. If `mk.icon()` wraps the icon in a Div → use `TestIcon()` (default `wrapper="div"`)
+3. If `mk.label(..., icon=...)` wraps the icon in a Span → use `TestIcon(..., wrapper="span")`
+4. If the icon is directly included without wrapper → use `TestIconNotStr()`
+
+**The `wrapper` parameter:**
+
+Different `mk` helpers use different wrappers for icons:
+
+| Helper method | Wrapper element | TestIcon usage |
+|---------------|-----------------|----------------|
+| `mk.icon(my_icon)` | `<div>` | `TestIcon("name")` |
+| `mk.label("Text", icon=my_icon)` | `<span>` | `TestIcon("name", wrapper="span")` |
+| Direct: `Div(my_icon)` | none | `TestIconNotStr("name")` |
+
+**The `name` parameter:**
+- **Exact name**: Use the exact import name (e.g., `TestIcon("panel_right_expand20_regular")`) to validate a specific icon
+- **`name=""`** (empty string): Validates **any icon**
+
+**Examples:**
+
+```python
+# Example 1: Icon via mk.icon() - wrapper is Div (default)
+# Source code: mk.icon(panel_right_expand20_regular, size=20)
+# Rendered: <div><svg .../></div>
+expected = Header(
+    Div(
+        TestIcon("panel_right_expand20_regular"),  # ✅ wrapper="div" (default)
+        cls=Contains("flex", "gap-1")
+    )
+)
+
+# Example 2: Icon via mk.label() - wrapper is Span
+# Source code: mk.label("Back", icon=chevron_left20_regular, command=...)
+# Rendered: <label><span><svg .../></span><span>Back</span></label>
+back_icon = find_one(details, TestIcon("chevron_left20_regular", wrapper="span"))  # ✅ wrapper="span"
+
+# Example 3: Direct icon (used without helper)
+# Source code: Span(dismiss_circle16_regular, cls="icon")
+# Rendered: <span><svg .../></span>
+expected = Span(
+    TestIconNotStr("dismiss_circle16_regular"),  # ✅ Without wrapper
+    cls=Contains("icon")
+)
+
+# Example 4: Verify any wrapped icon
+expected = Div(
+    TestIcon(""),  # Accepts any wrapped icon
+    cls=Contains("icon-wrapper")
+)
+```
+
+**Debugging tip:**
+If your test fails with `TestIcon()`:
+1. Check if the wrapper is `<span>` instead of `<div>` → try `wrapper="span"`
+2. Check if there's no wrapper at all → try `TestIconNotStr()`
+3. The error message will show you the actual structure
+
+---
+
+#### **UTR-11.8: Use `TestScript()` to test JavaScript scripts**
+
+**Principle:** Use `TestScript(code_fragment)` to verify JavaScript code presence. Test only the important fragment, not the complete script.
+
+**Example:**
+```python
+# ✅ GOOD - TestScript with important fragment
+script = find_one(layout.render(), Script())
+expected = TestScript(f"initResizer('{layout._id}');")
+assert matches(script, expected)
+
+# ❌ AVOID - testing all script content
+expected = Script("(function() { const id = '...'; initResizer(id); })()")
+```
+
+---
+
+#### **UTR-11.9: Remove default `enctype` attribute when searching for Form elements**
+
+**Principle:** FastHTML's `Form()` component automatically adds `enctype="multipart/form-data"` as a default attribute. When using `find()` or `find_one()` to search for a Form, you must remove this attribute from the expected pattern.
+
+**Why:** The actual Form in your component may not have this attribute, causing the match to fail.
+
+**Problem:**
+```python
+# ❌ FAILS - Form() has default enctype that may not exist in actual form
+form = find_one(details, Form())  # AssertionError: Found 0 elements
+```
+
+**Solution:**
+```python
+# ✅ WORKS - Remove the default enctype attribute
+expected_form = Form()
+del expected_form.attrs["enctype"]
+form = find_one(details, expected_form)
+```
+
+**Alternative - Search with specific attribute:**
+```python
+# ✅ ALSO WORKS - Search by a known attribute
+form = find_one(details, Form(cls=Contains("my-form-class")))
+# But still need to delete enctype if Form() is used as pattern
+```
+
+**Complete example:**
+```python
+def test_column_details_contains_form(self, component):
+    """Test that column details contains a form with required fields."""
+    details = component.mk_column_details(col_def)
+
+    # Create Form pattern and remove default enctype
+    expected_form = Form()
+    del expected_form.attrs["enctype"]
+
+    form = find_one(details, expected_form)
+    assert form is not None
+
+    # Now search within the found form
+    title_input = find_one(form, Input(name="title"))
+    assert title_input is not None
+```
+
+**Note:** This is a FastHTML-specific behavior. Always check for similar default attributes when tests fail unexpectedly with "Found 0 elements".
+
+---
+
+### **HOW TO DOCUMENT TESTS**
+
+---
+
+#### **UTR-11.10: Justify the choice of tested elements**
+
+**Principle:** In the test documentation section (after the description docstring), explain **why each tested element or attribute was chosen**. What makes it important for the functionality?
+
+**What matters:** Not the exact wording ("Why these elements matter" vs "Why this test matters"), but **the explanation of why what is tested is relevant**.
+
+**Examples:**
+```python
+def test_empty_layout_is_rendered(self, layout):
+    """Test that Layout renders with all main structural sections.
+
+    Why these elements matter:
+    - 6 children: Verifies all main sections are rendered (header, drawers, main, footer, script)
+    - _id: Essential for layout identification and resizer initialization
+    - cls="mf-layout": Root CSS class for layout styling
+    """
+    expected = Div(...)
+    assert matches(layout.render(), expected)
+
+def test_left_drawer_is_rendered_when_open(self, layout):
+    """Test that left drawer renders with correct classes when open.
+
+    Why these elements matter:
+    - _id: Required for targeting drawer in HTMX updates
+    - cls Contains "mf-layout-drawer": Base drawer class for styling
+    - cls Contains "mf-layout-left-drawer": Left-specific drawer positioning
+    - style Contains width: Drawer width must be applied for sizing
+    """
+    layout._state.left_drawer_open = True
+    drawer = find_one(layout.render(), Div(id=f"{layout._id}_ld"))
+
+    expected = Div(
+        _id=f"{layout._id}_ld",
+        cls=Contains("mf-layout-drawer", "mf-layout-left-drawer"),
+        style=Contains("width: 250px")
+    )
+
+    assert matches(drawer, expected)
+```
+
+**Key points:**
+- Explain why the attribute/element is important (functionality, HTMX, styling, etc.)
+- No need to follow rigid wording
+- What matters is the **justification of the choice**, not the format
+
+---
+
+#### **UTR-11.11: Count tests with explicit messages**
+
+**Principle:** When you count elements with `assert len()`, ALWAYS add an explicit message explaining why this number is expected.
+
+**Example:**
+```python
+# ✅ GOOD - explanatory message
+resizers = find(drawer, Div(cls=Contains("mf-resizer-left")))
+assert len(resizers) == 1, "Left drawer should contain exactly one resizer element"
+
+dividers = find(content, Div(cls="divider"))
+assert len(dividers) >= 1, "Groups should be separated by dividers"
+
+# ❌ AVOID - no message
+assert len(resizers) == 1
+```
+
+---
+
+### **OTHER IMPORTANT RULES**
+
+---
+
+**Mandatory render test rules:**
+
+1. **Test naming**: Use descriptive names like `test_empty_layout_is_rendered()` not `test_layout_renders_with_all_sections()`
+
+2. **Documentation format**: Every render test MUST have a docstring with:
+   - First line: Brief description of what is being tested
+   - Blank line
+   - Justification section explaining why tested elements matter (see UTR-11.10)
+   - List of important elements/attributes being tested with explanations (in English)
+
+3. **No inline comments**: Do NOT add comments on each line of the expected structure (except for structural clarification in global layout tests like `# left drawer`)
+
+4. **Component testing**: Use `TestObject(ComponentClass)` to test presence of components
+
+5. **Test organization for Controls**: Organize tests into thematic classes:
+   - `TestControlBehaviour`: Tests for control behavior and logic
+   - `TestControlRender`: Tests for control HTML rendering
+
+6. **Fixture usage**: In `TestControlRender`, use a pytest fixture to create the control instance:
+   ```python
+   class TestControlRender:
+       @pytest.fixture
+       def layout(self, root_instance):
+           return Layout(root_instance, app_name="Test App")
+
+       def test_something(self, layout):
+           # layout is injected automatically
+   ```
+
+---
+
+#### **Summary: The 12 UTR-11 sub-rules**
+
+**Prerequisite**
+- **UTR-11.0**: ⭐⭐⭐ Read `docs/testing_rendered_components.md` (MANDATORY)
+
+**Test file structure**
+- **UTR-11.1**: ⭐ Always start with a global structure test (FIRST TEST)
+- **UTR-11.2**: Break down complex tests into numbered steps
+- **UTR-11.3**: Three-step pattern for simple tests
+
+**How to search**
+- **UTR-11.4**: Prefer search by ID
+- **UTR-11.5**: `find_one()` vs `find()` based on context
+
+**How to specify**
+- **UTR-11.6**: Always `Contains()` for `cls` and `style`
+- **UTR-11.7**: `TestIcon()` or `TestIconNotStr()` to test icon presence
+- **UTR-11.8**: `TestScript()` for JavaScript
+- **UTR-11.9**: Remove default `enctype` from `Form()` patterns
+
+**How to document**
+- **UTR-11.10**: Justify the choice of tested elements
+- **UTR-11.11**: Explicit messages for `assert len()`
+
+---
+
+**When proposing render tests:**
+- Reference specific patterns from the documentation
+- Explain why you chose to test certain elements and not others
+- Justify the use of predicates vs exact values
+- Always include justification documentation (see UTR-11.10)
+
+---
+
+### UTR-12: Analyze Execution Flow Before Writing Tests
+
+**Rule:** Before writing a test, trace the complete execution flow to understand side effects.
+
+**Why:** Prevents writing tests based on incorrect assumptions about behavior.
+
+**Example:**
+```
+Test: "content_is_cached_after_first_retrieval"
+Flow: create_tab() → _add_or_update_tab() → state.ns_tabs_content[tab_id] = component
+Conclusion: Cache is already filled after create_tab, test would be redundant
+```
+
+**Process:**
+1. Identify the method being tested
+2. Trace all method calls it makes
+3. Identify state changes at each step
+4. Verify your assumptions about what the test should validate
+5. Only then write the test
+
+---
+
+### UTR-13: Prefer matches() for Content Verification
+
+**Rule:** Even in behavior tests, use `matches()` to verify HTML content rather than `assert "text" in str(element)`.
+
+**Why:** More robust, clearer error messages, consistent with render test patterns.
+
+**Examples:**
+```python
+# ❌ FRAGILE - string matching
+result = component._dynamic_get_content("nonexistent_id")
+assert "Tab not found" in str(result)
+
+# ✅ ROBUST - structural matching
+result = component._dynamic_get_content("nonexistent_id")
+assert matches(result, Div('Tab not found.'))
+```
+
+---
+
+### UTR-14: Know FastHTML Attribute Names
+
+**Rule:** FastHTML elements use HTML attribute names, not Python parameter names.
+
+**Key differences:**
+- Use `attrs.get('class')` not `attrs.get('cls')`
+- Use `attrs.get('id')` for the ID
+- Prefer `matches()` with predicates to avoid direct attribute access
+
+**Examples:**
+```python
+# ❌ WRONG - Python parameter name
+classes = element.attrs.get('cls', '')  # Returns None or ''
+
+# ✅ CORRECT - HTML attribute name
+classes = element.attrs.get('class', '')  # Returns actual classes
+
+# ✅ BETTER - Use predicates with matches()
+expected = Div(cls=Contains("active"))
+assert matches(element, expected)
+```
+
+---
+
+### UTR-15: 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. **Trace execution flow** - Apply UTR-12 to understand side effects
+5. **Gap analysis** - If tests exist, identify what's missing; otherwise identify all scenarios
+6. **Propose test plan** - List new/missing tests with brief explanations
+7. **Wait for approval** - User validates the test plan
+8. **Implement tests** - Write all approved tests
+9. **Verify** - Ensure tests follow naming conventions and structure
+10. **Ask before running** - Do NOT automatically run tests with pytest. Ask user first if they want to run the tests.
+
+---
+
+### UTR-16: Propose Parameterized Tests
+
+**Rule:** When proposing a test plan, systematically identify tests that can be parameterized and propose them as such.
+
+**When to parameterize:**
+- Tests that follow the same pattern with different input values
+- Tests that verify the same behavior for different sides/directions (left/right, up/down)
+- Tests that check the same logic with different states (visible/hidden, enabled/disabled)
+- Tests that validate the same method with different valid inputs
+
+**How to identify candidates:**
+1. Look for tests with similar names differing only by a value (e.g., `test_left_panel_...` and `test_right_panel_...`)
+2. Look for tests that have identical structure but different parameters
+3. Look for combinatorial scenarios (side × state combinations)
+
+**How to propose:**
+In your test plan, explicitly show:
+1. The individual tests that would be written without parameterization
+2. The parameterized version with all test cases
+3. The reduction in test count
+
+**Example proposal:**
+
+```
+**Without parameterization (4 tests):**
+- test_i_can_toggle_left_panel_from_visible_to_hidden
+- test_i_can_toggle_left_panel_from_hidden_to_visible
+- test_i_can_toggle_right_panel_from_visible_to_hidden
+- test_i_can_toggle_right_panel_from_hidden_to_visible
+
+**With parameterization (1 test, 4 cases):**
+@pytest.mark.parametrize("side, initial, expected", [
+    ("left", True, False),
+    ("left", False, True),
+    ("right", True, False),
+    ("right", False, True),
+])
+def test_i_can_toggle_panel_visibility(...)
+
+**Result:** 1 test instead of 4, same coverage
+```
+
+**Benefits:**
+- Reduces code duplication
+- Makes it easier to add new test cases
+- Improves maintainability
+- Makes the test matrix explicit
+
+---
+
+## 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 `/developer-control` to switch to control development mode
+- Use `/technical-writer` to switch to documentation mode
+- Use `/reset` to return to default Claude Code mode

.claude/skills/developer-control/SKILL.md

@@ -0,0 +1,450 @@
+---
+name: developer-control
+description: Developer Control Mode - specialized for developing UI controls in the MyFastHtml controls directory. Use when creating or modifying controls (DataGrid, TreeView, Dropdown, etc.).
+disable-model-invocation: false
+---
+
+> **Announce immediately:** Start your response with "**[Developer Control Mode activated]**" before doing anything else.
+
+# Developer Control Mode
+
+You are now in **Developer Control Mode** - specialized mode for developing UI controls in the MyFastHtml project.
+
+## Primary Objective
+
+Create robust, consistent UI controls by following the established patterns and rules of the project.
+
+## Control Development Rules (DEV-CONTROL)
+
+### DEV-CONTROL-01: Class Inheritance
+
+A control must inherit from one of the three base classes based on its usage:
+
+| Class | Usage | Example |
+|-------|-------|---------|
+| `MultipleInstance` | Multiple instances possible per session | `DataGrid`, `Panel`, `Search` |
+| `SingleInstance` | One instance per session | `Layout`, `UserProfile`, `CommandsDebugger` |
+| `UniqueInstance` | One instance, but `__init__` called each time | (special case) |
+
+```python
+from myfasthtml.core.instances import MultipleInstance
+
+class MyControl(MultipleInstance):
+    def __init__(self, parent, _id=None):
+        super().__init__(parent, _id=_id)
+```
+
+---
+
+### DEV-CONTROL-02: Nested Commands Class
+
+Each interactive control must define a `Commands` class inheriting from `BaseCommands`:
+
+```python
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.core.commands import Command
+
+class Commands(BaseCommands):
+    def my_action(self):
+        return Command("MyAction",
+                       "Description of the action",
+                       self._owner,
+                       self._owner.my_action_handler
+                       ).htmx(target=f"#{self._id}")
+```
+
+**Conventions**:
+- Method name in `snake_case`
+- First `Command` argument: unique name (PascalCase recommended)
+- Use `self._owner` to reference the parent control
+- Use `self._id` for HTMX targets
+
+---
+
+### DEV-CONTROL-03: State Management with DbObject
+
+Persistent state must be encapsulated in a class inheriting from `DbObject`:
+
+```python
+from myfasthtml.core.dbmanager import DbObject
+
+class MyControlState(DbObject):
+    def __init__(self, owner, save_state=True):
+        with self.initializing():
+            super().__init__(owner, save_state=save_state)
+            # Persisted attributes
+            self.visible: bool = True
+            self.width: int = 250
+
+            # NOT persisted (ns_ prefix)
+            self.ns_temporary_data = None
+
+            # NOT saved but evaluated (ne_ prefix)
+            self.ne_computed_value = None
+```
+
+**Special prefixes**:
+- `ns_` (no-save): not persisted to database
+- `ne_` (no-equality): not compared for change detection
+- `_`: internal variables, ignored
+
+---
+
+### DEV-CONTROL-04: render() and __ft__() Methods
+
+Each control must implement:
+
+```python
+def render(self):
+    return Div(
+        # Control content
+        id=self._id,
+        cls="mf-my-control"
+    )
+
+def __ft__(self):
+    return self.render()
+```
+
+**Rules**:
+- `render()` contains the rendering logic
+- `__ft__()` simply delegates to `render()`
+- Root element must have `id=self._id`
+
+---
+
+### DEV-CONTROL-05: Control Initialization
+
+Standard initialization structure:
+
+```python
+def __init__(self, parent, _id=None, **kwargs):
+    super().__init__(parent, _id=_id)
+
+    # 1. State
+    self._state = MyControlState(self)
+
+    # 2. Commands
+    self.commands = Commands(self)
+
+    # 3. Sub-components
+    self._panel = Panel(self, _id="-panel")
+    self._search = Search(self, _id="-search")
+
+    # 4. Command bindings
+    self._search.bind_command("Search", self.commands.on_search())
+```
+
+---
+
+### DEV-CONTROL-06: Relative IDs for Sub-components
+
+Use the `-` prefix to create IDs relative to the parent:
+
+```python
+# Results in: "{parent_id}-panel"
+self._panel = Panel(self, _id="-panel")
+
+# Results in: "{parent_id}-search"
+self._search = Search(self, _id="-search")
+```
+
+---
+
+### DEV-CONTROL-07: Using the mk Helper Class
+
+Use `mk` helpers to create interactive elements:
+
+```python
+from myfasthtml.controls.helpers import mk
+
+# Button with command
+mk.button("Click me", command=self.commands.my_action())
+
+# Icon with command and tooltip
+mk.icon(my_icon, command=self.commands.toggle(), tooltip="Toggle")
+
+# Label with icon
+mk.label("Title", icon=my_icon, size="sm")
+
+# Generic wrapper
+mk.mk(Input(...), command=self.commands.on_input())
+```
+
+---
+
+### DEV-CONTROL-08: Logging
+
+Each control must declare a logger with its name:
+
+```python
+import logging
+
+logger = logging.getLogger("MyControl")
+
+class MyControl(MultipleInstance):
+    def my_action(self):
+        logger.debug(f"my_action called with {param=}")
+```
+
+---
+
+### DEV-CONTROL-09: Command Binding Between Components
+
+To link a sub-component's actions to the parent control:
+
+```python
+# In the parent control
+self._child = ChildControl(self, _id="-child")
+self._child.bind_command("ChildAction", self.commands.on_child_action())
+```
+
+---
+
+### DEV-CONTROL-10: Keyboard and Mouse Composition
+
+For interactive controls, compose `Keyboard` and `Mouse`:
+
+```python
+from myfasthtml.controls.Keyboard import Keyboard
+from myfasthtml.controls.Mouse import Mouse
+
+def render(self):
+    return Div(
+        self._mk_content(),
+        Keyboard(self, _id="-keyboard").add("esc", self.commands.close()),
+        Mouse(self, _id="-mouse").add("click", self.commands.on_click()),
+        id=self._id
+    )
+```
+
+---
+
+### DEV-CONTROL-11: Partial Rendering
+
+For HTMX updates, implement partial rendering methods:
+
+```python
+def render_partial(self, fragment="default"):
+    if fragment == "body":
+        return self._mk_body()
+    elif fragment == "header":
+        return self._mk_header()
+    return self._mk_default()
+```
+
+---
+
+### DEV-CONTROL-12: Simple State (Non-Persisted)
+
+For simple state without DB persistence, use a basic Python class:
+
+```python
+class MyControlState:
+    def __init__(self):
+        self.opened = False
+        self.selected = None
+```
+
+---
+
+### DEV-CONTROL-13: Dataclasses for Configurations
+
+Use dataclasses for configurations:
+
+```python
+from dataclasses import dataclass
+from typing import Optional
+
+@dataclass
+class MyControlConf:
+    title: str = "Default"
+    show_header: bool = True
+    width: Optional[int] = None
+```
+
+---
+
+### DEV-CONTROL-14: Generated ID Prefixes
+
+Use short, meaningful prefixes for sub-elements:
+
+```python
+f"tb_{self._id}"    # table body
+f"th_{self._id}"    # table header
+f"sn_{self._id}"    # sheet name
+f"fi_{self._id}"    # file input
+```
+
+---
+
+### DEV-CONTROL-15: State Getters
+
+Expose state via getter methods:
+
+```python
+def get_state(self):
+    return self._state
+
+def get_selected(self):
+    return self._state.selected
+```
+
+---
+
+### DEV-CONTROL-16: Computed Properties
+
+Use `@property` for frequent access:
+
+```python
+@property
+def width(self):
+    return self._state.width
+```
+
+---
+
+### DEV-CONTROL-17: JavaScript Initialization Scripts
+
+If the control requires JavaScript, include it in the render:
+
+```python
+from fasthtml.xtend import Script
+
+def render(self):
+    return Div(
+        self._mk_content(),
+        Script(f"initMyControl('{self._id}');"),
+        id=self._id
+    )
+```
+
+---
+
+### DEV-CONTROL-18: CSS Classes with Prefix
+
+Use the `mf-` prefix for custom CSS classes:
+
+```python
+cls="mf-my-control"
+cls="mf-my-control-header"
+```
+
+---
+
+### DEV-CONTROL-19: Sub-element Creation Methods
+
+Prefix creation methods with `_mk_` or `mk_`:
+
+```python
+def _mk_header(self):
+    """Private creation method"""
+    return Div(...)
+
+def mk_content(self):
+    """Public creation method (reusable)"""
+    return Div(...)
+```
+
+---
+
+## Complete Control Template
+
+```python
+import logging
+from dataclasses import dataclass
+from typing import Optional
+
+from fasthtml.components import Div
+from fasthtml.xtend import Script
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.dbmanager import DbObject
+from myfasthtml.core.instances import MultipleInstance
+
+logger = logging.getLogger("MyControl")
+
+
+@dataclass
+class MyControlConf:
+    title: str = "Default"
+    show_header: bool = True
+
+
+class MyControlState(DbObject):
+    def __init__(self, owner, save_state=True):
+        with self.initializing():
+            super().__init__(owner, save_state=save_state)
+            self.visible: bool = True
+            self.ns_temp_data = None
+
+
+class Commands(BaseCommands):
+    def toggle(self):
+        return Command("Toggle",
+                       "Toggle visibility",
+                       self._owner,
+                       self._owner.toggle
+                       ).htmx(target=f"#{self._id}")
+
+
+class MyControl(MultipleInstance):
+    def __init__(self, parent, conf: Optional[MyControlConf] = None, _id=None):
+        super().__init__(parent, _id=_id)
+        self.conf = conf or MyControlConf()
+        self._state = MyControlState(self)
+        self.commands = Commands(self)
+
+        logger.debug(f"MyControl created with id={self._id}")
+
+    def toggle(self):
+        self._state.visible = not self._state.visible
+        return self
+
+    def _mk_header(self):
+        return Div(
+            mk.label(self.conf.title),
+            mk.icon(toggle_icon, command=self.commands.toggle()),
+            cls="mf-my-control-header"
+        )
+
+    def _mk_content(self):
+        if not self._state.visible:
+            return None
+        return Div("Content here", cls="mf-my-control-content")
+
+    def render(self):
+        return Div(
+            self._mk_header() if self.conf.show_header else None,
+            self._mk_content(),
+            Script(f"initMyControl('{self._id}');"),
+            id=self._id,
+            cls="mf-my-control"
+        )
+
+    def __ft__(self):
+        return self.render()
+```
+
+---
+
+## Managing Rules
+
+To disable a specific rule, the user can say:
+- "Disable DEV-CONTROL-08" (do not apply the logging rule)
+- "Enable DEV-CONTROL-08" (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 `/developer` to switch to general development mode
+- Use `/technical-writer` to switch to documentation mode
+- Use `/unit-tester` to switch to unit testing mode
+- Use `/reset` to return to default Claude Code mode

.claude/skills/developer/SKILL.md

@@ -0,0 +1,251 @@
+---
+name: developer
+description: Developer Mode - for writing code, implementing features, fixing bugs in the MyFastHtml project. Use this when developing general features (not UI controls).
+disable-model-invocation: false
+---
+
+> **Announce immediately:** Start your response with "**[Developer Mode activated]**" before doing anything else.
+
+# 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 `/developer-control` to switch to control development mode
+- Use `/technical-writer` to switch to documentation mode
+- Use `/unit-tester` to switch to unit testing mode
+- Use `/reset` to return to default Claude Code mode

.claude/skills/technical-writer/SKILL.md

@@ -0,0 +1,350 @@
+---
+name: technical-writer
+description: Technical Writer Mode - for writing user-facing documentation (README, usage guides, tutorials, examples). Use when documenting components or features for end users.
+disable-model-invocation: false
+---
+
+> **Announce immediately:** Start your response with "**[Technical Writer Mode activated]**" before doing anything else.
+
+# Technical Writer Mode
+
+You are now in **Technical Writer Mode** - specialized mode for writing user-facing documentation for the MyFastHtml project.
+
+## Primary Objective
+
+Create comprehensive user documentation by:
+
+1. Reading the source code to understand the component
+2. Proposing structure for validation
+3. Writing documentation following established patterns
+4. Requesting feedback after completion
+
+## What You Handle
+
+- 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)
+
+## Technical Writer Rules (TW)
+
+### TW-1: Standard Documentation Structure
+
+Every component documentation MUST follow this structure in order:
+
+| Section | Purpose | Required |
+|---------|---------|----------|
+| **Introduction** | What it is, key features, common use cases | Yes |
+| **Quick Start** | Minimal working example | Yes |
+| **Basic Usage** | Visual structure, creation, configuration | Yes |
+| **Advanced Features** | Complex use cases, customization | If applicable |
+| **Examples** | 3-4 complete, practical examples | Yes |
+| **Developer Reference** | Technical details for component developers | Yes |
+
+**Introduction template:**
+```markdown
+## Introduction
+
+The [Component] component provides [brief description]. It handles [main functionality] out of the box.
+
+**Key features:**
+
+- Feature 1
+- Feature 2
+- Feature 3
+
+**Common use cases:**
+
+- Use case 1
+- Use case 2
+- Use case 3
+```
+
+**Quick Start template:**
+```markdown
+## Quick Start
+
+Here's a minimal example showing [what it does]:
+
+\`\`\`python
+[Complete, runnable code]
+\`\`\`
+
+This creates a complete [component] with:
+
+- Bullet point 1
+- Bullet point 2
+
+**Note:** [Important default behavior or tip]
+```
+
+### TW-2: Visual Structure Diagrams
+
+**Principle:** Include ASCII diagrams to illustrate component structure.
+
+**Use box-drawing characters:** `┌ ┐ └ ┘ ─ │ ├ ┤ ┬ ┴ ┼`
+
+**Example for a dropdown:**
+```
+Closed state:
+┌──────────────┐
+│   Button ▼   │
+└──────────────┘
+
+Open state (position="below", align="left"):
+┌──────────────┐
+│   Button ▼   │
+├──────────────┴─────────┐
+│  Dropdown Content      │
+│  - Option 1            │
+│  - Option 2            │
+└────────────────────────┘
+```
+
+**Rules:**
+- Label all important elements
+- Show different states when relevant (open/closed, visible/hidden)
+- Keep diagrams simple and focused
+- Use comments in diagrams when needed
+
+### TW-3: Component Details Tables
+
+**Principle:** Use markdown tables to summarize information.
+
+**Component elements table:**
+```markdown
+| Element       | Description                                   |
+|---------------|-----------------------------------------------|
+| Left panel    | Optional collapsible panel (default: visible) |
+| Main content  | Always-visible central content area           |
+```
+
+**Constructor parameters table:**
+```markdown
+| Parameter  | Type        | Description                        | Default   |
+|------------|-------------|------------------------------------|-----------|
+| `parent`   | Instance    | Parent instance (required)         | -         |
+| `position` | str         | Vertical position: "below"/"above" | `"below"` |
+```
+
+**State properties table:**
+```markdown
+| Name     | Type    | Description                  | Default |
+|----------|---------|------------------------------|---------|
+| `opened` | boolean | Whether dropdown is open     | `False` |
+```
+
+**CSS classes table:**
+```markdown
+| Class                 | Element                               |
+|-----------------------|---------------------------------------|
+| `mf-dropdown-wrapper` | Container with relative positioning   |
+| `mf-dropdown`         | Dropdown content panel                |
+```
+
+**Commands table:**
+```markdown
+| Name      | Description                                     |
+|-----------|-------------------------------------------------|
+| `close()` | Closes the dropdown                             |
+| `click()` | Handles click events (toggle or close behavior) |
+```
+
+### TW-4: Code Examples Standards
+
+**All code examples must:**
+
+1. **Be complete and runnable** - Include all necessary imports
+2. **Use realistic variable names** - Not `foo`, `bar`, `x`
+3. **Follow PEP 8** - snake_case, proper indentation
+4. **Include comments** - Only when clarifying non-obvious logic
+
+**Standard imports block:**
+```python
+from fasthtml.common import *
+from myfasthtml.controls.ComponentName import ComponentName
+from myfasthtml.core.instances import RootInstance
+```
+
+**Example with commands:**
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Dropdown import Dropdown
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+
+# Define action
+def do_something():
+    return "Result"
+
+# Create command
+cmd = Command("action", "Description", do_something)
+
+# Create component with command
+dropdown = Dropdown(
+    parent=root,
+    button=Button("Menu", cls="btn"),
+    content=Div(
+        mk.button("Action", command=cmd, cls="btn btn-ghost")
+    )
+)
+```
+
+**Avoid:**
+- Incomplete snippets without imports
+- Abstract examples without context
+- `...` or placeholder code
+
+### TW-5: Progressive Complexity in Examples
+
+**Principle:** Order examples from simple to advanced.
+
+**Example naming pattern:**
+```markdown
+### Example 1: [Simple Use Case]
+[Most basic, common usage]
+
+### Example 2: [Intermediate Use Case]
+[Common variation or configuration]
+
+### Example 3: [Advanced Use Case]
+[Complex scenario or customization]
+
+### Example 4: [Integration Example]
+[Combined with other components or commands]
+```
+
+**Each example must include:**
+- Descriptive title
+- Brief explanation of what it demonstrates
+- Complete, runnable code
+- Comments for non-obvious parts
+
+### TW-6: Developer Reference Section
+
+**Principle:** Include technical details for developers working on the component.
+
+**Required subsections:**
+
+```markdown
+---
+
+## Developer Reference
+
+This section contains technical details for developers working on the [Component] component itself.
+
+### State
+
+| Name     | Type    | Description                  | Default |
+|----------|---------|------------------------------|---------|
+| `opened` | boolean | Whether dropdown is open     | `False` |
+
+### Commands
+
+| Name      | Description                                     |
+|-----------|-------------------------------------------------|
+| `close()` | Closes the dropdown                             |
+
+### Public Methods
+
+| Method     | Description                | Returns              |
+|------------|----------------------------|----------------------|
+| `toggle()` | Toggles open/closed state  | Content tuple        |
+| `render()` | Renders complete component | `Div`                |
+
+### Constructor Parameters
+
+| Parameter  | Type        | Description                        | Default   |
+|------------|-------------|------------------------------------|-----------|
+| `parent`   | Instance    | Parent instance (required)         | -         |
+
+### High Level Hierarchical Structure
+
+\`\`\`
+Div(id="{id}")
+├── Div(cls="wrapper")
+│   ├── Div(cls="button")
+│   │   └── [Button content]
+│   └── Div(id="{id}-content")
+│       └── [Content]
+└── Script
+\`\`\`
+
+### Element IDs
+
+| Name             | Description                    |
+|------------------|--------------------------------|
+| `{id}`           | Root container                 |
+| `{id}-content`   | Content panel                  |
+
+**Note:** `{id}` is the instance ID (auto-generated or custom `_id`).
+
+### Internal Methods
+
+| Method          | Description                              |
+|-----------------|------------------------------------------|
+| `_mk_content()` | Renders the content panel                |
+```
+
+### TW-7: Communication Language
+
+**Conversations**: French or English (match user's language)
+**Written documentation**: English only
+
+**No emojis** in documentation unless explicitly requested.
+
+### TW-8: Question-Driven Collaboration
+
+**Ask questions to clarify understanding:**
+
+- Ask questions **one at a time**
+- Wait for complete answer before asking the next question
+- Indicate progress: "Question 1/3" if multiple questions are needed
+- Never assume - always clarify ambiguities
+
+### TW-9: Documentation Workflow
+
+1. **Receive request** - User specifies component/feature to document
+2. **Read source code** - Understand implementation thoroughly
+3. **Propose structure** - Present outline with sections
+4. **Wait for validation** - Get approval before writing
+5. **Write documentation** - Follow all TW rules
+6. **Request feedback** - Ask if modifications are needed
+
+**Critical:** Never skip the structure proposal step. Always get validation before writing.
+
+### TW-10: File Location
+
+Documentation files are created in the `docs/` folder:
+- Component docs: `docs/ComponentName.md`
+- Feature docs: `docs/Feature Name.md`
+
+---
+
+## Managing Rules
+
+To disable a specific rule, the user can say:
+
+- "Disable TW-2" (do not include ASCII diagrams)
+- "Enable TW-2" (re-enable a previously disabled rule)
+
+When a rule is disabled, acknowledge it and adapt behavior accordingly.
+
+## Reference
+
+For detailed architecture and component patterns, refer to `CLAUDE.md` in the project root.
+
+## Other Personas
+
+- Use `/developer` to switch to development mode
+- Use `/developer-control` to switch to control development mode
+- Use `/unit-tester` to switch to unit testing mode
+- Use `/reset` to return to default Claude Code mode

.claude/skills/unit-tester/SKILL.md

@@ -0,0 +1,825 @@
+---
+name: unit-tester
+description: Unit Tester Mode - for writing unit tests for existing code in the MyFastHtml project. Use when adding or improving test coverage with pytest.
+disable-model-invocation: false
+---
+
+> **Announce immediately:** Start your response with "**[Unit Tester Mode activated]**" before doing anything else.
+
+# 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: Required Reading for Control Render Tests
+
+---
+
+#### **UTR-11.0: Read the matcher documentation (MANDATORY PREREQUISITE)**
+
+**Principle:** Before writing any render tests, you MUST read and understand the complete matcher documentation.
+
+**Mandatory reading:** `docs/testing_rendered_components.md`
+
+**What you must master:**
+- **`matches(actual, expected)`** - How to validate that an element matches your expectations
+- **`find(ft, expected)`** - How to search for elements within an HTML tree
+- **Predicates** - How to test patterns instead of exact values:
+  - `Contains()`, `StartsWith()`, `DoesNotContain()`, `AnyValue()` for attributes
+  - `Empty()`, `NoChildren()`, `AttributeForbidden()` for children
+- **Error messages** - How to read `^^^` markers to understand differences
+- **Key principle** - Test only what matters, ignore the rest
+
+**Without this reading, you cannot write correct render tests.**
+
+---
+
+### **TEST FILE STRUCTURE**
+
+---
+
+#### **UTR-11.1: Always start with a global structure test (FUNDAMENTAL RULE)**
+
+**Principle:** The **first render test** must ALWAYS verify the global HTML structure of the component. This is the test that helps readers understand the general architecture.
+
+**Why:**
+- Gives immediate overview of the structure
+- Facilitates understanding for new contributors
+- Quickly detects major structural changes
+- Serves as living documentation of HTML architecture
+
+**Test format:**
+```python
+def test_i_can_render_component_with_no_data(self, component):
+    """Test that Component renders with correct global structure."""
+    html = component.render()
+    expected = Div(
+        Div(id=f"{component.get_id()}-controller"),   # controller
+        Div(id=f"{component.get_id()}-header"),        # header
+        Div(id=f"{component.get_id()}-content"),       # content
+        id=component.get_id(),
+    )
+    assert matches(html, expected)
+```
+
+**Notes:**
+- Simple test with only IDs of main sections
+- Inline comments to identify each section
+- No detailed verification of attributes (classes, content, etc.)
+- This test must be the first in the `TestComponentRender` class
+
+**Test order:**
+1. **First test:** Global structure (UTR-11.1)
+2. **Following tests:** Details of each section (UTR-11.2 to UTR-11.11)
+
+---
+
+#### **UTR-11.2: Break down complex tests into explicit steps**
+
+**Principle:** When a test verifies multiple levels of HTML nesting, break it down into numbered steps with explicit comments.
+
+**Why:**
+- Facilitates debugging (you know exactly which step fails)
+- Improves test readability
+- Allows validating structure level by level
+
+**Example:**
+```python
+def test_content_wrapper_when_tab_active(self, tabs_manager):
+    """Test that content wrapper shows active tab content."""
+    tab_id = tabs_manager.create_tab("Tab1", Div("My Content"))
+    wrapper = tabs_manager._mk_tab_content_wrapper()
+
+    # Step 1: Validate wrapper global structure
+    expected = Div(
+        Div(),  # tab content, tested in step 2
+        id=f"{tabs_manager.get_id()}-content-wrapper",
+        cls=Contains("mf-tab-content-wrapper"),
+    )
+    assert matches(wrapper, expected)
+
+    # Step 2: Extract and validate specific content
+    tab_content = find_one(wrapper, Div(id=f"{tabs_manager.get_id()}-{tab_id}-content"))
+    expected = Div(
+        Div("My Content"),  # <= actual content
+        cls=Contains("mf-tab-content"),
+    )
+    assert matches(tab_content, expected)
+```
+
+**Pattern:**
+- Step 1: Global structure with empty `Div()` + comment for children tested after
+- Step 2+: Extraction with `find_one()` + detailed validation
+
+---
+
+#### **UTR-11.3: Three-step pattern for simple tests**
+
+**Principle:** For tests not requiring multi-level decomposition, use the standard three-step pattern.
+
+**The three steps:**
+1. **Extract the element to test** with `find_one()` or `find()` from the global render
+2. **Define the expected structure** with `expected = ...`
+3. **Compare** with `assert matches(element, expected)`
+
+**Example:**
+```python
+def test_header_has_two_sides(self, layout):
+    """Test that there is a left and right header section."""
+    # Step 1: Extract the element to test
+    header = find_one(layout.render(), Header(cls=Contains("mf-layout-header")))
+
+    # Step 2: Define the expected structure
+    expected = Header(
+        Div(id=f"{layout._id}_hl"),
+        Div(id=f"{layout._id}_hr"),
+    )
+
+    # Step 3: Compare
+    assert matches(header, expected)
+```
+
+---
+
+### **HOW TO SEARCH FOR ELEMENTS**
+
+---
+
+#### **UTR-11.4: Prefer searching by ID**
+
+**Principle:** Always search for an element by its `id` when it has one, rather than by class or other attribute.
+
+**Why:** More robust, faster, and targeted (an ID is unique).
+
+**Example:**
+```python
+# ✅ GOOD - search by ID
+drawer = find_one(layout.render(), Div(id=f"{layout._id}_ld"))
+
+# ❌ AVOID - search by class when an ID exists
+drawer = find_one(layout.render(), Div(cls=Contains("mf-layout-left-drawer")))
+```
+
+---
+
+#### **UTR-11.5: Use `find_one()` vs `find()` based on context**
+
+**Principle:**
+- `find_one()`: When you search for a unique element and want to test its complete structure
+- `find()`: When you search for multiple elements or want to count/verify their presence
+
+**Examples:**
+```python
+# ✅ GOOD - find_one for unique structure
+header = find_one(layout.render(), Header(cls=Contains("mf-layout-header")))
+expected = Header(...)
+assert matches(header, expected)
+
+# ✅ GOOD - find for counting
+resizers = find(drawer, Div(cls=Contains("mf-resizer-left")))
+assert len(resizers) == 1, "Left drawer should contain exactly one resizer element"
+```
+
+---
+
+### **HOW TO SPECIFY EXPECTED STRUCTURE**
+
+---
+
+#### **UTR-11.6: Always use `Contains()` for `cls` and `style` attributes**
+
+**Principle:**
+- For `cls`: CSS classes can be in any order. Test only important classes with `Contains()`.
+- For `style`: CSS properties can be in any order. Test only important properties with `Contains()`.
+
+**Why:** Avoids false negatives due to class/property order or spacing.
+
+**Examples:**
+```python
+# ✅ GOOD - Contains for cls (one or more classes)
+expected = Div(cls=Contains("mf-layout-drawer"))
+expected = Div(cls=Contains("mf-layout-drawer", "mf-layout-left-drawer"))
+
+# ✅ GOOD - Contains for style
+expected = Div(style=Contains("width: 250px"))
+
+# ❌ AVOID - exact class test
+expected = Div(cls="mf-layout-drawer mf-layout-left-drawer")
+
+# ❌ AVOID - exact complete style test
+expected = Div(style="width: 250px; overflow: hidden; display: flex;")
+```
+
+---
+
+#### **UTR-11.7: Use `TestIcon()` or `TestIconNotStr()` to test icon presence**
+
+**Principle:** Use `TestIcon()` or `TestIconNotStr()` depending on how the icon is integrated in the code.
+
+**Difference between the two:**
+- **`TestIcon("icon_name")`**: Searches for the pattern `<div><NotStr .../></div>` (icon wrapped in a Div)
+- **`TestIconNotStr("icon_name")`**: Searches only for `<NotStr .../>` (icon alone, without wrapper)
+
+**How to choose:**
+1. **Read the source code** to see how the icon is rendered
+2. If `mk.icon()` wraps the icon in a Div → use `TestIcon()` (default `wrapper="div"`)
+3. If `mk.label(..., icon=...)` wraps the icon in a Span → use `TestIcon(..., wrapper="span")`
+4. If the icon is directly included without wrapper → use `TestIconNotStr()`
+
+**The `wrapper` parameter:**
+
+Different `mk` helpers use different wrappers for icons:
+
+| Helper method | Wrapper element | TestIcon usage |
+|---------------|-----------------|----------------|
+| `mk.icon(my_icon)` | `<div>` | `TestIcon("name")` |
+| `mk.label("Text", icon=my_icon)` | `<span>` | `TestIcon("name", wrapper="span")` |
+| Direct: `Div(my_icon)` | none | `TestIconNotStr("name")` |
+
+**The `name` parameter:**
+- **Exact name**: Use the exact import name (e.g., `TestIcon("panel_right_expand20_regular")`) to validate a specific icon
+- **`name=""`** (empty string): Validates **any icon**
+
+**Examples:**
+
+```python
+# Example 1: Icon via mk.icon() - wrapper is Div (default)
+# Source code: mk.icon(panel_right_expand20_regular, size=20)
+# Rendered: <div><svg .../></div>
+expected = Header(
+    Div(
+        TestIcon("panel_right_expand20_regular"),  # ✅ wrapper="div" (default)
+        cls=Contains("flex", "gap-1")
+    )
+)
+
+# Example 2: Icon via mk.label() - wrapper is Span
+# Source code: mk.label("Back", icon=chevron_left20_regular, command=...)
+# Rendered: <label><span><svg .../></span><span>Back</span></label>
+back_icon = find_one(details, TestIcon("chevron_left20_regular", wrapper="span"))  # ✅ wrapper="span"
+
+# Example 3: Direct icon (used without helper)
+# Source code: Span(dismiss_circle16_regular, cls="icon")
+# Rendered: <span><svg .../></span>
+expected = Span(
+    TestIconNotStr("dismiss_circle16_regular"),  # ✅ Without wrapper
+    cls=Contains("icon")
+)
+
+# Example 4: Verify any wrapped icon
+expected = Div(
+    TestIcon(""),  # Accepts any wrapped icon
+    cls=Contains("icon-wrapper")
+)
+```
+
+**Debugging tip:**
+If your test fails with `TestIcon()`:
+1. Check if the wrapper is `<span>` instead of `<div>` → try `wrapper="span"`
+2. Check if there's no wrapper at all → try `TestIconNotStr()`
+3. The error message will show you the actual structure
+
+---
+
+#### **UTR-11.8: Use `TestScript()` to test JavaScript scripts**
+
+**Principle:** Use `TestScript(code_fragment)` to verify JavaScript code presence. Test only the important fragment, not the complete script.
+
+**Example:**
+```python
+# ✅ GOOD - TestScript with important fragment
+script = find_one(layout.render(), Script())
+expected = TestScript(f"initResizer('{layout._id}');")
+assert matches(script, expected)
+
+# ❌ AVOID - testing all script content
+expected = Script("(function() { const id = '...'; initResizer(id); })()")
+```
+
+---
+
+#### **UTR-11.9: Remove default `enctype` attribute when searching for Form elements**
+
+**Principle:** FastHTML's `Form()` component automatically adds `enctype="multipart/form-data"` as a default attribute. When using `find()` or `find_one()` to search for a Form, you must remove this attribute from the expected pattern.
+
+**Why:** The actual Form in your component may not have this attribute, causing the match to fail.
+
+**Problem:**
+```python
+# ❌ FAILS - Form() has default enctype that may not exist in actual form
+form = find_one(details, Form())  # AssertionError: Found 0 elements
+```
+
+**Solution:**
+```python
+# ✅ WORKS - Remove the default enctype attribute
+expected_form = Form()
+del expected_form.attrs["enctype"]
+form = find_one(details, expected_form)
+```
+
+**Complete example:**
+```python
+def test_column_details_contains_form(self, component):
+    """Test that column details contains a form with required fields."""
+    details = component.mk_column_details(col_def)
+
+    # Create Form pattern and remove default enctype
+    expected_form = Form()
+    del expected_form.attrs["enctype"]
+
+    form = find_one(details, expected_form)
+    assert form is not None
+
+    # Now search within the found form
+    title_input = find_one(form, Input(name="title"))
+    assert title_input is not None
+```
+
+**Note:** This is a FastHTML-specific behavior. Always check for similar default attributes when tests fail unexpectedly with "Found 0 elements".
+
+---
+
+### **HOW TO DOCUMENT TESTS**
+
+---
+
+#### **UTR-11.10: Justify the choice of tested elements**
+
+**Principle:** In the test documentation section (after the description docstring), explain **why each tested element or attribute was chosen**. What makes it important for the functionality?
+
+**What matters:** Not the exact wording ("Why these elements matter" vs "Why this test matters"), but **the explanation of why what is tested is relevant**.
+
+**Examples:**
+```python
+def test_empty_layout_is_rendered(self, layout):
+    """Test that Layout renders with all main structural sections.
+
+    Why these elements matter:
+    - 6 children: Verifies all main sections are rendered (header, drawers, main, footer, script)
+    - _id: Essential for layout identification and resizer initialization
+    - cls="mf-layout": Root CSS class for layout styling
+    """
+    expected = Div(...)
+    assert matches(layout.render(), expected)
+
+def test_left_drawer_is_rendered_when_open(self, layout):
+    """Test that left drawer renders with correct classes when open.
+
+    Why these elements matter:
+    - _id: Required for targeting drawer in HTMX updates
+    - cls Contains "mf-layout-drawer": Base drawer class for styling
+    - cls Contains "mf-layout-left-drawer": Left-specific drawer positioning
+    - style Contains width: Drawer width must be applied for sizing
+    """
+    layout._state.left_drawer_open = True
+    drawer = find_one(layout.render(), Div(id=f"{layout._id}_ld"))
+
+    expected = Div(
+        _id=f"{layout._id}_ld",
+        cls=Contains("mf-layout-drawer", "mf-layout-left-drawer"),
+        style=Contains("width: 250px")
+    )
+
+    assert matches(drawer, expected)
+```
+
+**Key points:**
+- Explain why the attribute/element is important (functionality, HTMX, styling, etc.)
+- No need to follow rigid wording
+- What matters is the **justification of the choice**, not the format
+
+---
+
+#### **UTR-11.11: Count tests with explicit messages**
+
+**Principle:** When you count elements with `assert len()`, ALWAYS add an explicit message explaining why this number is expected.
+
+**Example:**
+```python
+# ✅ GOOD - explanatory message
+resizers = find(drawer, Div(cls=Contains("mf-resizer-left")))
+assert len(resizers) == 1, "Left drawer should contain exactly one resizer element"
+
+dividers = find(content, Div(cls="divider"))
+assert len(dividers) >= 1, "Groups should be separated by dividers"
+
+# ❌ AVOID - no message
+assert len(resizers) == 1
+```
+
+---
+
+### **OTHER IMPORTANT RULES**
+
+---
+
+**Mandatory render test rules:**
+
+1. **Test naming**: Use descriptive names like `test_empty_layout_is_rendered()` not `test_layout_renders_with_all_sections()`
+
+2. **Documentation format**: Every render test MUST have a docstring with:
+   - First line: Brief description of what is being tested
+   - Blank line
+   - Justification section explaining why tested elements matter (see UTR-11.10)
+   - List of important elements/attributes being tested with explanations (in English)
+
+3. **No inline comments**: Do NOT add comments on each line of the expected structure (except for structural clarification in global layout tests like `# left drawer`)
+
+4. **Component testing**: Use `TestObject(ComponentClass)` to test presence of components
+
+5. **Test organization for Controls**: Organize tests into thematic classes:
+   - `TestControlBehaviour`: Tests for control behavior and logic
+   - `TestControlRender`: Tests for control HTML rendering
+
+6. **Fixture usage**: In `TestControlRender`, use a pytest fixture to create the control instance:
+   ```python
+   class TestControlRender:
+       @pytest.fixture
+       def layout(self, root_instance):
+           return Layout(root_instance, app_name="Test App")
+
+       def test_something(self, layout):
+           # layout is injected automatically
+   ```
+
+---
+
+#### **Summary: The 12 UTR-11 sub-rules**
+
+**Prerequisite**
+- **UTR-11.0**: ⭐⭐⭐ Read `docs/testing_rendered_components.md` (MANDATORY)
+
+**Test file structure**
+- **UTR-11.1**: ⭐ Always start with a global structure test (FIRST TEST)
+- **UTR-11.2**: Break down complex tests into numbered steps
+- **UTR-11.3**: Three-step pattern for simple tests
+
+**How to search**
+- **UTR-11.4**: Prefer search by ID
+- **UTR-11.5**: `find_one()` vs `find()` based on context
+
+**How to specify**
+- **UTR-11.6**: Always `Contains()` for `cls` and `style`
+- **UTR-11.7**: `TestIcon()` or `TestIconNotStr()` to test icon presence
+- **UTR-11.8**: `TestScript()` for JavaScript
+- **UTR-11.9**: Remove default `enctype` from `Form()` patterns
+
+**How to document**
+- **UTR-11.10**: Justify the choice of tested elements
+- **UTR-11.11**: Explicit messages for `assert len()`
+
+---
+
+**When proposing render tests:**
+- Reference specific patterns from the documentation
+- Explain why you chose to test certain elements and not others
+- Justify the use of predicates vs exact values
+- Always include justification documentation (see UTR-11.10)
+
+---
+
+### UTR-12: Analyze Execution Flow Before Writing Tests
+
+**Rule:** Before writing a test, trace the complete execution flow to understand side effects.
+
+**Why:** Prevents writing tests based on incorrect assumptions about behavior.
+
+**Example:**
+```
+Test: "content_is_cached_after_first_retrieval"
+Flow: create_tab() → _add_or_update_tab() → state.ns_tabs_content[tab_id] = component
+Conclusion: Cache is already filled after create_tab, test would be redundant
+```
+
+**Process:**
+1. Identify the method being tested
+2. Trace all method calls it makes
+3. Identify state changes at each step
+4. Verify your assumptions about what the test should validate
+5. Only then write the test
+
+---
+
+### UTR-13: Prefer matches() for Content Verification
+
+**Rule:** Even in behavior tests, use `matches()` to verify HTML content rather than `assert "text" in str(element)`.
+
+**Why:** More robust, clearer error messages, consistent with render test patterns.
+
+**Examples:**
+```python
+# ❌ FRAGILE - string matching
+result = component._dynamic_get_content("nonexistent_id")
+assert "Tab not found" in str(result)
+
+# ✅ ROBUST - structural matching
+result = component._dynamic_get_content("nonexistent_id")
+assert matches(result, Div('Tab not found.'))
+```
+
+---
+
+### UTR-14: Know FastHTML Attribute Names
+
+**Rule:** FastHTML elements use HTML attribute names, not Python parameter names.
+
+**Key differences:**
+- Use `attrs.get('class')` not `attrs.get('cls')`
+- Use `attrs.get('id')` for the ID
+- Prefer `matches()` with predicates to avoid direct attribute access
+
+**Examples:**
+```python
+# ❌ WRONG - Python parameter name
+classes = element.attrs.get('cls', '')  # Returns None or ''
+
+# ✅ CORRECT - HTML attribute name
+classes = element.attrs.get('class', '')  # Returns actual classes
+
+# ✅ BETTER - Use predicates with matches()
+expected = Div(cls=Contains("active"))
+assert matches(element, expected)
+```
+
+---
+
+### UTR-15: 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. **Trace execution flow** - Apply UTR-12 to understand side effects
+5. **Gap analysis** - If tests exist, identify what's missing; otherwise identify all scenarios
+6. **Propose test plan** - List new/missing tests with brief explanations
+7. **Wait for approval** - User validates the test plan
+8. **Implement tests** - Write all approved tests
+9. **Verify** - Ensure tests follow naming conventions and structure
+10. **Ask before running** - Do NOT automatically run tests with pytest. Ask user first if they want to run the tests.
+
+---
+
+### UTR-16: Propose Parameterized Tests
+
+**Rule:** When proposing a test plan, systematically identify tests that can be parameterized and propose them as such.
+
+**When to parameterize:**
+- Tests that follow the same pattern with different input values
+- Tests that verify the same behavior for different sides/directions (left/right, up/down)
+- Tests that check the same logic with different states (visible/hidden, enabled/disabled)
+- Tests that validate the same method with different valid inputs
+
+**How to identify candidates:**
+1. Look for tests with similar names differing only by a value (e.g., `test_left_panel_...` and `test_right_panel_...`)
+2. Look for tests that have identical structure but different parameters
+3. Look for combinatorial scenarios (side × state combinations)
+
+**How to propose:**
+In your test plan, explicitly show:
+1. The individual tests that would be written without parameterization
+2. The parameterized version with all test cases
+3. The reduction in test count
+
+**Example proposal:**
+
+```
+**Without parameterization (4 tests):**
+- test_i_can_toggle_left_panel_from_visible_to_hidden
+- test_i_can_toggle_left_panel_from_hidden_to_visible
+- test_i_can_toggle_right_panel_from_visible_to_hidden
+- test_i_can_toggle_right_panel_from_hidden_to_visible
+
+**With parameterization (1 test, 4 cases):**
+@pytest.mark.parametrize("side, initial, expected", [
+    ("left", True, False),
+    ("left", False, True),
+    ("right", True, False),
+    ("right", False, True),
+])
+def test_i_can_toggle_panel_visibility(...)
+
+**Result:** 1 test instead of 4, same coverage
+```
+
+**Benefits:**
+- Reduces code duplication
+- Makes it easier to add new test cases
+- Improves maintainability
+- Makes the test matrix explicit
+
+---
+
+## 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 `/developer-control` to switch to control development mode
+- Use `/technical-writer` to switch to documentation mode
+- Use `/reset` to return to default Claude Code mode

.gitignore

@@ -25,6 +25,7 @@ tools.db
 .idea_bak
 **/*.prof
 **/*.db
+screenshot*
 
 # Created by .ignore support plugin (hsz.mobi)
 ### Python template

CLAUDE.md

@@ -95,6 +95,47 @@ def test_i_cannot_create_command_with_empty_name():
 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
+
+### `/developer-control` - Control Development Mode
+**Use for:** Developing UI controls in the controls directory
+
+Specialized mode with rules for:
+- Control class inheritance (`MultipleInstance`, `SingleInstance`, `UniqueInstance`)
+- Commands class pattern with `BaseCommands`
+- State management with `DbObject`
+- Rendering with `render()` and `__ft__()`
+- Helper usage (`mk.button`, `mk.icon`, `mk.label`)
+- Sub-component composition
+
+### `/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
@@ -143,7 +184,7 @@ pip install -e .
 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`: 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

Makefile

@@ -18,11 +18,15 @@ clean-tests:
 	rm -rf .sesskey
 	rm -rf tests/.sesskey
 	rm -rf tests/*.db
+	rm -rf tests/.myFastHtmlDb
+
+clean-app:
+	rm -rf src/.myFastHtmlDb
 
 # Alias to clean everything
-clean: clean-build clean-tests
+clean: clean-build clean-tests clean-app
 
 clean-all : clean
 	rm -rf src/.sesskey
 	rm -rf src/Users.db
-	rm -rf src/.myFastHtmlDb
+

README.md

@@ -53,7 +53,7 @@ def get_homepage():
 
 
 if __name__ == "__main__":
-  serve(port=5002)
+  serve(port=5010)
 
 
 ```
@@ -86,7 +86,7 @@ def get_homepage():
 
 
 if __name__ == "__main__":
-  serve(port=5002)
+  serve(port=5010)
 ```
 
 - When the button is clicked, the `say_hello` command will be executed, and the server will return the response.
@@ -957,3 +957,4 @@ user.find_element("textarea[name='message']")
 * 0.1.0 : First release
 * 0.2.0 : Updated to myauth 0.2.0
 * 0.3.0 : Added Bindings support
+* 0.4.0 : First version with Datagrid + new static file server

benchmarks/profile_datagrid.py

@@ -0,0 +1,141 @@
+#!/usr/bin/env python3
+"""
+DataGrid Performance Profiling Script
+
+Generates a 1000-row DataFrame and profiles the DataGrid.render() method
+to identify performance bottlenecks.
+
+Usage:
+    python benchmarks/profile_datagrid.py
+"""
+
+import cProfile
+import pstats
+from io import StringIO
+
+import numpy as np
+import pandas as pd
+
+from myfasthtml.controls.DataGrid import DataGrid
+from myfasthtml.core.instances import SingleInstance, InstancesManager
+
+
+def generate_test_dataframe(rows=1000, cols=10):
+  """Generate a test DataFrame with mixed column types."""
+  np.random.seed(42)
+  
+  data = {
+      'ID': range(rows),
+      'Name': [f'Person_{i}' for i in range(rows)],
+      'Email': [f'user{i}@example.com' for i in range(rows)],
+      'Age': np.random.randint(18, 80, rows),
+      'Salary': np.random.uniform(30000, 150000, rows),
+      'Active': np.random.choice([True, False], rows),
+      'Score': np.random.uniform(0, 100, rows),
+      'Department': np.random.choice(['Sales', 'Engineering', 'Marketing', 'HR'], rows),
+      'Country': np.random.choice(['France', 'USA', 'Germany', 'UK', 'Spain'], rows),
+      'Rating': np.random.uniform(1.0, 5.0, rows),
+  }
+  
+  # Add extra columns if needed
+  for i in range(cols - len(data)):
+    data[f'Extra_Col_{i}'] = np.random.random(rows)
+  
+  return pd.DataFrame(data)
+
+
+def profile_datagrid_render(df):
+  """Profile the DataGrid render method."""
+  
+  # Clear instances to start fresh
+  InstancesManager.instances.clear()
+  
+  # Create a minimal session
+  session = {
+      "user_info": {
+          "id": "test_tenant_id",
+          "email": "test@email.com",
+          "username": "test user",
+          "role": [],
+      }
+  }
+  
+  # Create root instance as parent
+  root = SingleInstance(parent=None, session=session, _id="profile-root")
+  
+  # Create DataGrid (parent, settings, save_state, _id)
+  datagrid = DataGrid(root)
+  datagrid.init_from_dataframe(df)
+  
+  # Profile the render call
+  profiler = cProfile.Profile()
+  profiler.enable()
+  
+  # Execute render
+  html_output = datagrid.render()
+  
+  profiler.disable()
+  
+  return profiler, html_output
+
+
+def print_profile_stats(profiler, top_n=30):
+  """Print formatted profiling statistics."""
+  s = StringIO()
+  stats = pstats.Stats(profiler, stream=s)
+  
+  print("\n" + "=" * 80)
+  print("PROFILING RESULTS - Top {} functions by cumulative time".format(top_n))
+  print("=" * 80 + "\n")
+  
+  stats.sort_stats('cumulative')
+  stats.print_stats(top_n)
+  
+  output = s.getvalue()
+  print(output)
+  
+  # Extract total time
+  for line in output.split('\n'):
+    if 'function calls' in line:
+      print("\n" + "=" * 80)
+      print("SUMMARY")
+      print("=" * 80)
+      print(line)
+      break
+  
+  print("\n" + "=" * 80)
+  print("Top 10 by total time spent (time * ncalls)")
+  print("=" * 80 + "\n")
+  
+  s = StringIO()
+  stats = pstats.Stats(profiler, stream=s)
+  stats.sort_stats('tottime')
+  stats.print_stats(10)
+  print(s.getvalue())
+
+
+def main():
+  print("Generating test DataFrame (1000 rows × 10 columns)...")
+  df = generate_test_dataframe(rows=1000, cols=10)
+  print(f"DataFrame shape: {df.shape}")
+  print(f"Memory usage: {df.memory_usage(deep=True).sum() / 1024:.2f} KB\n")
+  
+  print("Profiling DataGrid.render()...")
+  profiler, html_output = profile_datagrid_render(df)
+  
+  print(f"\nHTML output length: {len(str(html_output))} characters")
+  
+  print_profile_stats(profiler, top_n=30)
+  
+  # Clean up instances
+  InstancesManager.reset()
+  
+  print("\n✅ Profiling complete!")
+  print("\nNext steps:")
+  print("1. Identify the slowest functions in the 'cumulative time' section")
+  print("2. Look for functions called many times (high ncalls)")
+  print("3. Focus optimization on high cumtime + high ncalls functions")
+
+
+if __name__ == "__main__":
+  main()

docs/DataGrid.md

@@ -0,0 +1,601 @@
+# DataGrid Component
+
+## Introduction
+
+The DataGrid component provides a high-performance tabular data display for your FastHTML application. It renders pandas
+DataFrames with interactive features like column resizing, reordering, and filtering, all powered by HTMX for seamless
+updates without page reloads.
+
+**Key features:**
+
+- Display tabular data from pandas DataFrames
+- Resizable columns with drag handles
+- Draggable columns for reordering
+- Real-time filtering with search bar
+- Virtual scrolling for large datasets (pagination with lazy loading)
+- Custom scrollbars for consistent cross-browser appearance
+- Optional state persistence per session
+
+**Common use cases:**
+
+- Data exploration and analysis dashboards
+- Admin interfaces with tabular data
+- Report viewers
+- Database table browsers
+- CSV/Excel file viewers
+
+## Quick Start
+
+Here's a minimal example showing a data table with a pandas DataFrame:
+
+```python
+import pandas as pd
+from fasthtml.common import *
+from myfasthtml.controls.DataGrid import DataGrid
+from myfasthtml.core.instances import RootInstance
+
+# Create sample data
+df = pd.DataFrame({
+    "Name": ["Alice", "Bob", "Charlie", "Diana"],
+    "Age": [25, 30, 35, 28],
+    "City": ["Paris", "London", "Berlin", "Madrid"]
+})
+
+# Create root instance and data grid
+root = RootInstance(session)
+grid = DataGrid(parent=root)
+grid.init_from_dataframe(df)
+
+# Render the grid
+return grid
+```
+
+This creates a complete data grid with:
+
+- A header row with column names ("Name", "Age", "City")
+- Data rows displaying the DataFrame content
+- A search bar for filtering data
+- Resizable column borders (drag to resize)
+- Draggable columns (drag headers to reorder)
+- Custom scrollbars for horizontal and vertical scrolling
+
+**Note:** The DataGrid automatically detects column types (Text, Number, Bool, Datetime) from the DataFrame dtypes and
+applies appropriate formatting.
+
+## Basic Usage
+
+### Visual Structure
+
+The DataGrid component consists of a filter bar, a table with header/body/footer, and custom scrollbars:
+
+```
+┌────────────────────────────────────────────────────────────┐
+│  Filter Bar                                                │
+│  ┌─────────────────────────────────────────────┐  ┌────┐   │
+│  │ 🔍 Search...                                │  │  ✕ │   │
+│  └─────────────────────────────────────────────┘  └────┘   │
+├────────────────────────────────────────────────────────────┤
+│  Header Row                                            ▲   │
+│  ┌──────────┬──────────┬──────────┬──────────┐         │   │
+│  │ Column 1 │ Column 2 │ Column 3 │ Column 4 │         █   │
+│  └──────────┴──────────┴──────────┴──────────┘         █   │
+├────────────────────────────────────────────────────────█───┤
+│  Body (scrollable)                                     █   │
+│  ┌──────────┬──────────┬──────────┬──────────┐         █   │
+│  │ Value    │ Value    │ Value    │ Value    │         █   │
+│  ├──────────┼──────────┼──────────┼──────────┤         │   │
+│  │ Value    │ Value    │ Value    │ Value    │         │   │
+│  ├──────────┼──────────┼──────────┼──────────┤         ▼   │
+│  │ Value    │ Value    │ Value    │ Value    │             │
+│  └──────────┴──────────┴──────────┴──────────┘             │
+│  ◄═══════════════════════════════════════════════════════► │
+└────────────────────────────────────────────────────────────┘
+```
+
+**Component details:**
+
+| Element    | Description                                           |
+|------------|-------------------------------------------------------|
+| Filter bar | Search input with filter mode toggle and clear button |
+| Header row | Column names with resize handles and drag support     |
+| Body       | Scrollable data rows with virtual pagination          |
+| Scrollbars | Custom vertical and horizontal scrollbars             |
+
+### Creating a DataGrid
+
+The DataGrid is a `MultipleInstance`, meaning you can create multiple independent grids in your application. Create it
+by providing a parent instance:
+
+```python
+grid = DataGrid(parent=root_instance)
+
+# Or with a custom ID
+grid = DataGrid(parent=root_instance, _id="my-grid")
+
+# Or with state persistence enabled
+grid = DataGrid(parent=root_instance, save_state=True)
+```
+
+**Parameters:**
+
+- `parent`: Parent instance (required)
+- `_id` (str, optional): Custom identifier for the grid
+- `save_state` (bool, optional): Enable state persistence (column widths, order, filters)
+
+### Loading Data
+
+Use the `init_from_dataframe()` method to load data into the grid:
+
+```python
+import pandas as pd
+
+# Create a DataFrame
+df = pd.DataFrame({
+    "Product": ["Laptop", "Phone", "Tablet"],
+    "Price": [999.99, 699.99, 449.99],
+    "In Stock": [True, False, True]
+})
+
+# Load into grid
+grid.init_from_dataframe(df)
+```
+
+**Column type detection:**
+
+The DataGrid automatically detects column types from pandas dtypes:
+
+| pandas dtype       | DataGrid type | Display                 |
+|--------------------|---------------|-------------------------|
+| `int64`, `float64` | Number        | Right-aligned           |
+| `bool`             | Bool          | Checkbox icon           |
+| `datetime64`       | Datetime      | Formatted date          |
+| `object`, others   | Text          | Left-aligned, truncated |
+
+### Row Index Column
+
+By default, the DataGrid displays a row index column on the left. This can be useful for identifying rows:
+
+```python
+# Row index is enabled by default
+grid._state.row_index = True
+
+# To disable the row index column
+grid._state.row_index = False
+grid.init_from_dataframe(df)
+```
+
+## Column Features
+
+### Resizing Columns
+
+Users can resize columns by dragging the border between column headers:
+
+- **Drag handle location**: Right edge of each column header
+- **Minimum width**: 30 pixels
+- **Persistence**: Resized widths are automatically saved when `save_state=True`
+
+The resize interaction:
+
+1. Hover over the right edge of a column header (cursor changes)
+2. Click and drag to resize
+3. Release to confirm the new width
+4. Double-click to reset to default width
+
+**Programmatic width control:**
+
+```python
+# Set a specific column width
+for col in grid._state.columns:
+  if col.col_id == "my_column":
+    col.width = 200  # pixels
+    break
+```
+
+### Moving Columns
+
+Users can reorder columns by dragging column headers:
+
+1. Click and hold a column header
+2. Drag to the desired position
+3. Release to drop the column
+
+The columns animate smoothly during the move, and other columns shift to accommodate the new position.
+
+**Note:** Column order is persisted when `save_state=True`.
+
+### Column Visibility
+
+Columns can be hidden programmatically:
+
+```python
+# Hide a specific column
+for col in grid._state.columns:
+  if col.col_id == "internal_id":
+    col.visible = False
+    break
+```
+
+Hidden columns are not rendered but remain in the state, allowing them to be shown again later.
+
+## Filtering
+
+### Using the Search Bar
+
+The DataGrid includes a built-in search bar that filters rows in real-time:
+
+```
+┌─────────────────────────────────────────────┐  ┌────┐
+│ 🔍 Search...                                │  │  ✕ │
+└─────────────────────────────────────────────┘  └────┘
+  │                                                 │
+  │                                                 └── Clear button
+  └── Filter mode icon (click to cycle)
+```
+
+**How filtering works:**
+
+1. Type in the search box
+2. The grid filters rows where ANY visible column contains the search text
+3. Matching text is highlighted in the results
+4. Click the ✕ button to clear the filter
+
+### Filter Modes
+
+Click the filter icon to cycle through three modes:
+
+| Mode       | Icon | Description                        |
+|------------|------|------------------------------------|
+| **Filter** | 🔍   | Hides non-matching rows            |
+| **Search** | 🔎   | Highlights matches, shows all rows |
+| **AI**     | 🧠   | AI-powered search (future feature) |
+
+The current mode affects how results are displayed:
+
+- **Filter mode**: Only matching rows are shown
+- **Search mode**: All rows shown, matches highlighted
+
+## Advanced Features
+
+### State Persistence
+
+Enable state persistence to save user preferences across sessions:
+
+```python
+# Enable state persistence
+grid = DataGrid(parent=root, save_state=True)
+```
+
+**What gets persisted:**
+
+| State             | Description                     |
+|-------------------|---------------------------------|
+| Column widths     | User-resized column sizes       |
+| Column order      | User-defined column arrangement |
+| Column visibility | Which columns are shown/hidden  |
+| Sort order        | Current sort configuration      |
+| Filter state      | Active filters                  |
+
+### Virtual Scrolling
+
+For large datasets, the DataGrid uses virtual scrolling with lazy loading:
+
+- Only a subset of rows (page) is rendered initially
+- As the user scrolls down, more rows are loaded automatically
+- Uses Intersection Observer API for efficient scroll detection
+- Default page size: configurable via `DATAGRID_PAGE_SIZE`
+
+This allows smooth performance even with thousands of rows.
+
+### Text Size
+
+Customize the text size for the grid body:
+
+```python
+# Available sizes: "xs", "sm", "md", "lg"
+grid._settings.text_size = "sm"  # default
+```
+
+### CSS Customization
+
+The DataGrid uses CSS classes that you can customize:
+
+| Class                       | Element                 |
+|-----------------------------|-------------------------|
+| `dt2-table-wrapper`         | Root table container    |
+| `dt2-table`                 | Table element           |
+| `dt2-header-container`      | Header wrapper          |
+| `dt2-body-container`        | Scrollable body wrapper |
+| `dt2-footer-container`      | Footer wrapper          |
+| `dt2-row`                   | Table row               |
+| `dt2-cell`                  | Table cell              |
+| `dt2-resize-handle`         | Column resize handle    |
+| `dt2-scrollbars-vertical`   | Vertical scrollbar      |
+| `dt2-scrollbars-horizontal` | Horizontal scrollbar    |
+| `dt2-highlight-1`           | Search match highlight  |
+
+**Example customization:**
+
+```css
+/* Change highlight color */
+.dt2-highlight-1 {
+    background-color: #fef08a;
+    font-weight: bold;
+}
+
+/* Customize row hover */
+.dt2-row:hover {
+    background-color: #f3f4f6;
+}
+
+/* Style the scrollbars */
+.dt2-scrollbars-vertical,
+.dt2-scrollbars-horizontal {
+    background-color: #3b82f6;
+    border-radius: 4px;
+}
+```
+
+## Examples
+
+### Example 1: Simple Data Table
+
+A basic data table displaying product information:
+
+```python
+import pandas as pd
+from fasthtml.common import *
+from myfasthtml.controls.DataGrid import DataGrid
+from myfasthtml.core.instances import RootInstance
+
+# Sample product data
+df = pd.DataFrame({
+    "Product": ["Laptop Pro", "Wireless Mouse", "USB-C Hub", "Monitor 27\"", "Keyboard"],
+    "Category": ["Computers", "Accessories", "Accessories", "Displays", "Accessories"],
+    "Price": [1299.99, 49.99, 79.99, 399.99, 129.99],
+    "In Stock": [True, True, False, True, True],
+    "Rating": [4.5, 4.2, 4.8, 4.6, 4.3]
+})
+
+# Create and configure grid
+root = RootInstance(session)
+grid = DataGrid(parent=root, _id="products-grid")
+grid.init_from_dataframe(df)
+
+# Render
+return Div(
+  H1("Product Catalog"),
+  grid,
+  cls="p-4"
+)
+```
+
+### Example 2: Large Dataset with Filtering
+
+Handling a large dataset with virtual scrolling and filtering:
+
+```python
+import pandas as pd
+import numpy as np
+from fasthtml.common import *
+from myfasthtml.controls.DataGrid import DataGrid
+from myfasthtml.core.instances import RootInstance
+
+# Generate large dataset (10,000 rows)
+np.random.seed(42)
+n_rows = 10000
+
+df = pd.DataFrame({
+    "ID": range(1, n_rows + 1),
+    "Name": [f"Item_{i}" for i in range(n_rows)],
+    "Value": np.random.uniform(10, 1000, n_rows).round(2),
+    "Category": np.random.choice(["A", "B", "C", "D"], n_rows),
+    "Active": np.random.choice([True, False], n_rows),
+    "Created": pd.date_range("2024-01-01", periods=n_rows, freq="h")
+})
+
+# Create grid with state persistence
+root = RootInstance(session)
+grid = DataGrid(parent=root, _id="large-dataset", save_state=True)
+grid.init_from_dataframe(df)
+
+return Div(
+  H1("Large Dataset Explorer"),
+  P(f"Displaying {n_rows:,} rows with virtual scrolling"),
+  grid,
+  cls="p-4",
+  style="height: 100vh;"
+)
+```
+
+**Note:** Virtual scrolling loads rows on demand as you scroll, ensuring smooth performance even with 10,000+ rows.
+
+### Example 3: Dashboard with Multiple Grids
+
+An application with multiple data grids in different tabs:
+
+```python
+import pandas as pd
+from fasthtml.common import *
+from myfasthtml.controls.DataGrid import DataGrid
+from myfasthtml.controls.TabsManager import TabsManager
+from myfasthtml.core.instances import RootInstance
+
+# Create data for different views
+sales_df = pd.DataFrame({
+    "Date": pd.date_range("2024-01-01", periods=30, freq="D"),
+    "Revenue": [1000 + i * 50 for i in range(30)],
+    "Orders": [10 + i for i in range(30)]
+})
+
+customers_df = pd.DataFrame({
+    "Customer": ["Acme Corp", "Tech Inc", "Global Ltd"],
+    "Country": ["USA", "UK", "Germany"],
+    "Total Spent": [15000, 12000, 8500]
+})
+
+# Create instances
+root = RootInstance(session)
+tabs = TabsManager(parent=root, _id="dashboard-tabs")
+
+# Create grids
+sales_grid = DataGrid(parent=root, _id="sales-grid")
+sales_grid.init_from_dataframe(sales_df)
+
+customers_grid = DataGrid(parent=root, _id="customers-grid")
+customers_grid.init_from_dataframe(customers_df)
+
+# Add to tabs
+tabs.create_tab("Sales", sales_grid)
+tabs.create_tab("Customers", customers_grid)
+
+return Div(
+  H1("Sales Dashboard"),
+  tabs,
+  cls="p-4"
+)
+```
+
+---
+
+## Developer Reference
+
+This section contains technical details for developers working on the DataGrid component itself.
+
+### State
+
+The DataGrid uses two state objects:
+
+**DatagridState** - Main state for grid data and configuration:
+
+| Name              | Type                      | Description                | Default |
+|-------------------|---------------------------|----------------------------|---------|
+| `sidebar_visible` | bool                      | Whether sidebar is visible | `False` |
+| `row_index`       | bool                      | Show row index column      | `True`  |
+| `columns`         | list[DataGridColumnState] | Column definitions         | `[]`    |
+| `rows`            | list[DataGridRowState]    | Row-specific states        | `[]`    |
+| `sorted`          | list                      | Sort configuration         | `[]`    |
+| `filtered`        | dict                      | Active filters             | `{}`    |
+| `selection`       | DatagridSelectionState    | Selection state            | -       |
+| `ne_df`           | DataFrame                 | The data (non-persisted)   | `None`  |
+
+**DatagridSettings** - User preferences:
+
+| Name                 | Type | Description        | Default |
+|----------------------|------|--------------------|---------|
+| `save_state`         | bool | Enable persistence | `False` |
+| `header_visible`     | bool | Show header row    | `True`  |
+| `filter_all_visible` | bool | Show filter bar    | `True`  |
+| `text_size`          | str  | Body text size     | `"sm"`  |
+
+### Column State
+
+Each column is represented by `DataGridColumnState`:
+
+| Name        | Type       | Description        | Default |
+|-------------|------------|--------------------|---------|
+| `col_id`    | str        | Column identifier  | -       |
+| `col_index` | int        | Index in DataFrame | -       |
+| `title`     | str        | Display title      | `None`  |
+| `type`      | ColumnType | Data type          | `Text`  |
+| `visible`   | bool       | Is column visible  | `True`  |
+| `usable`    | bool       | Is column usable   | `True`  |
+| `width`     | int        | Width in pixels    | `150`   |
+
+### Commands
+
+Available commands for programmatic control:
+
+| Name                   | Description                                 |
+|------------------------|---------------------------------------------|
+| `get_page(page_index)` | Load a specific page of data (lazy loading) |
+| `set_column_width()`   | Update column width after resize            |
+| `move_column()`        | Move column to new position                 |
+| `filter()`             | Apply current filter to grid                |
+
+### Public Methods
+
+| Method                                        | Description                            |
+|-----------------------------------------------|----------------------------------------|
+| `init_from_dataframe(df, init_state=True)`    | Load data from pandas DataFrame        |
+| `set_column_width(col_id, width)`             | Set column width programmatically      |
+| `move_column(source_col_id, target_col_id)`   | Move column to new position            |
+| `filter()`                                    | Apply filter and return partial render |
+| `render()`                                    | Render the complete grid               |
+| `render_partial(fragment, redraw_scrollbars)` | Render only part of the grid           |
+
+### High Level Hierarchical Structure
+
+```
+Div(id="{id}", cls="grid")
+├── Div (filter bar)
+│   └── DataGridQuery                    # Filter/search component
+├── Div(id="tw_{id}", cls="dt2-table-wrapper")
+│   ├── Div(id="t_{id}", cls="dt2-table")
+│   │   ├── Div (dt2-header-container)
+│   │   │   └── Div(id="th_{id}", cls="dt2-row dt2-header")
+│   │   │       ├── Div (dt2-cell)       # Column 1 header
+│   │   │       ├── Div (dt2-cell)       # Column 2 header
+│   │   │       └── ...
+│   │   ├── Div(id="tb_{id}", cls="dt2-body-container")
+│   │   │   └── Div (dt2-body)
+│   │   │       ├── Div (dt2-row)        # Data row 1
+│   │   │       ├── Div (dt2-row)        # Data row 2
+│   │   │       └── ...
+│   │   └── Div (dt2-footer-container)
+│   │       └── Div (dt2-row dt2-header) # Footer row
+│   └── Div (dt2-scrollbars)
+│       ├── Div (dt2-scrollbars-vertical-wrapper)
+│       │   └── Div (dt2-scrollbars-vertical)
+│       └── Div (dt2-scrollbars-horizontal-wrapper)
+│           └── Div (dt2-scrollbars-horizontal)
+└── Script                                # Initialization script
+```
+
+### Element IDs
+
+| Pattern               | Description                         |
+|-----------------------|-------------------------------------|
+| `{id}`                | Root grid container                 |
+| `tw_{id}`             | Table wrapper (scrollbar container) |
+| `t_{id}`              | Table element                       |
+| `th_{id}`             | Header row                          |
+| `tb_{id}`             | Body container                      |
+| `tf_{id}`             | Footer row                          |
+| `tsm_{id}`            | Selection Manager                   |
+| `tr_{id}-{row_index}` | Individual data row                 |
+
+### Internal Methods
+
+These methods are used internally for rendering:
+
+| Method                                      | Description                            |
+|---------------------------------------------|----------------------------------------|
+| `mk_headers()`                              | Renders the header row                 |
+| `mk_body()`                                 | Renders the body with first page       |
+| `mk_body_container()`                       | Renders the scrollable body container  |
+| `mk_body_content_page(page_index)`          | Renders a specific page of rows        |
+| `mk_body_cell(col_pos, row_index, col_def)` | Renders a single cell                  |
+| `mk_body_cell_content(...)`                 | Renders cell content with highlighting |
+| `mk_footers()`                              | Renders the footer row                 |
+| `mk_table()`                                | Renders the complete table structure   |
+| `mk_aggregation_cell(...)`                  | Renders footer aggregation cell        |
+| `_get_filtered_df()`                        | Returns filtered and sorted DataFrame  |
+| `_apply_sort(df)`                           | Applies sort configuration             |
+| `_apply_filter(df)`                         | Applies filter configuration           |
+
+### DataGridQuery Component
+
+The filter bar is a separate component (`DataGridQuery`) with its own state:
+
+| State Property | Type | Description                             | Default    |
+|----------------|------|-----------------------------------------|------------|
+| `filter_type`  | str  | Current mode ("filter", "search", "ai") | `"filter"` |
+| `query`        | str  | Current search text                     | `None`     |
+
+**Commands:**
+
+| Command                | Description                 |
+|------------------------|-----------------------------|
+| `change_filter_type()` | Cycle through filter modes  |
+| `on_filter_changed()`  | Handle search input changes |
+| `on_cancel_query()`    | Clear the search query      |

docs/Datagrid Formulas.md

@@ -0,0 +1,365 @@
+# DataGrid Formulas
+
+## Overview
+
+The DataGrid formula system adds computed columns to the DataGrid. A formula column applies a single expression to every
+row, producing derived values from existing data — within the same table or across tables.
+
+The system is designed for:
+
+- **Column-level formulas**: one formula per column, applied to all rows
+- **Cross-table references**: direct syntax to reference columns from other tables
+- **Reactive recalculation**: dirty flag propagation with page-aware computation
+- **Cell-level overrides** (planned): individual cells can override the column formula
+
+## Formula Language
+
+### Basic Syntax
+
+A formula is an expression that references columns with `{ColumnName}` and produces a value for each row:
+
+```
+{Price} * {Quantity}
+```
+
+References use curly braces `{}` to distinguish column names from keywords and functions. Column names are matched by ID
+or title.
+
+### Operators
+
+#### Arithmetic
+
+| Operator | Description    | Example                |
+|----------|----------------|------------------------|
+| `+`      | Addition       | `{Price} + {Tax}`      |
+| `-`      | Subtraction    | `{Total} - {Discount}` |
+| `*`      | Multiplication | `{Price} * {Quantity}` |
+| `/`      | Division       | `{Total} / {Count}`    |
+| `%`      | Modulo         | `{Value} % 2`          |
+| `^`      | Power          | `{Base} ^ 2`           |
+
+#### Comparison
+
+| Operator     | Description        | Example                         |
+|--------------|--------------------|---------------------------------|
+| `==`         | Equal              | `{Status} == "active"`          |
+| `!=`         | Not equal          | `{Status} != "deleted"`         |
+| `>`          | Greater than       | `{Price} > 100`                 |
+| `<`          | Less than          | `{Stock} < 10`                  |
+| `>=`         | Greater or equal   | `{Score} >= 80`                 |
+| `<=`         | Less or equal      | `{Age} <= 18`                   |
+| `contains`   | String contains    | `{Name} contains "Corp"`        |
+| `startswith` | String starts with | `{Code} startswith "ERR"`       |
+| `endswith`   | String ends with   | `{File} endswith ".csv"`        |
+| `in`         | Value in list      | `{Status} in ["active", "new"]` |
+| `between`    | Value in range     | `{Age} between 18 and 65`       |
+| `isempty`    | Value is empty     | `{Notes} isempty`               |
+| `isnotempty` | Value is not empty | `{Email} isnotempty`            |
+| `isnan`      | Value is NaN       | `{Score} isnan`                 |
+
+#### Logical
+
+| Operator | Description | Example                               |
+|----------|-------------|---------------------------------------|
+| `and`    | Logical AND | `{Age} > 18 and {Status} == "active"` |
+| `or`     | Logical OR  | `{Type} == "A" or {Type} == "B"`      |
+| `not`    | Negation    | `not {Status} == "deleted"`           |
+
+Parentheses control precedence: `({Type} == "A" or {Type} == "B") and {Active} == True`
+
+### Conditions (suffix-if)
+
+Conditions use a **suffix-if** syntax: the result expression comes first, then the condition. This keeps the focus on
+the output, not the branching logic.
+
+#### Simple condition (no else — result is None when false)
+
+```
+{Price} * 0.8 if {Country} == "FR"
+```
+
+#### With else
+
+```
+{Price} * 0.8 if {Country} == "FR" else {Price}
+```
+
+#### Chained conditions
+
+```
+{Price} * 0.8 if {Country} == "FR" else {Price} * 0.9 if {Country} == "DE" else {Price}
+```
+
+#### With logical operators
+
+```
+{Price} * 0.8 if {Country} == "FR" and {Quantity} > 10 else {Price}
+```
+
+#### With grouping
+
+```
+{Price} * 0.8 if ({Country} == "FR" or {Country} == "DE") and {Quantity} > 10
+```
+
+### Functions
+
+#### Math
+
+| Function          | Description           | Example                       |
+|-------------------|-----------------------|-------------------------------|
+| `round(expr, n)`  | Round to n decimals   | `round({Price} * 1.2, 2)`     |
+| `abs(expr)`       | Absolute value        | `abs({Balance})`              |
+| `min(expr, expr)` | Minimum of two values | `min({Price}, {MaxPrice})`    |
+| `max(expr, expr)` | Maximum of two values | `max({Score}, 0)`             |
+| `sum(expr, ...)`  | Sum of values         | `sum({Q1}, {Q2}, {Q3}, {Q4})` |
+| `avg(expr, ...)`  | Average of values     | `avg({Q1}, {Q2}, {Q3}, {Q4})` |
+
+#### Text
+
+| Function            | Description         | Example                        |
+|---------------------|---------------------|--------------------------------|
+| `upper(expr)`       | Uppercase           | `upper({Name})`                |
+| `lower(expr)`       | Lowercase           | `lower({Email})`               |
+| `len(expr)`         | String length       | `len({Description})`           |
+| `concat(expr, ...)` | Concatenate strings | `concat({First}, " ", {Last})` |
+| `trim(expr)`        | Remove whitespace   | `trim({Input})`                |
+| `left(expr, n)`     | First n characters  | `left({Code}, 3)`              |
+| `right(expr, n)`    | Last n characters   | `right({Phone}, 4)`            |
+
+#### Date
+
+| Function               | Description        | Example                        |
+|------------------------|--------------------|--------------------------------|
+| `year(expr)`           | Extract year       | `year({CreatedAt})`            |
+| `month(expr)`          | Extract month      | `month({CreatedAt})`           |
+| `day(expr)`            | Extract day        | `day({CreatedAt})`             |
+| `today()`              | Current date       | `datediff({DueDate}, today())` |
+| `datediff(expr, expr)` | Difference in days | `datediff({End}, {Start})`     |
+
+#### Aggregation (for cross-table contexts)
+
+| Function      | Description  | Example                                             |
+|---------------|--------------|-----------------------------------------------------|
+| `sum(expr)`   | Sum values   | `sum({Orders.Amount WHERE Orders.ClientId = Id})`   |
+| `count(expr)` | Count values | `count({Orders.Id WHERE Orders.ClientId = Id})`     |
+| `avg(expr)`   | Average      | `avg({Reviews.Score WHERE Reviews.ProductId = Id})` |
+| `min(expr)`   | Minimum      | `min({Bids.Price WHERE Bids.ItemId = Id})`          |
+| `max(expr)`   | Maximum      | `max({Bids.Price WHERE Bids.ItemId = Id})`          |
+
+## Cross-Table References
+
+### Direct Reference
+
+Reference a column from another table using `{TableName.ColumnName}`:
+
+```
+{Products.Price} * {Quantity}
+```
+
+### Join Resolution (implicit)
+
+When referencing another table without a WHERE clause, the join is resolved automatically:
+
+1. **By `id` column**: if both tables have a column named `id`, rows are matched on equal `id` values
+2. **By row index**: if no `id` column exists in both tables, rows are matched by their internal row index (stable
+   across sort/filter)
+
+### Explicit Join (WHERE clause)
+
+For explicit control over which row of the other table to use:
+
+```
+{Products.Price WHERE Products.Code = ProductCode} * {Quantity}
+```
+
+Inside the WHERE clause:
+
+- `Products.Code` refers to a column in the referenced table
+- `ProductCode` (no `Table.` prefix) refers to a column in the current table
+
+### Aggregation with Cross-Table
+
+When a cross-table reference matches multiple rows, use an aggregation function:
+
+```
+sum({OrderLines.Amount WHERE OrderLines.OrderId = Id})
+```
+
+Without aggregation, a multi-row match returns the first matching value.
+
+## Calculation Engine
+
+### Dependency Graph (DAG)
+
+The formula system maintains a **Directed Acyclic Graph** of dependencies between columns:
+
+- **Nodes**: each formula column is a node, identified by `table_name.column_id`
+- **Edges**: if column A's formula references column B, an edge B → A exists ("A depends on B")
+- Both directions are tracked:
+    - **Precedents**: columns that a formula reads from
+    - **Dependents**: columns that need recalculation when this column changes
+
+Cross-table references create edges that span DataGrid instances, managed at the `DataGridsManager` level.
+
+### Dirty Flag Propagation
+
+When a source column's data changes:
+
+1. The source column is marked **dirty**
+2. All direct dependents are marked dirty
+3. Propagation continues recursively through the DAG
+4. Each dirty column maintains a **dirty row set**: the specific row indices that need recalculation
+
+This propagation is **immediate** (fast — only flag marking, no computation).
+
+### Recalculation Strategy (Hybrid)
+
+Actual computation is **deferred to rendering time**:
+
+1. On value change → dirty flags propagate instantly through the DAG
+2. On page render (`mk_body_content_page`) → only dirty rows within the visible page (up to 1000 rows) are recalculated
+3. Off-screen pages remain dirty until scrolled into view
+4. Calculation follows **topological order** of the DAG to ensure precedents are computed before dependents
+
+### Cycle Detection
+
+Before adding a formula, the engine checks for cycles in the DAG using Kahn's algorithm during topological sort. If a
+cycle is detected:
+
+- The formula is **rejected**
+- The editor displays an error identifying the circular dependency chain
+- The previous formula (if any) remains unchanged
+
+### Caching
+
+Each formula column caches its computed values:
+
+- Results are stored in `ns_fast_access[col_id]` alongside raw data columns
+- The dirty row set tracks which cached values are stale
+- Non-dirty rows return their cached value without re-evaluation
+- Cache is invalidated per-row when source data changes
+
+## Evaluation
+
+### Row-by-Row Execution
+
+Formulas are evaluated **row-by-row** within the page being rendered. For each row:
+
+1. Resolve column references `{ColumnName}` to the cell value at the current row index
+2. Resolve cross-table references `{Table.Column}` via the join mechanism
+3. Evaluate the expression with resolved values
+4. Store the result in the cache (`ns_fast_access`)
+
+### Parser
+
+The formula language uses a **custom grammar** parsed with Lark (consistent with the formatting DSL). The parser:
+
+1. Tokenizes the formula string
+2. Builds an AST (Abstract Syntax Tree)
+3. Transforms the AST into an evaluable representation
+4. Extracts column references for dependency graph registration
+
+### Error Handling
+
+| Error Type            | Behavior                                              |
+|-----------------------|-------------------------------------------------------|
+| Syntax error          | Editor highlights the error, formula not saved        |
+| Unknown column        | Editor highlights, autocompletion suggests fixes      |
+| Type mismatch         | Cell displays error indicator, other cells unaffected |
+| Division by zero      | Cell displays `#DIV/0!` or None                       |
+| Circular dependency   | Formula rejected, editor shows cycle chain            |
+| Cross-table not found | Editor highlights unknown table name                  |
+| No join match         | Cell displays None                                    |
+
+## User Interface
+
+### Creating a Formula Column
+
+Formula columns are created and edited through the **DataGridColumnsManager**:
+
+1. User opens the Columns Manager panel
+2. Adds a new column or edits an existing one
+3. Selects column type **"Formula"**
+4. A **DslEditor** (CodeMirror 5) opens for formula input
+5. The editor provides:
+    - **Syntax highlighting**: keywords, column references, functions, operators
+    - **Autocompletion**: column names (current table and other tables), function names, table names
+    - **Validation**: real-time syntax checking and dependency cycle detection
+    - **Error markers**: inline error indicators with descriptions
+
+### Formula Column Properties
+
+A formula column extends `DataGridColumnState` with:
+
+| Property                                                                  | Type          | Description                                    |
+|---------------------------------------------------------------------------|---------------|------------------------------------------------|
+| `formula`                                                                 | `str` or None | The formula expression (None for data columns) |
+| `col_type`                                                                | `ColumnType`  | Set to `ColumnType.Formula`                    |
+| Other properties (`title`, `visible`, `width`, `format`) remain unchanged |
+
+Formula columns are **read-only** in the grid body — cell values are computed, not editable. Formatting rules from the
+formatting DSL apply to formula columns like any other column.
+
+## Integration Points
+
+| Component                | Role                                                     |
+|--------------------------|----------------------------------------------------------|
+| `DataGridColumnState`    | Stores `formula` field and `ColumnType.Formula` type     |
+| `DatagridStore`          | `ns_fast_access` caches formula results as numpy arrays  |
+| `DataGridColumnsManager` | UI for creating/editing formula columns                  |
+| `DataGridsManager`       | Hosts the global dependency DAG across all tables        |
+| `DslEditor`              | CodeMirror 5 editor with highlighting and autocompletion |
+| `FormattingEngine`       | Applies formatting rules AFTER formula evaluation        |
+| `mk_body_content_page()` | Triggers formula computation for visible rows            |
+| `mk_body_cell_content()` | Reads computed values from `ns_fast_access`              |
+
+## Syntax Summary
+
+```
+# Basic arithmetic
+{Price} * {Quantity}
+
+# Function call
+round({Price} * 1.2, 2)
+
+# Simple condition (None if false)
+{Price} * 0.8 if {Country} == "FR"
+
+# Condition with else
+{Price} * 0.8 if {Country} == "FR" else {Price}
+
+# Chained conditions
+{Price} * 0.8 if {Country} == "FR" else {Price} * 0.9 if {Country} == "DE" else {Price}
+
+# Logical operators
+{Price} * 0.8 if {Country} == "FR" and {Quantity} > 10
+
+# Grouping
+{Price} * 0.8 if ({Country} == "FR" or {Country} == "DE") and {Quantity} > 10
+
+# Cross-table (implicit join on id)
+{Products.Price} * {Quantity}
+
+# Cross-table (explicit join)
+{Products.Price WHERE Products.Code = ProductCode} * {Quantity}
+
+# Cross-table aggregation
+sum({OrderLines.Amount WHERE OrderLines.OrderId = Id})
+
+# Nested functions
+round(avg({Q1}, {Q2}, {Q3}, {Q4}), 1)
+
+# Text operations
+concat(upper(left({FirstName}, 1)), ". ", {LastName})
+```
+
+## Future: Cell-Level Overrides
+
+The architecture supports adding cell-level formula overrides with ~20-30% additional work:
+
+- **Storage**: sparse dict `cell_formulas: dict[(col_id, row_index), str]` (same pattern as `cell_formats`)
+- **DAG**: new node type `table.column[row]` alongside existing `table.column` nodes
+- **Evaluation**: "does this cell have an override? If yes, use it. Otherwise, use the column formula."
+- **Node ID scheme**: designed to be extensible from the start (`table.column` for columns, `table.column[row]` for
+  cells)

docs/Dropdown.md

@@ -0,0 +1,557 @@
+# Dropdown Component
+
+## Introduction
+
+The Dropdown component provides an interactive dropdown menu that toggles open or closed when clicking a trigger button. It handles positioning, automatic closing behavior, and keyboard navigation out of the box.
+
+**Key features:**
+
+- Toggle open/close on button click
+- Automatic close when clicking outside
+- Keyboard support (ESC to close)
+- Configurable vertical position (above or below the button)
+- Configurable horizontal alignment (left, right, or center)
+- Session-based state management
+- HTMX-powered updates without page reload
+
+**Common use cases:**
+
+- Navigation menus
+- User account menus
+- Action menus (edit, delete, share)
+- Filter or sort options
+- Context-sensitive toolbars
+- Settings quick access
+
+## Quick Start
+
+Here's a minimal example showing a dropdown menu with navigation links:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Dropdown import Dropdown
+from myfasthtml.core.instances import RootInstance
+
+# Create root instance and dropdown
+root = RootInstance(session)
+
+dropdown = Dropdown(
+    parent=root,
+    button=Button("Menu", cls="btn"),
+    content=Ul(
+        Li(A("Home", href="/")),
+        Li(A("Settings", href="/settings")),
+        Li(A("Logout", href="/logout"))
+    )
+)
+
+# Render the dropdown
+return dropdown
+```
+
+This creates a complete dropdown with:
+
+- A "Menu" button that toggles the dropdown
+- A list of navigation links displayed below the button
+- Automatic closing when clicking outside the dropdown
+- ESC key support to close the dropdown
+
+**Note:** The dropdown opens below the button and aligns to the left by default. Users can click anywhere outside the dropdown to close it, or press ESC on the keyboard.
+
+## Basic Usage
+
+### Visual Structure
+
+The Dropdown component consists of a trigger button and a content panel:
+
+```
+Closed state:
+┌──────────────┐
+│   Button ▼   │
+└──────────────┘
+
+Open state (position="below", align="left"):
+┌──────────────┐
+│   Button ▼   │
+├──────────────┴─────────┐
+│  Dropdown Content      │
+│  - Option 1            │
+│  - Option 2            │
+│  - Option 3            │
+└────────────────────────┘
+
+Open state (position="above", align="right"):
+       ┌────────────────────────┐
+       │  Dropdown Content      │
+       │  - Option 1            │
+       │  - Option 2            │
+       ├──────────────┬─────────┘
+       │   Button ▲   │
+       └──────────────┘
+```
+
+**Component details:**
+
+| Element   | Description                                    |
+|-----------|------------------------------------------------|
+| Button    | Trigger element that toggles the dropdown      |
+| Content   | Panel containing the dropdown menu items       |
+| Wrapper   | Container with relative positioning for anchor |
+
+### Creating a Dropdown
+
+The Dropdown is a `MultipleInstance`, meaning you can create multiple independent dropdowns in your application. Create it by providing a parent instance:
+
+```python
+dropdown = Dropdown(parent=root_instance, button=my_button, content=my_content)
+
+# Or with a custom ID
+dropdown = Dropdown(parent=root_instance, button=my_button, content=my_content, _id="my-dropdown")
+```
+
+### Button and Content
+
+The dropdown requires two main elements:
+
+**Button:** The trigger element that users click to toggle the dropdown.
+
+```python
+# Simple text button
+dropdown = Dropdown(
+    parent=root,
+    button=Button("Click me", cls="btn btn-primary"),
+    content=my_content
+)
+
+# Button with icon
+dropdown = Dropdown(
+    parent=root,
+    button=Div(
+        icon_svg,
+        Span("Options"),
+        cls="flex items-center gap-2"
+    ),
+    content=my_content
+)
+
+# Just an icon
+dropdown = Dropdown(
+    parent=root,
+    button=icon_svg,
+    content=my_content
+)
+```
+
+**Content:** Any FastHTML element to display in the dropdown panel.
+
+```python
+# Simple list
+content = Ul(
+    Li("Option 1"),
+    Li("Option 2"),
+    Li("Option 3"),
+    cls="menu"
+)
+
+# Complex content with sections
+content = Div(
+    Div("User Actions", cls="font-bold p-2"),
+    Hr(),
+    Button("Edit Profile", cls="btn btn-ghost w-full"),
+    Button("Settings", cls="btn btn-ghost w-full"),
+    Hr(),
+    Button("Logout", cls="btn btn-error w-full")
+)
+```
+
+### Positioning Options
+
+The Dropdown supports two positioning parameters:
+
+**`position`** - Vertical position relative to the button:
+- `"below"` (default): Dropdown appears below the button
+- `"above"`: Dropdown appears above the button
+
+**`align`** - Horizontal alignment relative to the button:
+- `"left"` (default): Dropdown aligns to the left edge of the button
+- `"right"`: Dropdown aligns to the right edge of the button
+- `"center"`: Dropdown is centered relative to the button
+
+```python
+# Default: below + left
+dropdown = Dropdown(parent=root, button=btn, content=menu)
+
+# Above the button, aligned right
+dropdown = Dropdown(parent=root, button=btn, content=menu, position="above", align="right")
+
+# Below the button, centered
+dropdown = Dropdown(parent=root, button=btn, content=menu, position="below", align="center")
+```
+
+**Visual examples of all combinations:**
+
+```
+position="below", align="left"     position="below", align="center"     position="below", align="right"
+┌────────┐                              ┌────────┐                                      ┌────────┐
+│ Button │                              │ Button │                                      │ Button │
+├────────┴────┐                    ┌────┴────────┴────┐                    ┌────────────┴────────┤
+│ Content     │                    │     Content      │                    │           Content   │
+└─────────────┘                    └──────────────────┘                    └─────────────────────┘
+
+position="above", align="left"     position="above", align="center"     position="above", align="right"
+┌─────────────┐                    ┌──────────────────┐                    ┌─────────────────────┐
+│ Content     │                    │     Content      │                    │           Content   │
+├────────┬────┘                    └────┬────────┬────┘                    └────────────┬────────┤
+│ Button │                              │ Button │                                      │ Button │
+└────────┘                              └────────┘                                      └────────┘
+```
+
+## Advanced Features
+
+### Automatic Close Behavior
+
+The Dropdown automatically closes in two scenarios:
+
+**Click outside:** When the user clicks anywhere outside the dropdown, it closes automatically. This is handled by the Mouse component listening for global click events.
+
+**ESC key:** When the user presses the ESC key, the dropdown closes. This is handled by the Keyboard component.
+
+```python
+# Both behaviors are enabled by default - no configuration needed
+dropdown = Dropdown(parent=root, button=btn, content=menu)
+```
+
+**How it works internally:**
+
+- The `Mouse` component detects clicks and sends `is_inside` and `is_button` parameters
+- If `is_button` is true, the dropdown toggles
+- If `is_inside` is false (clicked outside), the dropdown closes
+- The `Keyboard` component listens for ESC and triggers the close command
+
+### Programmatic Control
+
+You can control the dropdown programmatically using its methods and commands:
+
+```python
+# Toggle the dropdown state
+dropdown.toggle()
+
+# Close the dropdown
+dropdown.close()
+
+# Access commands for use with other controls
+close_cmd = dropdown.commands.close()
+click_cmd = dropdown.commands.click()
+```
+
+**Using commands with buttons:**
+
+```python
+from myfasthtml.controls.helpers import mk
+
+# Create a button that closes the dropdown
+close_button = mk.button("Close", command=dropdown.commands.close())
+
+# Add it to the dropdown content
+dropdown = Dropdown(
+    parent=root,
+    button=Button("Menu"),
+    content=Div(
+        Ul(Li("Option 1"), Li("Option 2")),
+        close_button
+    )
+)
+```
+
+### CSS Customization
+
+The Dropdown uses CSS classes that you can customize:
+
+| Class                 | Element                               |
+|-----------------------|---------------------------------------|
+| `mf-dropdown-wrapper` | Container with relative positioning   |
+| `mf-dropdown-btn`     | Button wrapper                        |
+| `mf-dropdown`         | Dropdown content panel                |
+| `mf-dropdown-below`   | Applied when position="below"         |
+| `mf-dropdown-above`   | Applied when position="above"         |
+| `mf-dropdown-left`    | Applied when align="left"             |
+| `mf-dropdown-right`   | Applied when align="right"            |
+| `mf-dropdown-center`  | Applied when align="center"           |
+| `is-visible`          | Applied when dropdown is open         |
+
+**Example customization:**
+
+```css
+/* Change dropdown background and border */
+.mf-dropdown {
+    background-color: #1f2937;
+    border: 1px solid #374151;
+    border-radius: 0.5rem;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+}
+
+/* Add animation */
+.mf-dropdown {
+    opacity: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.mf-dropdown.is-visible {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+/* Style for above position */
+.mf-dropdown-above {
+    transform: translateY(10px);
+}
+
+.mf-dropdown-above.is-visible {
+    transform: translateY(0);
+}
+```
+
+## Examples
+
+### Example 1: Navigation Menu
+
+A simple navigation dropdown menu:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Dropdown import Dropdown
+
+dropdown = Dropdown(
+    parent=root,
+    button=Button("Navigation", cls="btn btn-ghost"),
+    content=Ul(
+        Li(A("Dashboard", href="/dashboard", cls="block p-2 hover:bg-base-200")),
+        Li(A("Projects", href="/projects", cls="block p-2 hover:bg-base-200")),
+        Li(A("Tasks", href="/tasks", cls="block p-2 hover:bg-base-200")),
+        Li(A("Reports", href="/reports", cls="block p-2 hover:bg-base-200")),
+        cls="menu p-2"
+    )
+)
+
+return dropdown
+```
+
+### Example 2: User Account Menu
+
+A user menu aligned to the right, typically placed in a header:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Dropdown import Dropdown
+
+# User avatar button
+user_button = Div(
+    Img(src="/avatar.png", cls="w-8 h-8 rounded-full"),
+    Span("John Doe", cls="ml-2"),
+    cls="flex items-center gap-2 cursor-pointer"
+)
+
+# Account menu content
+account_menu = Div(
+    Div(
+        Div("John Doe", cls="font-bold"),
+        Div("john@example.com", cls="text-sm opacity-60"),
+        cls="p-3 border-b"
+    ),
+    Ul(
+        Li(A("Profile", href="/profile", cls="block p-2 hover:bg-base-200")),
+        Li(A("Settings", href="/settings", cls="block p-2 hover:bg-base-200")),
+        Li(A("Billing", href="/billing", cls="block p-2 hover:bg-base-200")),
+        cls="menu p-2"
+    ),
+    Div(
+        A("Sign out", href="/logout", cls="block p-2 text-error hover:bg-base-200"),
+        cls="border-t"
+    ),
+    cls="w-56"
+)
+
+# Align right so it doesn't overflow the viewport
+dropdown = Dropdown(
+    parent=root,
+    button=user_button,
+    content=account_menu,
+    align="right"
+)
+
+return dropdown
+```
+
+### Example 3: Action Menu Above Button
+
+A dropdown that opens above the trigger, useful when the button is at the bottom of the screen:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Dropdown import Dropdown
+
+# Action button with icon
+action_button = Button(
+    Span("+", cls="text-xl"),
+    cls="btn btn-circle btn-primary"
+)
+
+# Quick actions menu
+actions_menu = Div(
+    Button("New Document", cls="btn btn-ghost btn-sm w-full justify-start"),
+    Button("Upload File", cls="btn btn-ghost btn-sm w-full justify-start"),
+    Button("Create Folder", cls="btn btn-ghost btn-sm w-full justify-start"),
+    Button("Import Data", cls="btn btn-ghost btn-sm w-full justify-start"),
+    cls="flex flex-col p-2 w-40"
+)
+
+# Open above and center-aligned
+dropdown = Dropdown(
+    parent=root,
+    button=action_button,
+    content=actions_menu,
+    position="above",
+    align="center"
+)
+
+return dropdown
+```
+
+### Example 4: Dropdown with Commands
+
+A dropdown containing action buttons that execute commands:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Dropdown import Dropdown
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+
+# Define actions
+def edit_item():
+    return "Editing..."
+
+def delete_item():
+    return "Deleted!"
+
+def share_item():
+    return "Shared!"
+
+# Create commands
+edit_cmd = Command("edit", "Edit item", edit_item)
+delete_cmd = Command("delete", "Delete item", delete_item)
+share_cmd = Command("share", "Share item", share_item)
+
+# Build menu with command buttons
+actions_menu = Div(
+    mk.button("Edit", command=edit_cmd, cls="btn btn-ghost btn-sm w-full justify-start"),
+    mk.button("Share", command=share_cmd, cls="btn btn-ghost btn-sm w-full justify-start"),
+    Hr(cls="my-1"),
+    mk.button("Delete", command=delete_cmd, cls="btn btn-ghost btn-sm w-full justify-start text-error"),
+    cls="flex flex-col p-2"
+)
+
+dropdown = Dropdown(
+    parent=root,
+    button=Button("Actions", cls="btn btn-sm"),
+    content=actions_menu
+)
+
+return dropdown
+```
+
+---
+
+## Developer Reference
+
+This section contains technical details for developers working on the Dropdown component itself.
+
+### State
+
+The Dropdown component maintains its state via `DropdownState`:
+
+| Name     | Type    | Description                  | Default |
+|----------|---------|------------------------------|---------|
+| `opened` | boolean | Whether dropdown is open     | `False` |
+
+### Commands
+
+Available commands for programmatic control:
+
+| Name      | Description                                     |
+|-----------|-------------------------------------------------|
+| `close()` | Closes the dropdown                             |
+| `click()` | Handles click events (toggle or close behavior) |
+
+**Command details:**
+
+- `close()`: Sets `opened` to `False` and returns updated content
+- `click()`: Receives `combination`, `is_inside`, and `is_button` parameters
+    - If `is_button` is `True`: toggles the dropdown
+    - If `is_inside` is `False`: closes the dropdown
+
+### Public Methods
+
+| Method     | Description                | Returns              |
+|------------|----------------------------|----------------------|
+| `toggle()` | Toggles open/closed state  | Content tuple        |
+| `close()`  | Closes the dropdown        | Content tuple        |
+| `render()` | Renders complete component | `Div`                |
+
+### Constructor Parameters
+
+| Parameter  | Type        | Description                        | Default   |
+|------------|-------------|------------------------------------|-----------|
+| `parent`   | Instance    | Parent instance (required)         | -         |
+| `content`  | Any         | Content to display in dropdown     | `None`    |
+| `button`   | Any         | Trigger element                    | `None`    |
+| `_id`      | str         | Custom ID for the instance         | `None`    |
+| `position` | str         | Vertical position: "below"/"above" | `"below"` |
+| `align`    | str         | Horizontal align: "left"/"right"/"center" | `"left"` |
+
+### High Level Hierarchical Structure
+
+```
+Div(id="{id}")
+├── Div(cls="mf-dropdown-wrapper")
+│   ├── Div(cls="mf-dropdown-btn")
+│   │   └── [Button content]
+│   └── Div(id="{id}-content", cls="mf-dropdown mf-dropdown-{position} mf-dropdown-{align} [is-visible]")
+│       └── [Dropdown content]
+├── Keyboard(id="{id}-keyboard")
+│   └── ESC → close command
+└── Mouse(id="{id}-mouse")
+    └── click → click command
+```
+
+### Element IDs
+
+| Name             | Description                    |
+|------------------|--------------------------------|
+| `{id}`           | Root dropdown container        |
+| `{id}-content`   | Dropdown content panel         |
+| `{id}-keyboard`  | Keyboard handler component     |
+| `{id}-mouse`     | Mouse handler component        |
+
+**Note:** `{id}` is the Dropdown instance ID (auto-generated or custom `_id`).
+
+### Internal Methods
+
+| Method          | Description                              |
+|-----------------|------------------------------------------|
+| `_mk_content()` | Renders the dropdown content panel       |
+| `on_click()`    | Handles click events from Mouse component |
+
+**Method details:**
+
+- `_mk_content()`:
+    - Builds CSS classes based on `position` and `align`
+    - Adds `is-visible` class when `opened` is `True`
+    - Returns a tuple containing the content `Div`
+
+- `on_click(combination, is_inside, is_button)`:
+    - Called by Mouse component on click events
+    - `is_button`: `True` if click was on the button
+    - `is_inside`: `True` if click was inside the dropdown
+    - Returns updated content for HTMX swap

docs/Keyboard Support.md

@@ -21,19 +21,47 @@
 
 ## Key Features
 
-### Multiple Simultaneous Triggers
+### Scope Control with `require_inside`
 
-**IMPORTANT**: If multiple elements listen to the same combination, **ALL** of them will be triggered:
+Each combination can declare whether it should only trigger when the focus is **inside** the registered element, or fire **globally** regardless of focus.
+
+| `require_inside` | Behavior |
+|-----------------|----------|
+| `true` (default) | Triggers only if focus is inside the element or one of its children |
+| `false` | Triggers regardless of where the focus is (global shortcut) |
 
 ```javascript
-add_keyboard_support('modal', '{"esc": "/close-modal"}');
-add_keyboard_support('editor', '{"esc": "/cancel-edit"}');
-add_keyboard_support('sidebar', '{"esc": "/hide-sidebar"}');
+// Only fires when focus is inside #tree-panel
+add_keyboard_support('tree-panel', '{"esc": {"hx-post": "/cancel", "require_inside": true}}');
 
-// Pressing ESC will trigger all 3 URLs simultaneously
+// Fires anywhere on the page
+add_keyboard_support('app', '{"ctrl+n": {"hx-post": "/new", "require_inside": false}}');
 ```
 
-This is crucial for use cases like the ESC key, which often needs to cancel multiple actions at once (close modal, cancel edit, hide panels, etc.).
+**Python usage (`Keyboard` component):**
+
+```python
+# Default: require_inside=True — fires only when inside the element
+Keyboard(self, _id="-kb").add("esc", self.commands.cancel())
+
+# Explicit global shortcut
+Keyboard(self, _id="-kb").add("ctrl+n", self.commands.new_item(), require_inside=False)
+```
+
+### Multiple Simultaneous Triggers
+
+**IMPORTANT**: If multiple elements listen to the same combination, all of them whose `require_inside` condition is satisfied will be triggered simultaneously:
+
+```javascript
+add_keyboard_support('modal',   '{"esc": {"hx-post": "/close-modal",  "require_inside": true}}');
+add_keyboard_support('editor',  '{"esc": {"hx-post": "/cancel-edit",  "require_inside": true}}');
+add_keyboard_support('sidebar', '{"esc": {"hx-post": "/hide-sidebar", "require_inside": false}}');
+
+// Pressing ESC while focus is inside 'editor':
+//   - 'modal'   → skipped (require_inside: true, focus not inside)
+//   - 'editor'  → triggered ✓
+//   - 'sidebar' → triggered ✓ (require_inside: false)
+```
 
 ### Smart Timeout Logic (Longest Match)
 
@@ -176,12 +204,55 @@ You can use any HTMX attribute in the configuration object:
 - `hx-target` - Target element selector
 - `hx-swap` - Swap strategy (innerHTML, outerHTML, etc.)
 - `hx-vals` - Additional values to send (object)
+- `hx-vals-extra` - Extra values to merge (see below)
 - `hx-headers` - Custom headers (object)
 - `hx-select` - Select specific content from response
 - `hx-confirm` - Confirmation message
 
 All other `hx-*` attributes are supported and will be converted to the appropriate htmx.ajax() parameters.
 
+### Dynamic Values with hx-vals-extra
+
+The `hx-vals-extra` attribute allows adding dynamic values computed at event time, without overwriting the static `hx-vals`.
+
+**Format:**
+```javascript
+{
+  "hx-vals": {"c_id": "command_id"},           // Static values (preserved)
+  "hx-vals-extra": {
+    "dict": {"key": "value"},                  // Additional static values (merged)
+    "js": "functionName"                       // JS function to call (merged)
+  }
+}
+```
+
+**How values are merged:**
+1. `hx-vals` - static values (e.g., `c_id` from Command)
+2. `hx-vals-extra.dict` - additional static values
+3. `hx-vals-extra.js` - function called with `(event, element, combinationStr)`, result merged
+
+**JavaScript function example:**
+```javascript
+function getKeyboardContext(event, element, combination) {
+  return {
+    key: event.key,
+    shift: event.shiftKey,
+    timestamp: Date.now()
+  };
+}
+```
+
+**Configuration example:**
+```javascript
+const combinations = {
+  "Ctrl+S": {
+    "hx-post": "/save",
+    "hx-vals": {"c_id": "save_cmd"},
+    "hx-vals-extra": {"js": "getKeyboardContext"}
+  }
+};
+```
+
 ### Automatic Parameters
 
 The library automatically adds these parameters to every request:
@@ -189,6 +260,8 @@ The library automatically adds these parameters to every request:
 - `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)
 
+Note: `require_inside` controls **whether** the action fires; `is_inside` is an informational parameter sent **with** the request after it fires.
+
 Example final request:
 ```javascript
 htmx.ajax('POST', '/save-url', {

docs/Layout.md

@@ -0,0 +1,583 @@
+# Layout Component
+
+## Introduction
+
+The Layout component provides a complete application structure with fixed header and footer, a scrollable main content
+area, and optional collapsible side drawers. It's designed to be the foundation of your FastHTML application's UI.
+
+**Key features:**
+
+- Fixed header and footer that stay visible while scrolling
+- Collapsible left and right drawers for navigation, tools, or auxiliary content
+- Resizable drawers with drag handles
+- Automatic state persistence per session
+- Single instance per session (singleton pattern)
+
+**Common use cases:**
+
+- Application with navigation sidebar
+- Dashboard with tools panel
+- Admin interface with settings drawer
+- Documentation site with table of contents
+
+## Quick Start
+
+Here's a minimal example showing an application with a navigation sidebar:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Layout import Layout
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+
+# Create the layout instance
+layout = Layout(parent=root_instance, app_name="My App")
+
+# Add navigation items to the left drawer
+layout.left_drawer.add(
+  mk.mk(Div("Home"), command=Command(...))
+)
+layout.left_drawer.add(
+  mk.mk(Div("About"), command=Command(...))
+)
+layout.left_drawer.add(
+  mk.mk(Div("Contact"), command=Command(...))
+)
+
+# Set the main content
+layout.set_main(
+  Div(
+    H1("Welcome"),
+    P("This is the main content area")
+  )
+)
+
+# Render the layout
+return layout
+```
+
+This creates a complete application layout with:
+
+- A header displaying the app name and drawer toggle button
+- A collapsible left drawer with interactive navigation items
+- A main content area that updates when navigation items are clicked
+- An empty footer
+
+**Note:** Navigation items use commands to update the main content area without page reload. See the Commands section
+below for details.
+
+## Basic Usage
+
+### Creating a Layout
+
+The Layout component is a `SingleInstance`, meaning there's only one instance per session. Create it by providing a
+parent instance and an application name:
+
+```python
+layout = Layout(parent=root_instance, app_name="My Application")
+```
+
+### Content Zones
+
+The Layout provides six content zones where you can add components:
+
+```
+┌──────────────────────────────────────────────────────────┐
+│  Header                                                  │
+│  ┌─────────────────┐              ┌─────────────────┐    │
+│  │  header_left    │              │  header_right   │    │
+│  └─────────────────┘              └─────────────────┘    │
+├─────────┬────────────────────────────────────┬───────────┤
+│         │                                    │           │
+│  left   │                                    │  right    │
+│ drawer  │           Main Content             │  drawer   │
+│         │                                    │           │
+│         │                                    │           │
+├─────────┴────────────────────────────────────┴───────────┤
+│  Footer                                                  │
+│  ┌─────────────────┐              ┌─────────────────┐    │
+│  │  footer_left    │              │  footer_right   │    │
+│  └─────────────────┘              └─────────────────┘    │
+└──────────────────────────────────────────────────────────┘
+```
+
+**Zone details:**
+
+| Zone           | Typical Use                                   |
+|----------------|-----------------------------------------------|
+| `header_left`  | App logo, menu button, breadcrumbs            |
+| `header_right` | User profile, notifications, settings         |
+| `left_drawer`  | Navigation menu, tree view, filters           |
+| `right_drawer` | Tools panel, properties inspector, debug info |
+| `footer_left`  | Copyright, legal links, version               |
+| `footer_right` | Status indicators, connection state           |
+
+### Adding Content to Zones
+
+Use the `.add()` method to add components to any zone:
+
+```python
+# Header
+layout.header_left.add(Div("Logo"))
+layout.header_right.add(Div("User: Admin"))
+
+# Drawers
+layout.left_drawer.add(Div("Navigation"))
+layout.right_drawer.add(Div("Tools"))
+
+# Footer
+layout.footer_left.add(Div("© 2024 My App"))
+layout.footer_right.add(Div("v1.0.0"))
+```
+
+### Setting Main Content
+
+The main content area displays your page content and can be updated dynamically:
+
+```python
+# Set initial content
+layout.set_main(
+  Div(
+    H1("Dashboard"),
+    P("Welcome to your dashboard")
+  )
+)
+
+# Update later (typically via commands)
+layout.set_main(
+  Div(
+    H1("Settings"),
+    P("Configure your preferences")
+  )
+)
+```
+
+### Controlling Drawers
+
+By default, both drawers are visible. The drawer state is managed automatically:
+
+- Users can toggle drawers using the icon buttons in the header
+- Users can resize drawers by dragging the handle
+- Drawer state persists within the session
+
+The initial drawer widths are:
+
+- Left drawer: 250px
+- Right drawer: 250px
+
+These can be adjusted by users and the state is preserved automatically.
+
+## Content System
+
+### Understanding Groups
+
+Each content zone (header_left, header_right, drawers, footer) supports **groups** to organize related items. Groups are
+separated visually by dividers and can have optional labels.
+
+### Adding Content to Groups
+
+When adding content, you can optionally specify a group name:
+
+```python
+# Add items to different groups in the left drawer
+layout.left_drawer.add(Div("Dashboard"), group="main")
+layout.left_drawer.add(Div("Analytics"), group="main")
+layout.left_drawer.add(Div("Settings"), group="preferences")
+layout.left_drawer.add(Div("Profile"), group="preferences")
+```
+
+This creates two groups:
+
+- **main**: Dashboard, Analytics
+- **preferences**: Settings, Profile
+
+A visual divider automatically appears between groups.
+
+### Custom Group Labels
+
+You can provide a custom FastHTML element to display as the group header:
+
+```python
+# Add a styled group header
+layout.left_drawer.add_group(
+  "Navigation",
+  group_ft=Div("MAIN MENU", cls="font-bold text-sm opacity-60 px-2 py-1")
+)
+
+# Then add items to this group
+layout.left_drawer.add(Div("Home"), group="Navigation")
+layout.left_drawer.add(Div("About"), group="Navigation")
+```
+
+### Ungrouped Content
+
+If you don't specify a group, content is added to the default (`None`) group:
+
+```python
+# These items are in the default group
+layout.left_drawer.add(Div("Quick Action 1"))
+layout.left_drawer.add(Div("Quick Action 2"))
+```
+
+### Preventing Duplicates
+
+The Content system automatically prevents adding duplicate items based on their `id` attribute:
+
+```python
+item = Div("Unique Item", id="my-item")
+layout.left_drawer.add(item)
+layout.left_drawer.add(item)  # Ignored - already added
+```
+
+### Group Rendering Options
+
+Groups render differently depending on the zone:
+
+**In drawers** (vertical layout):
+
+- Groups stack vertically
+- Dividers are horizontal lines
+- Group labels appear above their content
+
+**In header/footer** (horizontal layout):
+
+- Groups arrange side-by-side
+- Dividers are vertical lines
+- Group labels are typically hidden
+
+## Advanced Features
+
+### Resizable Drawers
+
+Both drawers can be resized by users via drag handles:
+
+- **Drag handle location**:
+    - Left drawer: Right edge
+    - Right drawer: Left edge
+- **Width constraints**: 150px (minimum) to 600px (maximum)
+- **Persistence**: Resized width is automatically saved in the session state
+
+Users can drag the handle to adjust drawer width. The new width is preserved throughout their session.
+
+### Programmatic Drawer Control
+
+You can control drawers programmatically using commands:
+
+```python
+# Toggle drawer visibility
+toggle_left = layout.commands.toggle_drawer("left")
+toggle_right = layout.commands.toggle_drawer("right")
+
+# Update drawer width
+update_left_width = layout.commands.update_drawer_width("left", width=300)
+update_right_width = layout.commands.update_drawer_width("right", width=350)
+```
+
+These commands are typically used with buttons or other interactive elements:
+
+```python
+# Add a button to toggle the right drawer
+button = mk.button("Toggle Tools", command=layout.commands.toggle_drawer("right"))
+layout.header_right.add(button)
+```
+
+### State Persistence
+
+The Layout automatically persists its state within the user's session:
+
+| State Property       | Description                     | Default |
+|----------------------|---------------------------------|---------|
+| `left_drawer_open`   | Whether left drawer is visible  | `True`  |
+| `right_drawer_open`  | Whether right drawer is visible | `True`  |
+| `left_drawer_width`  | Left drawer width in pixels     | `250`   |
+| `right_drawer_width` | Right drawer width in pixels    | `250`   |
+
+State changes (toggle, resize) are automatically saved and restored within the session.
+
+### Dynamic Content Updates
+
+Content zones can be updated dynamically during the session:
+
+```python
+# Initial setup
+layout.left_drawer.add(Div("Item 1"))
+
+
+# Later, add more items (e.g., in a command handler)
+def add_dynamic_content():
+  layout.left_drawer.add(Div("New Item"), group="dynamic")
+  return layout.left_drawer  # Return updated drawer for HTMX swap
+```
+
+**Note**: When updating content dynamically, you typically return the updated zone to trigger an HTMX swap.
+
+### CSS Customization
+
+The Layout uses CSS classes that you can customize:
+
+| Class                      | Element                          |
+|----------------------------|----------------------------------|
+| `mf-layout`                | Root layout container            |
+| `mf-layout-header`         | Header section                   |
+| `mf-layout-footer`         | Footer section                   |
+| `mf-layout-main`           | Main content area                |
+| `mf-layout-drawer`         | Drawer container                 |
+| `mf-layout-left-drawer`    | Left drawer specifically         |
+| `mf-layout-right-drawer`   | Right drawer specifically        |
+| `mf-layout-drawer-content` | Scrollable content within drawer |
+| `mf-resizer`               | Resize handle                    |
+| `mf-layout-group`          | Content group wrapper            |
+
+You can override these classes in your custom CSS to change colors, spacing, or behavior.
+
+### User Profile Integration
+
+The Layout automatically includes a UserProfile component in the header right area. This component handles user
+authentication display and logout functionality when auth is enabled.
+
+## Examples
+
+### Example 1: Dashboard with Navigation Sidebar
+
+A typical dashboard application with a navigation menu in the left drawer:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Layout import Layout
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+
+# Create layout
+layout = Layout(parent=root_instance, app_name="Analytics Dashboard")
+
+
+# Navigation menu in left drawer
+def show_dashboard():
+  layout.set_main(Div(H1("Dashboard"), P("Overview of your metrics")))
+  return layout._mk_main()
+
+
+def show_reports():
+  layout.set_main(Div(H1("Reports"), P("Detailed analytics reports")))
+  return layout._mk_main()
+
+
+def show_settings():
+  layout.set_main(Div(H1("Settings"), P("Configure your preferences")))
+  return layout._mk_main()
+
+
+# Add navigation items with groups
+layout.left_drawer.add_group("main", group_ft=Div("MENU", cls="font-bold text-xs px-2 opacity-60"))
+layout.left_drawer.add(mk.mk(Div("Dashboard"), command=Command("nav_dash", "Show dashboard", show_dashboard)),
+                       group="main")
+layout.left_drawer.add(mk.mk(Div("Reports"), command=Command("nav_reports", "Show reports", show_reports)),
+                       group="main")
+
+layout.left_drawer.add_group("config", group_ft=Div("CONFIGURATION", cls="font-bold text-xs px-2 opacity-60"))
+layout.left_drawer.add(mk.mk(Div("Settings"), command=Command("nav_settings", "Show settings", show_settings)),
+                       group="config")
+
+# Header content
+layout.header_left.add(Div("📊 Analytics", cls="font-bold"))
+
+# Footer
+layout.footer_left.add(Div("© 2024 Analytics Co."))
+layout.footer_right.add(Div("v1.0.0"))
+
+# Set initial main content
+layout.set_main(Div(H1("Dashboard"), P("Overview of your metrics")))
+```
+
+### Example 2: Development Tool with Debug Panel
+
+An application with development tools in the right drawer:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Layout import Layout
+from myfasthtml.controls.helpers import mk
+
+# Create layout
+layout = Layout(parent=root_instance, app_name="Dev Tools")
+
+# Main content: code editor
+layout.set_main(
+  Div(
+    H2("Code Editor"),
+    Textarea("# Write your code here", rows=20, cls="w-full font-mono")
+  )
+)
+
+# Right drawer: debug and tools
+layout.right_drawer.add_group("debug", group_ft=Div("DEBUG INFO", cls="font-bold text-xs px-2 opacity-60"))
+layout.right_drawer.add(Div("Console output here..."), group="debug")
+layout.right_drawer.add(Div("Variables: x=10, y=20"), group="debug")
+
+layout.right_drawer.add_group("tools", group_ft=Div("TOOLS", cls="font-bold text-xs px-2 opacity-60"))
+layout.right_drawer.add(Button("Run Code"), group="tools")
+layout.right_drawer.add(Button("Clear Console"), group="tools")
+
+# Header
+layout.header_left.add(Div("DevTools IDE"))
+layout.header_right.add(Button("Save"))
+```
+
+### Example 3: Minimal Layout (Main Content Only)
+
+A simple layout without drawers, focusing only on main content:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Layout import Layout
+
+# Create layout
+layout = Layout(parent=root_instance, app_name="Simple Blog")
+
+# Header
+layout.header_left.add(Div("My Blog", cls="text-xl font-bold"))
+layout.header_right.add(A("About", href="/about"))
+
+# Main content
+layout.set_main(
+  Article(
+    H1("Welcome to My Blog"),
+    P("This is a simple blog layout without side drawers."),
+    P("The focus is on the content in the center.")
+  )
+)
+
+# Footer
+layout.footer_left.add(Div("© 2024 Blog Author"))
+layout.footer_right.add(A("RSS", href="/rss"))
+
+# Note: Drawers are present but can be collapsed by users if not needed
+```
+
+### Example 4: Dynamic Content Loading
+
+Loading content dynamically based on user interaction:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Layout import Layout
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+
+layout = Layout(parent=root_instance, app_name="Dynamic App")
+
+
+# Function that loads content dynamically
+def load_page(page_name):
+  # Simulate loading different content
+  content = {
+      "home": Div(H1("Home"), P("Welcome to the home page")),
+      "profile": Div(H1("Profile"), P("User profile information")),
+      "settings": Div(H1("Settings"), P("Application settings")),
+  }
+  layout.set_main(content.get(page_name, Div("Page not found")))
+  return layout._mk_main()
+
+
+# Create navigation commands
+pages = ["home", "profile", "settings"]
+for page in pages:
+  cmd = Command(f"load_{page}", f"Load {page} page", load_page, page)
+  layout.left_drawer.add(
+    mk.mk(Div(page.capitalize()), command=cmd)
+  )
+
+# Set initial content
+layout.set_main(Div(H1("Home"), P("Welcome to the home page")))
+```
+
+---
+
+## Developer Reference
+
+This section contains technical details for developers working on the Layout component itself.
+
+### State
+
+The Layout component maintains the following state properties:
+
+| Name                 | Type    | Description                      | Default |
+|----------------------|---------|----------------------------------|---------|
+| `left_drawer_open`   | boolean | True if the left drawer is open  | True    |
+| `right_drawer_open`  | boolean | True if the right drawer is open | True    |
+| `left_drawer_width`  | integer | Width of the left drawer         | 250     |
+| `right_drawer_width` | integer | Width of the right drawer        | 250     |
+
+### Commands
+
+Available commands for programmatic control:
+
+| Name                                    | Description                                                                            |
+|-----------------------------------------|----------------------------------------------------------------------------------------|
+| `toggle_drawer(side)`                   | Toggles the drawer on the specified side                                               |
+| `update_drawer_width(side, width=None)` | Updates the drawer width on the specified side. The width is given by the HTMX request |
+
+### Public Methods
+
+| Method              | Description                 |
+|---------------------|-----------------------------|
+| `set_main(content)` | Sets the main content area  |
+| `render()`          | Renders the complete layout |
+
+### High Level Hierarchical Structure
+
+```
+Div(id="layout")
+├── Header
+│   ├── Div(id="layout_hl")
+│   │   ├── Icon                # Left drawer icon button
+│   │   └── Div                 # Left content for the header
+│   └── Div(id="layout_hr")
+│       ├── Div                 # Right content for the header
+│       └── UserProfile         # user profile icon button
+├── Div                         # Left Drawer
+├── Main                        # Main content
+├── Div                         # Right Drawer
+├── Footer                      # Footer
+└── Script                      # To initialize the resizing
+```
+
+### Element IDs
+
+| Name        | Description                         |
+|-------------|-------------------------------------|
+| `layout`    | Root layout container (singleton)   |
+| `layout_h`  | Header section (not currently used) |
+| `layout_hl` | Header left side                    |
+| `layout_hr` | Header right side                   |
+| `layout_f`  | Footer section (not currently used) |
+| `layout_fl` | Footer left side                    |
+| `layout_fr` | Footer right side                   |
+| `layout_ld` | Left drawer                         |
+| `layout_rd` | Right drawer                        |
+
+### Internal Methods
+
+These methods are used internally for rendering:
+
+| Method                    | Description                                            |
+|---------------------------|--------------------------------------------------------|
+| `_mk_header()`            | Renders the header component                           |
+| `_mk_footer()`            | Renders the footer component                           |
+| `_mk_main()`              | Renders the main content area                          |
+| `_mk_left_drawer()`       | Renders the left drawer                                |
+| `_mk_right_drawer()`      | Renders the right drawer                               |
+| `_mk_left_drawer_icon()`  | Renders the left drawer toggle icon                    |
+| `_mk_right_drawer_icon()` | Renders the right drawer toggle icon                   |
+| `_mk_content_wrapper()`   | Static method to wrap content with groups and dividers |
+
+### Content Class
+
+The `Layout.Content` nested class manages content zones:
+
+| Method                            | Description                                              |
+|-----------------------------------|----------------------------------------------------------|
+| `add(content, group=None)`        | Adds content to a group, prevents duplicates based on ID |
+| `add_group(group, group_ft=None)` | Creates a new group with optional custom header element  |
+| `get_content()`                   | Returns dictionary of groups and their content           |
+| `get_groups()`                    | Returns list of (group_name, group_ft) tuples            |

docs/Mouse Support.md

@@ -19,6 +19,13 @@ The mouse support library provides keyboard-like binding capabilities for mouse
 - `ctrl+shift+click` - Multiple modifiers
 - Any combination of modifiers
 
+**Drag Actions**:
+- `mousedown>mouseup` - Left button drag (press, drag at least 5px, release)
+- `rmousedown>mouseup` - Right button drag
+- `ctrl+mousedown>mouseup` - Ctrl + left drag
+- `shift+mousedown>mouseup` - Shift + left drag
+- Any combination of modifiers
+
 **Sequences**:
 - `click right_click` (or `click rclick`) - Click then right-click within 500ms
 - `click click` - Double click sequence
@@ -64,6 +71,191 @@ const combinations = {
 add_mouse_support('my-element', JSON.stringify(combinations));
 ```
 
+### Dynamic Values with JavaScript Functions
+
+You can add dynamic values computed at click time using `hx-vals-extra`. This is useful when combined with a Command (which provides `hx-vals` with `c_id`).
+
+**Configuration format:**
+```javascript
+const combinations = {
+  "click": {
+    "hx-post": "/myfasthtml/commands",
+    "hx-vals": {"c_id": "command_id"},           // Static values from Command
+    "hx-vals-extra": {"js": "getClickData"}      // Dynamic values via JS function
+  }
+};
+```
+
+**How it works:**
+1. `hx-vals` contains static values (e.g., `c_id` from Command)
+2. `hx-vals-extra.dict` contains additional static values (merged)
+3. `hx-vals-extra.js` specifies a function to call for dynamic values (merged)
+
+**JavaScript function definition:**
+```javascript
+// Function receives (event, element, combinationStr)
+function getClickData(event, element, combination) {
+  return {
+    x: event.clientX,
+    y: event.clientY,
+    target_id: event.target.id,
+    timestamp: Date.now()
+  };
+}
+```
+
+The function parameters are optional - use what you need:
+
+```javascript
+// Full context
+function getFullContext(event, element, combination) {
+  return { x: event.clientX, elem: element.id, combo: combination };
+}
+
+// Just the event
+function getPosition(event) {
+  return { x: event.clientX, y: event.clientY };
+}
+
+// No parameters needed
+function getTimestamp() {
+  return { ts: Date.now() };
+}
+```
+
+**Built-in helper function:**
+```javascript
+// getCellId() - finds parent with .dt2-cell class and returns its id
+function getCellId(event) {
+  const cell = event.target.closest('.dt2-cell');
+  if (cell && cell.id) {
+    return { cell_id: cell.id };
+  }
+  return {};
+}
+```
+
+## Drag Actions (mousedown>mouseup)
+
+### How It Works
+
+Drag detection uses a **5-pixel threshold**: the action only activates when the mouse has moved at least 5px after mousedown. This prevents accidental drags from normal clicks.
+
+**Lifecycle**:
+1. `mousedown` → library waits, stores start position
+2. Mouse moves > 5px → drag mode activated, `hx-vals-extra` function called with mousedown event → result stored
+3. Mouse moves (during drag) → `on_move` function called on each animation frame *(if configured)*
+4. `mouseup` → `hx-vals-extra` function called again with mouseup event → HTMX request fired with both values
+5. The subsequent `click` event is suppressed (left button only)
+
+### Two-Phase Values
+
+For `mousedown>mouseup`, the `hx-vals-extra` function is called **twice** — once at each phase — and values are suffixed automatically:
+
+```javascript
+// hx-vals-extra function (same function, called twice)
+function getCellId(event) {
+  const cell = event.target.closest('.dt2-cell');
+  return { cell_id: cell.id };
+}
+```
+
+**Values sent to server**:
+```json
+{
+  "c_id": "command_id",
+  "cell_id_mousedown": "tcell_grid-0-2",
+  "cell_id_mouseup": "tcell_grid-3-5",
+  "combination": "mousedown>mouseup",
+  "is_inside": true,
+  "has_focus": false
+}
+```
+
+**Python handler**:
+```python
+def on_mouse_selection(self, combination, is_inside, cell_id_mousedown, cell_id_mouseup):
+    # cell_id_mousedown: where the drag started
+    # cell_id_mouseup: where the drag ended
+    ...
+```
+
+### Real-Time Visual Feedback with `on_move`
+
+The `on_move` attribute specifies a JavaScript function to call on each animation frame **during the drag**, enabling real-time visual feedback without any server calls.
+
+**Configuration**:
+```javascript
+{
+  "mousedown>mouseup": {
+    "hx-post": "/myfasthtml/commands",
+    "hx-vals": {"c_id": "command_id"},
+    "hx-vals-extra": {"js": "getCellId"},
+    "on-move": "onDragMove"              // called during drag
+  }
+}
+```
+
+**`on_move` function signature**:
+```javascript
+function onDragMove(event, combination, mousedown_result) {
+    // event            : current mousemove event
+    // combination      : e.g. "mousedown>mouseup" or "ctrl+mousedown>mouseup"
+    // mousedown_result : raw result of hx-vals-extra at mousedown (unsuffixed), or null
+}
+```
+
+**Key properties**:
+- Called only after the 5px drag threshold is exceeded (never during a simple click)
+- Throttled via `requestAnimationFrame` (~60fps) — no manual throttling needed
+- Return value is ignored
+- Visual state cleanup is handled by the server response (which overwrites any client-side visual)
+
+**DataGrid range selection example**:
+```javascript
+function highlightDragRange(event, combination, mousedownResult) {
+    const startCell = mousedownResult ? mousedownResult.cell_id : null;
+    const endCell = event.target.closest('.dt2-cell');
+    if (!startCell || !endCell) return;
+
+    // Clear previous preview
+    document.querySelectorAll('.dt2-drag-preview')
+        .forEach(el => el.classList.remove('dt2-drag-preview'));
+
+    // Highlight range from start to current cell
+    applyRangeClass(startCell, endCell.id, 'dt2-drag-preview');
+}
+```
+
+**Canvas selection rectangle example**:
+```javascript
+function drawSelectionRect(event, combination, mousedownResult) {
+    if (!mousedownResult) return;
+    const canvas = document.getElementById('my-canvas');
+    const ctx = canvas.getContext('2d');
+    const rect = canvas.getBoundingClientRect();
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.strokeStyle = 'blue';
+    ctx.strokeRect(
+        mousedownResult.x - rect.left,
+        mousedownResult.y - rect.top,
+        event.clientX - rect.left - (mousedownResult.x - rect.left),
+        event.clientY - rect.top - (mousedownResult.y - rect.top)
+    );
+}
+```
+
+**Python configuration**:
+```python
+mouse.add(
+    "mousedown>mouseup",
+    selection_command,
+    hx_vals="js:getCellId()",
+    on_move="js:highlightDragRange()"
+)
+```
+
 ## API Reference
 
 ### add_mouse_support(elementId, combinationsJson)
@@ -150,16 +342,168 @@ The library automatically adds these parameters to every HTMX request:
 
 ## Python Integration
 
-### Basic Usage
+### Mouse Class
+
+The `Mouse` class provides a convenient way to add mouse support to elements.
 
 ```python
+from myfasthtml.controls.Mouse import Mouse
+from myfasthtml.core.commands import Command
+
+# Create mouse support for an element
+mouse = Mouse(parent_element)
+
+# Add combinations
+mouse.add("click", select_command)
+mouse.add("ctrl+click", toggle_command)
+mouse.add("right_click", context_menu_command)
+```
+
+### Mouse.add() Method
+
+```python
+def add(self, sequence: str, command: Command = None, *,
+        hx_post: str = None, hx_get: str = None, hx_put: str = None,
+        hx_delete: str = None, hx_patch: str = None,
+        hx_target: str = None, hx_swap: str = None, hx_vals=None,
+        on_move: str = None)
+```
+
+**Parameters**:
+- `sequence`: Mouse event sequence (e.g., "click", "ctrl+click", "mousedown>mouseup")
+- `command`: Optional Command object for server-side action
+- `hx_post`, `hx_get`, etc.: HTMX URL parameters (override command)
+- `hx_target`: HTMX target selector (overrides command)
+- `hx_swap`: HTMX swap strategy (overrides command)
+- `hx_vals`: Additional HTMX values - dict or `"js:functionName()"` for dynamic values
+- `on_move`: Client-side JS function called during drag — `"js:functionName()"` format. Only valid with `mousedown>mouseup` sequences.
+
+**Note**:
+- Named parameters (except `hx_vals`) override the command's parameters.
+- `hx_vals` is **merged** with command's values (stored in `hx-vals-extra`), preserving `c_id`.
+- `on_move` is purely client-side — it never triggers a server call.
+
+### Usage Patterns
+
+**With Command only**:
+```python
+mouse.add("click", my_command)
+```
+
+**With Command and overrides**:
+```python
+# Command provides hx-post, but we override the target
+mouse.add("ctrl+click", my_command, hx_target="#other-result")
+```
+
+**Without Command (direct HTMX)**:
+```python
+mouse.add("right_click", hx_post="/context-menu", hx_target="#menu", hx_swap="innerHTML")
+```
+
+**With dynamic values**:
+```python
+mouse.add("shift+click", my_command, hx_vals="js:getClickPosition()")
+```
+
+**With drag and real-time feedback**:
+```python
+mouse.add(
+    "mousedown>mouseup",
+    selection_command,
+    hx_vals="js:getCellId()",
+    on_move="js:highlightDragRange()"
+)
+```
+
+### Sequences
+
+```python
+mouse = Mouse(element)
+mouse.add("click", single_click_command)
+mouse.add("click click", double_click_command)
+mouse.add("click right_click", special_action_command)
+```
+
+### Multiple Elements
+
+```python
+# Each element gets its own Mouse instance
+for item in items:
+    mouse = Mouse(item)
+    mouse.add("click", Command("select", "Select item", lambda i=item: select(i)))
+    mouse.add("ctrl+click", Command("toggle", "Toggle item", lambda i=item: toggle(i)))
+```
+
+### Dynamic hx-vals with JavaScript
+
+You can use `"js:functionName()"` to call a client-side JavaScript function that returns additional values to send with the request. The command's `c_id` is preserved.
+
+**Python**:
+```python
+mouse.add("click", my_command, hx_vals="js:getClickContext()")
+```
+
+**Generated config** (internally):
+```json
+{
+  "hx-post": "/myfasthtml/commands",
+  "hx-vals": {"c_id": "command_id"},
+  "hx-vals-extra": {"js": "getClickContext"}
+}
+```
+
+**JavaScript** (client-side):
+```javascript
+// Function receives (event, element, combinationStr)
+function getClickContext(event, element, combination) {
+    return {
+        x: event.clientX,
+        y: event.clientY,
+        elementId: element.id,
+        combo: combination
+    };
+}
+
+// Simple function - parameters are optional
+function getTimestamp() {
+    return { ts: Date.now() };
+}
+```
+
+**Values sent to server**:
+```json
+{
+  "c_id": "command_id",
+  "x": 150,
+  "y": 200,
+  "elementId": "my-element",
+  "combo": "click",
+  "combination": "click",
+  "has_focus": false,
+  "is_inside": true
+}
+```
+
+You can also pass a static dict:
+```python
+mouse.add("click", my_command, hx_vals={"extra_key": "extra_value"})
+```
+
+### Low-Level Usage (without Mouse class)
+
+For advanced use cases, you can generate the JavaScript directly:
+
+```python
+import json
+
 combinations = {
     "click": {
         "hx-post": "/item/select"
     },
     "ctrl+click": {
         "hx-post": "/item/select-multiple",
-        "hx-vals": json.dumps({"mode": "multi"})
+        "hx-vals": {"mode": "multi"}
     },
     "right_click": {
         "hx-post": "/item/context-menu",
@@ -168,41 +512,7 @@ combinations = {
     }
 }
 
-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)}')"
+Script(f"add_mouse_support('{element_id}', '{json.dumps(combinations)}')")
 ```
 
 ## Behavior Details
@@ -389,6 +699,43 @@ const combinations = {
 };
 ```
 
+### Range Selection with Visual Feedback
+
+```python
+# Python: configure drag with live feedback
+mouse.add(
+    "mousedown>mouseup",
+    self.commands.on_mouse_selection(),
+    hx_vals="js:getCellId()",
+    on_move="js:highlightDragRange()"
+)
+```
+
+```javascript
+// JavaScript: real-time highlight during drag
+function highlightDragRange(event, combination, mousedownResult) {
+    const startCell = mousedownResult ? mousedownResult.cell_id : null;
+    const endCell = event.target.closest('.dt2-cell');
+    if (!startCell || !endCell) return;
+
+    document.querySelectorAll('.dt2-drag-preview')
+        .forEach(el => el.classList.remove('dt2-drag-preview'));
+
+    applyRangeClass(startCell, endCell.id, 'dt2-drag-preview');
+    // Server response will replace .dt2-drag-preview with final selection classes
+}
+```
+
+```python
+# Python: server handler receives both positions
+def on_mouse_selection(self, combination, is_inside, cell_id_mousedown, cell_id_mouseup):
+    if is_inside and cell_id_mousedown and cell_id_mouseup:
+        pos_start = self._get_pos_from_element_id(cell_id_mousedown)
+        pos_end = self._get_pos_from_element_id(cell_id_mouseup)
+        self._state.selection.set_range(pos_start, pos_end)
+    return self.render_partial()
+```
+
 ## Troubleshooting
 
 ### Clicks not detected
@@ -409,14 +756,29 @@ const combinations = {
 - Check if longer sequences exist (causes waiting)
 - Verify the combination string format (space-separated)
 
+### Drag not triggering
+
+- Ensure the mouse moved at least 5px before releasing
+- Verify `mousedown>mouseup` (not `mousedown_mouseup`) in the combination string
+- Check that `hx-vals-extra` function exists and is accessible via `window`
+
+### `on_move` not called
+
+- Verify `on_move` is only used with `mousedown>mouseup` sequences
+- Check that the function name matches exactly (case-sensitive)
+- Ensure the function is accessible via `window` (not inside a module scope)
+- Remember: `on_move` only fires after the 5px threshold — it won't fire on small movements
+
 ## Technical Details
 
 ### Architecture
 
-- **Global listeners** on `document` for `click` and `contextmenu` events
+- **Global listeners** on `document` for `click`, `contextmenu`, `mousedown`, `mouseup` 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)
+- **Drag detection**: temporary `mousemove` listener attached on `mousedown`, removed when 5px threshold exceeded
+- **`on_move` throttling**: `requestAnimationFrame` used internally — no manual throttling needed in user functions
 
 ### Performance
 

docs/Panel.md

@@ -0,0 +1,944 @@
+# Panel Component
+
+## Introduction
+
+The Panel component provides a flexible three-zone layout with optional collapsible side panels. It's designed to
+organize content into left panel, main area, and right panel sections, with smooth toggle animations and resizable
+panels.
+
+**Key features:**
+
+- Three customizable zones (left panel, main content, right panel)
+- Configurable panel titles with sticky headers
+- Toggle visibility with hide/show icons
+- Resizable panels with drag handles
+- Smooth CSS animations for show/hide transitions
+- Automatic state persistence per session
+- Configurable panel presence (enable/disable left or right)
+- Session-based width and visibility state
+
+**Common use cases:**
+
+- Code editor with file explorer and properties panel
+- Data visualization with filters sidebar and details panel
+- Admin interface with navigation menu and tools panel
+- Documentation viewer with table of contents and metadata
+- Dashboard with configuration panel and information sidebar
+
+## Quick Start
+
+Here's a minimal example showing a three-panel layout for a code editor:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Panel import Panel
+
+# Create the panel instance
+panel = Panel(parent=root_instance)
+
+# Set content for each zone
+panel.set_left(
+  Div(
+    H3("Files"),
+    Ul(
+      Li("app.py"),
+      Li("config.py"),
+      Li("utils.py")
+    )
+  )
+)
+
+panel.set_main(
+  Div(
+    H2("Editor"),
+    Textarea("# Write your code here", rows=20, cls="w-full font-mono")
+  )
+)
+
+panel.set_right(
+  Div(
+    H3("Properties"),
+    Div("Language: Python"),
+    Div("Lines: 120"),
+    Div("Size: 3.2 KB")
+  )
+)
+
+# Render the panel
+return panel
+```
+
+This creates a complete panel layout with:
+
+- A left panel displaying a file list with a hide icon (−) at the top right
+- A main content area with a code editor
+- A right panel showing file properties with a hide icon (−) at the top right
+- Show icons (⋯) that appear in the main area when panels are hidden
+- Drag handles between panels for manual resizing
+- Automatic state persistence (visibility and width)
+
+**Note:** Users can hide panels by clicking the hide icon (−) inside each panel. When hidden, a show icon (⋯) appears in
+the main area (left side for left panel, right side for right panel). Panels can be resized by dragging the handles, and
+all state is automatically saved in the session.
+
+## Basic Usage
+
+### Visual Structure
+
+The Panel component consists of three zones with optional side panels:
+
+```
+┌────────────────────────────────────────────────────────────┐
+│                                                            │
+│  ┌──────────┐ │ ┌──────────────────────┐ │ ┌──────────┐    │
+│  │          │ │ │                      │ │ │          │    │
+│  │   Left   │ ║ │                      │ ║ │  Right   │    │
+│  │  Panel   │ │ │    Main Content      │ │ │  Panel   │    │
+│  │          │ │ │                      │ │ │          │    │
+│  │     [−]  │ │ │  [⋯]         [⋯]    │ │ │  [−]     │    │
+│  └──────────┘ │ └──────────────────────┘ │ └──────────┘    │
+│               ║                          ║                 │
+│            Resizer                    Resizer              │
+└────────────────────────────────────────────────────────────┘
+```
+
+**Component details:**
+
+| Element       | Description                                   |
+|---------------|-----------------------------------------------|
+| Left panel    | Optional collapsible panel (default: visible) |
+| Main content  | Always-visible central content area           |
+| Right panel   | Optional collapsible panel (default: visible) |
+| Hide icon (−) | Inside each panel header, right side          |
+| Show icon (⋯) | In main area when panel is hidden             |
+| Resizer (║)   | Drag handle to resize panels manually         |
+
+**Panel with title (default):**
+
+When `show_left_title` or `show_right_title` is `True` (default), panels display a sticky header with title and hide icon:
+
+```
+┌─────────────────────────────┐
+│ Title               [−]     │  ← Header (sticky, always visible)
+├─────────────────────────────┤
+│                             │
+│    Scrollable Content       │  ← Content area (scrolls independently)
+│                             │
+└─────────────────────────────┘
+```
+
+**Panel without title:**
+
+When `show_left_title` or `show_right_title` is `False`, panels use the legacy layout:
+
+```
+┌─────────────────────────────┐
+│                        [−]  │  ← Hide icon at top-right (absolute)
+│                             │
+│         Content             │
+│                             │
+└─────────────────────────────┘
+```
+
+### Creating a Panel
+
+The Panel is a `MultipleInstance`, meaning you can create multiple independent panels in your application. Create it by
+providing a parent instance:
+
+```python
+panel = Panel(parent=root_instance)
+
+# Or with a custom ID
+panel = Panel(parent=root_instance, _id="my-panel")
+
+# Or with custom configuration
+from myfasthtml.controls.Panel import PanelConf
+
+conf = PanelConf(left=True, right=False)  # Only left panel enabled
+panel = Panel(parent=root_instance, conf=conf)
+```
+
+### Content Zones
+
+The Panel provides three content zones:
+
+```
+┌─────────────────────────────────────────────────────┐
+│  Left Panel  │  Main Content  │  Right Panel        │
+│  (optional)  │   (required)   │  (optional)         │
+└─────────────────────────────────────────────────────┘
+```
+
+**Zone details:**
+
+| Zone    | Typical Use                                           | Required |
+|---------|-------------------------------------------------------|----------|
+| `left`  | Navigation, file explorer, filters, table of contents | No       |
+| `main`  | Primary content, editor, visualization, results       | Yes      |
+| `right` | Properties, tools, metadata, debug info, settings     | No       |
+
+### Setting Content
+
+Use the `set_*()` methods to add content to each zone:
+
+```python
+# Main content (always visible)
+panel.set_main(
+  Div(
+    H1("Dashboard"),
+    P("This is the main content area")
+  )
+)
+
+# Left panel (optional)
+panel.set_left(
+  Div(
+    H3("Navigation"),
+    Ul(
+      Li("Home"),
+      Li("Settings"),
+      Li("About")
+    )
+  )
+)
+
+# Right panel (optional)
+panel.set_right(
+  Div(
+    H3("Tools"),
+    Button("Export"),
+    Button("Refresh")
+  )
+)
+```
+
+**Method chaining:**
+
+The `set_main()` method returns `self`, enabling method chaining:
+
+```python
+panel = Panel(parent=root_instance)
+  .set_main(Div("Main content"))
+  .set_left(Div("Left content"))
+```
+
+### Panel Configuration
+
+By default, both left and right panels are enabled with titles. You can customize this with `PanelConf`:
+
+```python
+from myfasthtml.controls.Panel import PanelConf
+
+# Only left panel enabled
+conf = PanelConf(left=True, right=False)
+panel = Panel(parent=root_instance, conf=conf)
+
+# Only right panel enabled
+conf = PanelConf(left=False, right=True)
+panel = Panel(parent=root_instance, conf=conf)
+
+# Both panels enabled (default)
+conf = PanelConf(left=True, right=True)
+panel = Panel(parent=root_instance, conf=conf)
+
+# No side panels (main content only)
+conf = PanelConf(left=False, right=False)
+panel = Panel(parent=root_instance, conf=conf)
+```
+
+**Customizing panel titles:**
+
+```python
+# Custom titles for panels
+conf = PanelConf(
+    left=True,
+    right=True,
+    left_title="Explorer",      # Custom title for left panel
+    right_title="Properties"    # Custom title for right panel
+)
+panel = Panel(parent=root_instance, conf=conf)
+```
+
+**Disabling panel titles:**
+
+When titles are disabled, panels use the legacy layout without a sticky header:
+
+```python
+# Disable titles (legacy layout)
+conf = PanelConf(
+    left=True,
+    right=True,
+    show_left_title=False,
+    show_right_title=False
+)
+panel = Panel(parent=root_instance, conf=conf)
+```
+
+**Disabling show icons:**
+
+You can hide the show icons (⋯) that appear when panels are hidden. This means users can only show panels programmatically:
+
+```python
+# Disable show icons (programmatic control only)
+conf = PanelConf(
+    left=True,
+    right=True,
+    show_display_left=False,   # No show icon for left panel
+    show_display_right=False   # No show icon for right panel
+)
+panel = Panel(parent=root_instance, conf=conf)
+```
+
+**Note:** When a panel is disabled in configuration, it won't render at all. When a panel is hidden (via toggle), it
+renders but with zero width and overflow hidden.
+
+## Advanced Features
+
+### Toggling Panel Visibility
+
+Each visible panel includes a hide icon (−) in its top-right corner. When hidden, a show icon (⋯) appears in the main
+area:
+
+**User interaction:**
+
+- **Hide panel**: Click the − icon inside the panel
+- **Show panel**: Click the ⋯ icon in the main area
+
+**Icon positions:**
+
+- Hide icons (−): Always at top-right of each panel
+- Show icon for left panel (⋯): Top-left of main area
+- Show icon for right panel (⋯): Top-right of main area
+
+**Visual states:**
+
+```
+Panel Visible:
+┌──────────┐
+│ Content  │
+│     [−]  │  ← Hide icon visible
+└──────────┘
+
+Panel Hidden:
+┌──────────────────┐
+│ [⋯]       Main   │  ← Show icon visible in main
+└──────────────────┘
+```
+
+**Animation:**
+
+When toggling visibility:
+
+- **Hiding**: Panel width animates to 0px over 0.3s
+- **Showing**: Panel width animates to its saved width over 0.3s
+- Content remains in DOM (state preserved)
+- Smooth CSS transition with ease timing
+
+**Note:** The animation only works when showing (panel appearing). When hiding, the transition currently doesn't apply
+due to HTMX swap timing. This is a known limitation.
+
+### Resizable Panels
+
+Both left and right panels can be resized by users via drag handles:
+
+- **Drag handle location**:
+    - Left panel: Right edge (vertical bar)
+    - Right panel: Left edge (vertical bar)
+- **Width constraints**: 150px (minimum) to 500px (maximum)
+- **Persistence**: Resized width is automatically saved in session state
+- **No transition during resize**: CSS transitions are disabled during manual dragging for smooth performance
+
+**How to resize:**
+
+1. Hover over the panel edge (cursor changes to resize cursor)
+2. Click and drag left/right
+3. Release to set the new width
+4. Width is saved automatically and persists in the session
+
+**Initial widths:**
+
+- Left panel: 250px
+- Right panel: 250px
+
+These defaults can be customized via state after creation if needed.
+
+### State Persistence
+
+The Panel automatically persists its state within the user's session:
+
+| State Property  | Description                    | Default |
+|-----------------|--------------------------------|---------|
+| `left_visible`  | Whether left panel is visible  | `True`  |
+| `right_visible` | Whether right panel is visible | `True`  |
+| `left_width`    | Left panel width in pixels     | `250`   |
+| `right_width`   | Right panel width in pixels    | `250`   |
+
+State changes (toggle visibility, resize width) are automatically saved and restored within the session.
+
+**Accessing state:**
+
+```python
+# Check current state
+is_left_visible = panel._state.left_visible
+left_panel_width = panel._state.left_width
+
+# Programmatically update state (not recommended - use commands instead)
+panel._state.left_visible = False  # Better to use toggle_side command
+```
+
+### Programmatic Control
+
+You can control panels programmatically using commands:
+
+```python
+# Toggle panel visibility
+toggle_left = panel.commands.set_side_visible("left", visible=False)  # Hide left
+toggle_right = panel.commands.set_side_visible("right", visible=True)  # Show right
+
+# Update panel width
+update_left_width = panel.commands.update_side_width("left")
+update_right_width = panel.commands.update_side_width("right")
+```
+
+These commands are typically used with buttons or other interactive elements:
+
+```python
+from myfasthtml.controls.helpers import mk
+
+# Add buttons to toggle panels
+hide_left_btn = mk.button("Hide Left", command=panel.commands.set_side_visible("left", False))
+show_left_btn = mk.button("Show Left", command=panel.commands.set_side_visible("left", True))
+
+# Add to your layout
+panel.set_main(
+  Div(
+    hide_left_btn,
+    show_left_btn,
+    H1("Main Content")
+  )
+)
+```
+
+**Command details:**
+
+- `toggle_side(side, visible)`: Sets panel visibility explicitly
+    - `side`: `"left"` or `"right"`
+    - `visible`: `True` (show) or `False` (hide)
+    - Returns: tuple of (panel_element, show_icon_element) for HTMX swap
+
+- `update_side_width(side)`: Updates panel width from HTMX request
+    - `side`: `"left"` or `"right"`
+    - Width value comes from JavaScript resize handler
+    - Returns: updated panel element for HTMX swap
+
+### CSS Customization
+
+The Panel uses CSS classes that you can customize:
+
+| Class                      | Element                                    |
+|----------------------------|--------------------------------------------|
+| `mf-panel`                 | Root panel container                       |
+| `mf-panel-left`            | Left panel container                       |
+| `mf-panel-right`           | Right panel container                      |
+| `mf-panel-main`            | Main content area                          |
+| `mf-panel-with-title`      | Panel using title layout (no padding-top)  |
+| `mf-panel-body`            | Grid container for header + content        |
+| `mf-panel-header`          | Sticky header with title and hide icon     |
+| `mf-panel-content`         | Scrollable content area                    |
+| `mf-panel-hide-icon`       | Hide icon (−) inside panels                |
+| `mf-panel-show-icon`       | Show icon (⋯) in main area                 |
+| `mf-panel-show-icon-left`  | Show icon for left panel                   |
+| `mf-panel-show-icon-right` | Show icon for right panel                  |
+| `mf-resizer`               | Resize handle base class                   |
+| `mf-resizer-left`          | Left panel resize handle                   |
+| `mf-resizer-right`         | Right panel resize handle                  |
+| `mf-hidden`                | Applied to hidden panels                   |
+| `no-transition`            | Disables transition during manual resize   |
+
+**Example customization:**
+
+```css
+/* Change panel background color */
+.mf-panel-left,
+.mf-panel-right {
+    background-color: #f9fafb;
+}
+
+/* Customize hide icon appearance */
+.mf-panel-hide-icon:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+    color: #ef4444;
+}
+
+/* Change transition timing */
+.mf-panel-left,
+.mf-panel-right {
+    transition: width 0.5s ease-in-out; /* Slower animation */
+}
+
+/* Style resizer handles */
+.mf-resizer {
+    background-color: #e5e7eb;
+}
+
+.mf-resizer:hover {
+    background-color: #3b82f6;
+}
+```
+
+## Examples
+
+### Example 1: Code Editor Layout
+
+A typical code editor with file explorer, editor, and properties panel:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Panel import Panel
+
+# Create panel
+panel = Panel(parent=root_instance)
+
+# Left panel: File Explorer
+panel.set_left(
+  Div(
+    H3("Explorer", cls="font-bold mb-2"),
+    Div(
+      Div("📁 src", cls="font-mono cursor-pointer"),
+      Div("  📄 app.py", cls="font-mono ml-4 cursor-pointer"),
+      Div("  📄 config.py", cls="font-mono ml-4 cursor-pointer"),
+      Div("📁 tests", cls="font-mono cursor-pointer"),
+      Div("  📄 test_app.py", cls="font-mono ml-4 cursor-pointer"),
+      cls="space-y-1"
+    ),
+    cls="p-4"
+  )
+)
+
+# Main: Code Editor
+panel.set_main(
+  Div(
+    Div(
+      Span("app.py", cls="font-bold"),
+      Span("Python", cls="text-sm opacity-60 ml-2"),
+      cls="border-b pb-2 mb-2"
+    ),
+    Textarea(
+      """def main():
+print("Hello, World!")
+
+if __name__ == "__main__":
+main()""",
+      rows=20,
+      cls="w-full font-mono text-sm p-2 border rounded"
+    ),
+    cls="p-4"
+  )
+)
+
+# Right panel: Properties and Tools
+panel.set_right(
+  Div(
+    H3("Properties", cls="font-bold mb-2"),
+    Div("Language: Python", cls="text-sm mb-1"),
+    Div("Lines: 5", cls="text-sm mb-1"),
+    Div("Size: 87 bytes", cls="text-sm mb-4"),
+    
+    H3("Tools", cls="font-bold mb-2 mt-4"),
+    Button("Run", cls="btn btn-sm btn-primary w-full mb-2"),
+    Button("Debug", cls="btn btn-sm w-full mb-2"),
+    Button("Format", cls="btn btn-sm w-full"),
+    cls="p-4"
+  )
+)
+
+return panel
+```
+
+### Example 2: Dashboard with Filters
+
+A data dashboard with filters sidebar and details panel:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Panel import Panel
+
+# Create panel
+panel = Panel(parent=root_instance)
+
+# Left panel: Filters
+panel.set_left(
+  Div(
+    H3("Filters", cls="font-bold mb-3"),
+    
+    Div(
+      Label("Date Range", cls="label"),
+      Select(
+        Option("Last 7 days"),
+        Option("Last 30 days"),
+        Option("Last 90 days"),
+        cls="select select-bordered w-full"
+      ),
+      cls="mb-3"
+    ),
+    
+    Div(
+      Label("Category", cls="label"),
+      Div(
+        Label(Input(type="checkbox", cls="checkbox"), " Sales", cls="label cursor-pointer"),
+        Label(Input(type="checkbox", cls="checkbox"), " Marketing", cls="label cursor-pointer"),
+        Label(Input(type="checkbox", cls="checkbox"), " Support", cls="label cursor-pointer"),
+        cls="space-y-2"
+      ),
+      cls="mb-3"
+    ),
+    
+    Button("Apply Filters", cls="btn btn-primary w-full"),
+    cls="p-4"
+  )
+)
+
+# Main: Dashboard Charts
+panel.set_main(
+  Div(
+    H1("Analytics Dashboard", cls="text-2xl font-bold mb-4"),
+    
+    Div(
+      Div(
+        Div("Total Revenue", cls="stat-title"),
+        Div("$45,231", cls="stat-value"),
+        Div("+12% from last month", cls="stat-desc"),
+        cls="stat"
+      ),
+      Div(
+        Div("Active Users", cls="stat-title"),
+        Div("2,345", cls="stat-value"),
+        Div("+8% from last month", cls="stat-desc"),
+        cls="stat"
+      ),
+      cls="stats shadow mb-4"
+    ),
+    
+    Div("[Chart placeholder - Revenue over time]", cls="border rounded p-8 text-center"),
+    cls="p-4"
+  )
+)
+
+# Right panel: Details and Insights
+panel.set_right(
+  Div(
+    H3("Key Insights", cls="font-bold mb-3"),
+    
+    Div(
+      Div("🎯 Top Performing", cls="font-bold mb-1"),
+      Div("Product A: $12,450", cls="text-sm"),
+      Div("Product B: $8,920", cls="text-sm mb-3")
+    ),
+    
+    Div(
+      Div("📊 Trending Up", cls="font-bold mb-1"),
+      Div("Category: Electronics", cls="text-sm"),
+      Div("+23% this week", cls="text-sm mb-3")
+    ),
+    
+    Div(
+      Div("⚠️ Needs Attention", cls="font-bold mb-1"),
+      Div("Low stock: Item X", cls="text-sm"),
+      Div("Response time: +15%", cls="text-sm")
+    ),
+    cls="p-4"
+  )
+)
+
+return panel
+```
+
+### Example 3: Simple Layout (Main Content Only)
+
+A minimal panel with no side panels, focusing only on main content:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Panel import Panel, PanelConf
+
+# Create panel with both side panels disabled
+conf = PanelConf(left=False, right=False)
+panel = Panel(parent=root_instance, conf=conf)
+
+# Only main content
+panel.set_main(
+  Article(
+    H1("Welcome to My Blog", cls="text-3xl font-bold mb-4"),
+    P("This is a simple layout focusing entirely on the main content."),
+    P("No side panels distract from the reading experience."),
+    P("The content takes up the full width of the container."),
+    cls="prose max-w-none p-8"
+  )
+)
+
+return panel
+```
+
+### Example 4: Dynamic Panel Updates
+
+Controlling panels programmatically based on user interaction:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.Panel import Panel
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+
+# Create panel
+panel = Panel(parent=root_instance)
+
+# Set up content
+panel.set_left(
+  Div(
+    H3("Navigation"),
+    Ul(
+      Li("Dashboard"),
+      Li("Reports"),
+      Li("Settings")
+    )
+  )
+)
+
+panel.set_right(
+  Div(
+    H3("Debug Info"),
+    Div("Session ID: abc123"),
+    Div("User: Admin"),
+    Div("Timestamp: 2024-01-15")
+  )
+)
+
+# Create control buttons
+toggle_left_btn = mk.button(
+  "Toggle Left Panel",
+  command=panel.commands.set_side_visible("left", False),
+  cls="btn btn-sm"
+)
+
+toggle_right_btn = mk.button(
+  "Toggle Right Panel",
+  command=panel.commands.set_side_visible("right", False),
+  cls="btn btn-sm"
+)
+
+show_all_btn = mk.button(
+  "Show All Panels",
+  command=Command(
+    "show_all",
+    "Show all panels",
+    lambda: (
+            panel.toggle_side("left", True),
+            panel.toggle_side("right", True)
+    )
+  ),
+  cls="btn btn-sm btn-primary"
+)
+
+# Main content with controls
+panel.set_main(
+  Div(
+    H1("Panel Controls Demo", cls="text-2xl font-bold mb-4"),
+
+    Div(
+      toggle_left_btn,
+      toggle_right_btn,
+      show_all_btn,
+      cls="space-x-2 mb-4"
+    ),
+
+    P("Use the buttons above to toggle panels programmatically."),
+    P("You can also use the hide (−) and show (⋯) icons."),
+
+    cls="p-4"
+  )
+)
+
+return panel
+```
+
+---
+
+## Developer Reference
+
+This section contains technical details for developers working on the Panel component itself.
+
+### Configuration
+
+The Panel component uses `PanelConf` dataclass for configuration:
+
+| Property             | Type    | Description                               | Default   |
+|----------------------|---------|-------------------------------------------|-----------|
+| `left`               | boolean | Enable/disable left panel                 | `False`   |
+| `right`              | boolean | Enable/disable right panel                | `True`    |
+| `left_title`         | string  | Title displayed in left panel header      | `"Left"`  |
+| `right_title`        | string  | Title displayed in right panel header     | `"Right"` |
+| `show_left_title`    | boolean | Show title header on left panel           | `True`    |
+| `show_right_title`   | boolean | Show title header on right panel          | `True`    |
+| `show_display_left`  | boolean | Show the "show" icon when left is hidden  | `True`    |
+| `show_display_right` | boolean | Show the "show" icon when right is hidden | `True`    |
+
+### State
+
+The Panel component maintains the following state properties via `PanelState`:
+
+| Name            | Type    | Description                        | Default |
+|-----------------|---------|------------------------------------|---------|
+| `left_visible`  | boolean | True if the left panel is visible  | `True`  |
+| `right_visible` | boolean | True if the right panel is visible | `True`  |
+| `left_width`    | integer | Width of the left panel in pixels  | `250`   |
+| `right_width`   | integer | Width of the right panel in pixels | `250`   |
+
+### Commands
+
+Available commands for programmatic control:
+
+| Name                         | Description                                                       |
+|------------------------------|-------------------------------------------------------------------|
+| `toggle_side(side, visible)` | Sets panel visibility (side: "left"/"right", visible: True/False) |
+| `update_side_width(side)`    | Updates panel width from HTMX request (side: "left"/"right")      |
+
+**Note:** The old `toggle_side(side)` command without the `visible` parameter is deprecated but still available in the
+codebase.
+
+### Public Methods
+
+| Method               | Description                  | Returns |
+|----------------------|------------------------------|---------|
+| `set_main(content)`  | Sets the main content area   | `self`  |
+| `set_left(content)`  | Sets the left panel content  | `Div`   |
+| `set_right(content)` | Sets the right panel content | `Div`   |
+| `render()`           | Renders the complete panel   | `Div`   |
+
+### High Level Hierarchical Structure
+
+**With title (default, `show_*_title=True`):**
+
+```
+Div(id="{id}", cls="mf-panel")
+├── Div(id="{id}_pl", cls="mf-panel-left mf-panel-with-title [mf-hidden]")
+│   ├── Div(cls="mf-panel-body")
+│   │   ├── Div(cls="mf-panel-header")
+│   │   │   ├── Div [Title text]
+│   │   │   └── Div (hide icon)
+│   │   └── Div(id="{id}_cl", cls="mf-panel-content")
+│   │       └── [Left content - scrollable]
+│   └── Div (resizer-left)
+├── Div(cls="mf-panel-main")
+│   ├── Div(id="{id}_show_left", cls="hidden|mf-panel-show-icon-left")
+│   ├── Div(id="{id}_m", cls="mf-panel-main")
+│   │   └── [Main content]
+│   └── Div(id="{id}_show_right", cls="hidden|mf-panel-show-icon-right")
+├── Div(id="{id}_pr", cls="mf-panel-right mf-panel-with-title [mf-hidden]")
+│   ├── Div (resizer-right)
+│   └── Div(cls="mf-panel-body")
+│       ├── Div(cls="mf-panel-header")
+│       │   ├── Div [Title text]
+│       │   └── Div (hide icon)
+│       └── Div(id="{id}_cr", cls="mf-panel-content")
+│           └── [Right content - scrollable]
+└── Script  # initResizer('{id}')
+```
+
+**Without title (legacy, `show_*_title=False`):**
+
+```
+Div(id="{id}", cls="mf-panel")
+├── Div(id="{id}_pl", cls="mf-panel-left [mf-hidden]")
+│   ├── Div (hide icon - absolute positioned)
+│   ├── Div(id="{id}_cl")
+│   │   └── [Left content]
+│   └── Div (resizer-left)
+├── Div(cls="mf-panel-main")
+│   ├── Div(id="{id}_show_left", cls="hidden|mf-panel-show-icon-left")
+│   ├── Div(id="{id}_m", cls="mf-panel-main")
+│   │   └── [Main content]
+│   └── Div(id="{id}_show_right", cls="hidden|mf-panel-show-icon-right")
+├── Div(id="{id}_pr", cls="mf-panel-right [mf-hidden]")
+│   ├── Div (resizer-right)
+│   ├── Div (hide icon - absolute positioned)
+│   └── Div(id="{id}_cr")
+│       └── [Right content]
+└── Script  # initResizer('{id}')
+```
+
+**Note:**
+
+- With title: uses grid layout (`mf-panel-body`) with sticky header and scrollable content
+- Without title: hide icon is absolutely positioned at top-right with padding-top on panel
+- Left panel: body/content then resizer (resizer on right edge)
+- Right panel: resizer then body/content (resizer on left edge)
+- `[mf-hidden]` class is conditionally applied when panel is hidden
+- `mf-panel-with-title` class removes default padding-top when using title layout
+
+### Element IDs
+
+| Name             | Description                         |
+|------------------|-------------------------------------|
+| `{id}`           | Root panel container                |
+| `{id}_pl`        | Left panel container                |
+| `{id}_pr`        | Right panel container               |
+| `{id}_cl`        | Left panel content wrapper          |
+| `{id}_cr`        | Right panel content wrapper         |
+| `{id}_m`         | Main content wrapper                |
+| `{id}_show_left` | Show icon for left panel (in main)  |
+| `{id}_show_right`| Show icon for right panel (in main) |
+
+**Note:** `{id}` is the Panel instance ID (auto-generated UUID or custom `_id`).
+
+**ID Management:**
+
+The Panel component uses the `PanelIds` helper class to manage element IDs consistently. Access IDs programmatically:
+
+```python
+panel = Panel(parent=root_instance)
+
+# Access IDs via get_ids()
+panel.get_ids().panel("left")   # Returns "{id}_pl"
+panel.get_ids().panel("right")  # Returns "{id}_pr"
+panel.get_ids().left            # Returns "{id}_cl"
+panel.get_ids().right           # Returns "{id}_cr"
+panel.get_ids().main            # Returns "{id}_m"
+panel.get_ids().content("left") # Returns "{id}_cl"
+```
+
+### Internal Methods
+
+These methods are used internally for rendering:
+
+| Method                | Description                                       |
+|-----------------------|---------------------------------------------------|
+| `_mk_panel(side)`     | Renders a panel (left or right) with all elements |
+| `_mk_show_icon(side)` | Renders the show icon for a panel                 |
+
+**Method details:**
+
+- `_mk_panel(side)`:
+    - Checks if panel is enabled in config
+    - Creates resizer with command and data attributes
+    - Creates hide icon with toggle command
+    - Applies `mf-hidden` class if panel is not visible
+    - Returns None if panel is disabled
+
+- `_mk_show_icon(side)`:
+    - Checks if panel is enabled in config
+    - Returns None if panel is disabled or visible
+    - Applies `hidden` (Tailwind) class if panel is visible
+    - Applies positioning class based on side
+
+### JavaScript Integration
+
+The Panel component uses JavaScript for manual resizing:
+
+**initResizer(panelId):**
+
+- Initializes drag-and-drop resize functionality
+- Adds/removes `no-transition` class during drag
+- Sends width updates to server via HTMX
+- Constrains width between 150px and 500px
+
+**File:** `src/myfasthtml/assets/core/myfasthtml.js`

docs/TabsManager.md

@@ -0,0 +1,648 @@
+# TabsManager Component
+
+## Introduction
+
+The TabsManager component provides a dynamic tabbed interface for organizing multiple views within your FastHTML
+application. It handles tab creation, activation, closing, and content management with automatic state persistence and
+HTMX-powered interactions.
+
+**Key features:**
+
+- Dynamic tab creation and removal at runtime
+- Automatic content caching for performance
+- Session-based state persistence (tabs, order, active tab)
+- Duplicate tab detection based on component identity
+- Built-in search menu for quick tab navigation
+- Auto-increment labels for programmatic tab creation
+- HTMX-powered updates without page reload
+
+**Common use cases:**
+
+- Multi-document editor (code editor, text editor)
+- Dashboard with multiple data views
+- Settings interface with different configuration panels
+- Developer tools with console, inspector, network tabs
+- Application with dynamic content sections
+
+## Quick Start
+
+Here's a minimal example showing a tabbed interface with three views:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TabsManager import TabsManager
+from myfasthtml.core.instances import RootInstance
+
+# Create root instance and tabs manager
+root = RootInstance(session)
+tabs = TabsManager(parent=root)
+
+# Create three tabs with different content
+tabs.create_tab("Dashboard", Div(H1("Dashboard"), P("Overview of your data")))
+tabs.create_tab("Settings", Div(H1("Settings"), P("Configure your preferences")))
+tabs.create_tab("Profile", Div(H1("Profile"), P("Manage your profile")))
+
+# Render the tabs manager
+return tabs
+```
+
+This creates a complete tabbed interface with:
+
+- A header bar displaying three clickable tab buttons ("Dashboard", "Settings", "Profile")
+- Close buttons (×) on each tab for dynamic removal
+- A main content area showing the active tab's content
+- A search menu (⊞ icon) for quick tab navigation when many tabs are open
+- Automatic HTMX updates when switching or closing tabs
+
+**Note:** Tabs are interactive by default. Users can click tab labels to switch views, click close buttons to remove
+tabs, or use the search menu to find tabs quickly. All interactions update the UI without page reload thanks to HTMX
+integration.
+
+## Basic Usage
+
+### Visual Structure
+
+The TabsManager component consists of a header with tab buttons and a content area:
+
+```
+┌────────────────────────────────────────────────────────────┐
+│  Tab Header                                                │
+│  ┌──────────┐ ┌──────────┐ ┌──────────┐          ┌────┐    │
+│  │ Tab 1  × │ │ Tab 2  × │ │ Tab 3  × │          │ ⊞  │    │
+│  └──────────┘ └──────────┘ └──────────┘          └────┘    │
+├────────────────────────────────────────────────────────────┤
+│                                                            │
+│                                                            │
+│                    Active Tab Content                      │
+│                                                            │
+│                                                            │
+└────────────────────────────────────────────────────────────┘
+```
+
+**Component details:**
+
+| Element          | Description                             |
+|------------------|-----------------------------------------|
+| Tab buttons      | Clickable labels to switch between tabs |
+| Close button (×) | Removes the tab and its content         |
+| Search menu (⊞)  | Dropdown menu to search and filter tabs |
+| Content area     | Displays the active tab's content       |
+
+### Creating a TabsManager
+
+The TabsManager is a `MultipleInstance`, meaning you can create multiple independent tab managers in your application.
+Create it by providing a parent instance:
+
+```python
+tabs = TabsManager(parent=root_instance)
+
+# Or with a custom ID
+tabs = TabsManager(parent=root_instance, _id="my-tabs")
+```
+
+### Creating Tabs
+
+Use the `create_tab()` method to add a new tab:
+
+```python
+# Create a tab with custom content
+tab_id = tabs.create_tab(
+  label="My Tab",
+  component=Div(H1("Content"), P("Tab content here"))
+)
+
+# Create with a MyFastHtml control
+from myfasthtml.controls.VisNetwork import VisNetwork
+
+network = VisNetwork(parent=tabs, nodes=nodes_data, edges=edges_data)
+tab_id = tabs.create_tab("Network View", network)
+
+# Create without activating immediately
+tab_id = tabs.create_tab("Background Tab", content, activate=False)
+```
+
+**Parameters:**
+
+- `label` (str): Display text shown in the tab button
+- `component` (Any): Content to display in the tab (FastHTML elements or MyFastHtml controls)
+- `activate` (bool): Whether to make this tab active immediately (default: True)
+
+**Returns:** A unique `tab_id` (UUID string) that identifies the tab
+
+### Showing Tabs
+
+Use the `show_tab()` method to activate and display a tab:
+
+```python
+# Show a tab (makes it active and sends content to client if needed)
+tabs.show_tab(tab_id)
+
+# Show without activating (just send content to client)
+tabs.show_tab(tab_id, activate=False)
+```
+
+**Parameters:**
+
+- `tab_id` (str): The UUID of the tab to show
+- `activate` (bool): Whether to make this tab active (default: True)
+
+**Note:** The first time a tab is shown, its content is sent to the client and cached. Subsequent activations just
+toggle visibility without re-sending content.
+
+### Closing Tabs
+
+Use the `close_tab()` method to remove a tab:
+
+```python
+# Close a specific tab
+tabs.close_tab(tab_id)
+```
+
+**What happens when closing:**
+
+1. Tab is removed from the tab list and order
+2. Content is removed from cache and client
+3. If the closed tab was active, the first remaining tab becomes active
+4. If no tabs remain, `active_tab` is set to `None`
+
+### Changing Tab Content
+
+Use the `change_tab_content()` method to update an existing tab's content and label:
+
+```python
+# Update tab content and label
+new_content = Div(H1("Updated"), P("New content"))
+tabs.change_tab_content(
+  tab_id=tab_id,
+  label="Updated Tab",
+  component=new_content,
+  activate=True
+)
+```
+
+**Parameters:**
+
+- `tab_id` (str): The UUID of the tab to update
+- `label` (str): New label for the tab
+- `component` (Any): New content to display
+- `activate` (bool): Whether to activate the tab after updating (default: True)
+
+**Note:** This method forces the new content to be sent to the client, even if the tab was already displayed.
+
+## Advanced Features
+
+### Auto-increment Labels
+
+When creating multiple tabs programmatically, you can use auto-increment to generate unique labels:
+
+```python
+# Using the on_new_tab method with auto_increment
+def create_multiple_tabs():
+  # Creates "Untitled_0", "Untitled_1", "Untitled_2"
+  tabs.on_new_tab("Untitled", content, auto_increment=True)
+  tabs.on_new_tab("Untitled", content, auto_increment=True)
+  tabs.on_new_tab("Untitled", content, auto_increment=True)
+```
+
+**How it works:**
+
+- The TabsManager maintains an internal counter (`_tab_count`)
+- When `auto_increment=True`, the counter value is appended to the label
+- Counter increments with each auto-incremented tab creation
+- Useful for "New Tab 1", "New Tab 2" patterns in editors or tools
+
+### Duplicate Detection
+
+The TabsManager automatically detects and reuses tabs with identical content to prevent duplicates:
+
+```python
+# Create a control instance
+network = VisNetwork(parent=tabs, nodes=data, edges=edges)
+
+# First call creates a new tab
+tab_id_1 = tabs.create_tab("Network", network)
+
+# Second call with same label and component returns existing tab_id
+tab_id_2 = tabs.create_tab("Network", network)
+
+# tab_id_1 == tab_id_2  (True - same tab!)
+```
+
+**Detection criteria:**
+A tab is considered a duplicate if all three match:
+
+- Same `label`
+- Same `component_type` (component class prefix)
+- Same `component_id` (component instance ID)
+
+**Note:** This only works with `BaseInstance` components (MyFastHtml controls). Plain FastHTML elements don't have IDs
+and will always create new tabs.
+
+### Dynamic Content Updates
+
+You can update tabs dynamically during the session:
+
+```python
+# Initial tab creation
+tab_id = tabs.create_tab("Data View", Div("Loading..."))
+
+
+# Later, update with actual data
+def load_data():
+  data_content = Div(H2("Data"), P("Loaded content"))
+  tabs.change_tab_content(tab_id, "Data View", data_content)
+  # Returns HTMX response to update the UI
+```
+
+**Use cases:**
+
+- Loading data asynchronously
+- Refreshing tab content based on user actions
+- Updating visualizations with new data
+- Switching between different views in the same tab
+
+### Tab Search Menu
+
+The built-in search menu helps users navigate when many tabs are open:
+
+```python
+# The search menu is automatically created and includes:
+# - A Search control for filtering tabs by label
+# - Live filtering as you type
+# - Click to activate a tab from search results
+```
+
+**How to access:**
+
+- Click the ⊞ icon in the tab header
+- Start typing to filter tabs by label
+- Click a result to activate that tab
+
+The search menu updates automatically when tabs are added or removed.
+
+### HTMX Out-of-Band Swaps
+
+For advanced HTMX control, you can customize swap behavior:
+
+```python
+# Standard behavior (out-of-band swap enabled)
+tabs.show_tab(tab_id, oob=True)  # Default
+
+# Custom target behavior (disable out-of-band)
+tabs.show_tab(tab_id, oob=False)  # Swap into HTMX target only
+```
+
+**When to use `oob=False`:**
+
+- When you want to control the exact HTMX target
+- When combining with other HTMX responses
+- When the tab activation is triggered by a command with a specific target
+
+**When to use `oob=True` (default):**
+
+- Most common use case
+- Allows other controls to trigger tab changes without caring about targets
+- Enables automatic UI updates across multiple elements
+
+### CSS Customization
+
+The TabsManager uses CSS classes that you can customize:
+
+| Class                    | Element                         |
+|--------------------------|---------------------------------|
+| `mf-tabs-manager`        | Root tabs manager container     |
+| `mf-tabs-header-wrapper` | Header wrapper (buttons + menu) |
+| `mf-tabs-header`         | Tab buttons container           |
+| `mf-tab-button`          | Individual tab button           |
+| `mf-tab-active`          | Active tab button (modifier)    |
+| `mf-tab-label`           | Tab label text                  |
+| `mf-tab-close-btn`       | Close button (×)                |
+| `mf-tab-content-wrapper` | Content area container          |
+| `mf-tab-content`         | Individual tab content          |
+| `mf-empty-content`       | Empty state when no tabs        |
+
+**Example customization:**
+
+```css
+/* Change active tab color */
+.mf-tab-active {
+    background-color: #3b82f6;
+    color: white;
+}
+
+/* Customize close button */
+.mf-tab-close-btn:hover {
+    color: red;
+}
+
+/* Style the content area */
+.mf-tab-content-wrapper {
+    padding: 2rem;
+    background-color: #f9fafb;
+}
+```
+
+## Examples
+
+### Example 1: Multi-view Application
+
+A typical application with different views accessible through tabs:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TabsManager import TabsManager
+from myfasthtml.core.instances import RootInstance
+
+# Create tabs manager
+root = RootInstance(session)
+tabs = TabsManager(parent=root, _id="app-tabs")
+
+# Dashboard view
+dashboard = Div(
+  H1("Dashboard"),
+  Div(
+    Div("Total Users: 1,234", cls="stat"),
+    Div("Active Sessions: 56", cls="stat"),
+    Div("Revenue: $12,345", cls="stat"),
+    cls="stats-grid"
+  )
+)
+
+# Analytics view
+analytics = Div(
+  H1("Analytics"),
+  P("Detailed analytics and reports"),
+  Div("Chart placeholder", cls="chart-container")
+)
+
+# Settings view
+settings = Div(
+  H1("Settings"),
+  Form(
+    Label("Username:", Input(name="username", value="admin")),
+    Label("Email:", Input(name="email", value="admin@example.com")),
+    Button("Save", type="submit"),
+  )
+)
+
+# Create tabs
+tabs.create_tab("Dashboard", dashboard)
+tabs.create_tab("Analytics", analytics)
+tabs.create_tab("Settings", settings)
+
+# Render
+return tabs
+```
+
+### Example 2: Dynamic Tabs with VisNetwork
+
+Creating tabs dynamically with interactive network visualizations:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TabsManager import TabsManager
+from myfasthtml.controls.VisNetwork import VisNetwork
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.instances import RootInstance
+
+root = RootInstance(session)
+tabs = TabsManager(parent=root, _id="network-tabs")
+
+# Create initial tab with welcome message
+tabs.create_tab("Welcome", Div(
+  H1("Network Visualizer"),
+  P("Click 'Add Network' to create a new network visualization")
+))
+
+
+# Function to create a new network tab
+def add_network_tab():
+  # Define network data
+  nodes = [
+      {"id": 1, "label": "Node 1"},
+      {"id": 2, "label": "Node 2"},
+      {"id": 3, "label": "Node 3"}
+  ]
+  edges = [
+      {"from": 1, "to": 2},
+      {"from": 2, "to": 3}
+  ]
+  
+  # Create network instance
+  network = VisNetwork(parent=tabs, nodes=nodes, edges=edges)
+  
+  # Use auto-increment to create unique labels
+  return tabs.on_new_tab("Network", network, auto_increment=True)
+
+
+# Create command for adding networks
+add_cmd = Command("add_network", "Add network tab", add_network_tab)
+
+# Add button to create new network tabs
+add_button = mk.button("Add Network", command=add_cmd, cls="btn btn-primary")
+
+# Return tabs and button
+return Div(add_button, tabs)
+```
+
+### Example 3: Tab Management with Content Updates
+
+An application that updates tab content based on user interaction:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TabsManager import TabsManager
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.instances import RootInstance
+
+root = RootInstance(session)
+tabs = TabsManager(parent=root, _id="editor-tabs")
+
+# Create initial document tabs
+doc1_id = tabs.create_tab("Document 1", Textarea("Initial content 1", rows=10))
+doc2_id = tabs.create_tab("Document 2", Textarea("Initial content 2", rows=10))
+
+
+# Function to refresh a document's content
+def refresh_document(tab_id, doc_name):
+  # Simulate loading new content
+  new_content = Textarea(f"Refreshed content for {doc_name}\nTimestamp: {datetime.now()}", rows=10)
+  tabs.change_tab_content(tab_id, doc_name, new_content)
+  return tabs._mk_tabs_controller(oob=True), tabs._mk_tabs_header_wrapper(oob=True)
+
+
+# Create refresh commands
+refresh_doc1 = Command("refresh_1", "Refresh doc 1", refresh_document, doc1_id, "Document 1")
+refresh_doc2 = Command("refresh_2", "Refresh doc 2", refresh_document, doc2_id, "Document 2")
+
+# Add refresh buttons
+controls = Div(
+  mk.button("Refresh Document 1", command=refresh_doc1, cls="btn btn-sm"),
+  mk.button("Refresh Document 2", command=refresh_doc2, cls="btn btn-sm"),
+  cls="controls-bar"
+)
+
+return Div(controls, tabs)
+```
+
+### Example 4: Using Auto-increment for Dynamic Tabs
+
+Creating multiple tabs programmatically with auto-generated labels:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TabsManager import TabsManager
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.instances import RootInstance
+
+root = RootInstance(session)
+tabs = TabsManager(parent=root, _id="dynamic-tabs")
+
+# Create initial placeholder tab
+tabs.create_tab("Start", Div(
+  H2("Welcome"),
+  P("Click 'New Tab' to create numbered tabs")
+))
+
+
+# Function to create a new numbered tab
+def create_numbered_tab():
+  content = Div(
+    H2("New Tab Content"),
+    P(f"This tab was created dynamically"),
+    Input(placeholder="Enter some text...", cls="input")
+  )
+  # Auto-increment creates "Tab_0", "Tab_1", "Tab_2", etc.
+  return tabs.on_new_tab("Tab", content, auto_increment=True)
+
+
+# Create command
+new_tab_cmd = Command("new_tab", "Create new tab", create_numbered_tab)
+
+# Add button
+new_tab_button = mk.button("New Tab", command=new_tab_cmd, cls="btn btn-primary")
+
+return Div(
+  Div(new_tab_button, cls="toolbar"),
+  tabs
+)
+```
+
+---
+
+## Developer Reference
+
+This section contains technical details for developers working on the TabsManager component itself.
+
+### State
+
+The TabsManager component maintains the following state properties:
+
+| Name                     | Type           | Description                                       | Default |
+|--------------------------|----------------|---------------------------------------------------|---------|
+| `tabs`                   | dict[str, Any] | Dictionary of tab metadata (id, label, component) | `{}`    |
+| `tabs_order`             | list[str]      | Ordered list of tab IDs                           | `[]`    |
+| `active_tab`             | str \| None    | ID of the currently active tab                    | `None`  |
+| `ns_tabs_content`        | dict[str, Any] | Cache of tab content (raw, not wrapped)           | `{}`    |
+| `ns_tabs_sent_to_client` | set            | Set of tab IDs already sent to client             | `set()` |
+
+**Note:** Properties prefixed with `ns_` are not persisted in the database and exist only for the session.
+
+### Commands
+
+Available commands for programmatic control:
+
+| Name                                        | Description                                |
+|---------------------------------------------|--------------------------------------------|
+| `show_tab(tab_id)`                          | Activate or show a specific tab            |
+| `close_tab(tab_id)`                         | Close a specific tab                       |
+| `add_tab(label, component, auto_increment)` | Add a new tab with optional auto-increment |
+
+### Public Methods
+
+| Method                                                        | Description                                     |
+|---------------------------------------------------------------|-------------------------------------------------|
+| `create_tab(label, component, activate=True)`                 | Create a new tab or reuse existing duplicate    |
+| `show_tab(tab_id, activate=True, oob=True)`                   | Send tab to client and/or activate it           |
+| `close_tab(tab_id)`                                           | Close and remove a tab                          |
+| `change_tab_content(tab_id, label, component, activate=True)` | Update existing tab's label and content         |
+| `on_new_tab(label, component, auto_increment=False)`          | Create and show tab with auto-increment support |
+| `add_tab_btn()`                                               | Returns add tab button element                  |
+| `get_state()`                                                 | Returns the TabsManagerState object             |
+| `render()`                                                    | Renders the complete TabsManager component      |
+
+### High Level Hierarchical Structure
+
+```
+Div(id="{id}", cls="mf-tabs-manager")
+├── Div(id="{id}-controller")                 # Controller (hidden, manages active state)
+├── Div(id="{id}-header-wrapper")             # Header wrapper
+│   ├── Div(id="{id}-header")                 # Tab buttons container
+│   │   ├── Div (mf-tab-button)               # Tab button 1
+│   │   │   ├── Span (mf-tab-label)           # Label (clickable)
+│   │   │   └── Span (mf-tab-close-btn)       # Close button
+│   │   ├── Div (mf-tab-button)               # Tab button 2
+│   │   └── ...
+│   └── Div (dropdown)                        # Search menu
+│       ├── Icon (tabs24_regular)             # Menu toggle button
+│       └── Div (dropdown-content)            # Search component
+├── Div(id="{id}-content-wrapper")            # Content wrapper
+│   ├── Div(id="{id}-{tab_id_1}-content")     # Tab 1 content
+│   ├── Div(id="{id}-{tab_id_2}-content")     # Tab 2 content
+│   └── ...
+└── Script                                     # Initialization script
+```
+
+### Element IDs
+
+| Name                    | Description                             |
+|-------------------------|-----------------------------------------|
+| `{id}`                  | Root tabs manager container             |
+| `{id}-controller`       | Hidden controller managing active state |
+| `{id}-header-wrapper`   | Header wrapper (buttons + search)       |
+| `{id}-header`           | Tab buttons container                   |
+| `{id}-content-wrapper`  | Content area wrapper                    |
+| `{id}-{tab_id}-content` | Individual tab content                  |
+| `{id}-search`           | Search component ID                     |
+
+**Note:** `{id}` is the TabsManager instance ID, `{tab_id}` is the UUID of each tab.
+
+### Internal Methods
+
+These methods are used internally for rendering:
+
+| Method                                  | Description                                         |
+|-----------------------------------------|-----------------------------------------------------|
+| `_mk_tabs_controller(oob=False)`        | Renders the hidden controller element               |
+| `_mk_tabs_header_wrapper(oob=False)`    | Renders the header wrapper with buttons and search  |
+| `_mk_tab_button(tab_data)`              | Renders a single tab button                         |
+| `_mk_tab_content_wrapper()`             | Renders the content wrapper with active tab content |
+| `_mk_tab_content(tab_id, content)`      | Renders individual tab content div                  |
+| `_mk_show_tabs_menu()`                  | Renders the search dropdown menu                    |
+| `_wrap_tab_content(tab_content)`        | Wraps tab content for HTMX out-of-band insertion    |
+| `_get_or_create_tab_content(tab_id)`    | Gets tab content from cache or creates it           |
+| `_dynamic_get_content(tab_id)`          | Retrieves component from InstancesManager           |
+| `_tab_already_exists(label, component)` | Checks if duplicate tab exists                      |
+| `_add_or_update_tab(...)`               | Internal method to add/update tab in state          |
+| `_get_ordered_tabs()`                   | Returns tabs ordered by tabs_order list             |
+| `_get_tab_list()`                       | Returns list of tab dictionaries in order           |
+| `_get_tab_count()`                      | Returns and increments internal tab counter         |
+
+### Tab Metadata Structure
+
+Each tab in the `tabs` dictionary has the following structure:
+
+```python
+{
+    'id': 'uuid-string',  # Unique tab identifier
+    'label': 'Tab Label',  # Display label
+    'component_type': 'prefix',  # Component class prefix (or None)
+    'component_id': 'instance-id'  # Component instance ID (or None)
+}
+```
+
+**Note:** `component_type` and `component_id` are `None` for plain FastHTML elements that don't inherit from
+`BaseInstance`.

docs/TreeView.md

@@ -0,0 +1,596 @@
+# TreeView Component
+
+## Introduction
+
+The TreeView component provides an interactive hierarchical data visualization with full CRUD operations. It's designed for displaying tree-structured data like file systems, organizational charts, or navigation menus with inline editing capabilities.
+
+**Key features:**
+
+- Expand/collapse nodes with visual indicators
+- Add child and sibling nodes dynamically
+- Inline rename with keyboard support (ESC to cancel)
+- Delete nodes (only leaf nodes without children)
+- Node selection tracking
+- Persistent state per session
+- Configurable icons per node type
+
+**Common use cases:**
+
+- File/folder browser
+- Category/subcategory management
+- Organizational hierarchy viewer
+- Navigation menu builder
+- Document outline editor
+
+## Quick Start
+
+Here's a minimal example showing a file system tree:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TreeView import TreeView, TreeNode
+
+# Create TreeView instance
+tree = TreeView(parent=root_instance, _id="file-tree")
+
+# Add root folder
+root = TreeNode(id="root", label="Documents", type="folder")
+tree.add_node(root)
+
+# Add some files
+file1 = TreeNode(id="file1", label="report.pdf", type="file")
+file2 = TreeNode(id="file2", label="budget.xlsx", type="file")
+tree.add_node(file1, parent_id="root")
+tree.add_node(file2, parent_id="root")
+
+# Expand root to show children
+tree.expand_all()
+
+# Render the tree
+return tree
+```
+
+This creates an interactive tree where users can:
+- Click chevrons to expand/collapse folders
+- Click labels to select items
+- Use action buttons (visible on hover) to add, rename, or delete nodes
+
+**Note:** All interactions use commands and update via HTMX without page reload.
+
+## Basic Usage
+
+### Creating a TreeView
+
+TreeView is a `MultipleInstance`, allowing multiple trees per session. Create it with a parent instance:
+
+```python
+tree = TreeView(parent=root_instance, _id="my-tree")
+```
+
+### TreeNode Structure
+
+Nodes are represented by the `TreeNode` dataclass:
+
+```python
+from myfasthtml.controls.TreeView import TreeNode
+
+node = TreeNode(
+    id="unique-id",           # Auto-generated UUID if not provided
+    label="Node Label",       # Display text
+    type="default",           # Type for icon mapping
+    parent=None,              # Parent node ID (None for root)
+    children=[]               # List of child node IDs
+)
+```
+
+### Adding Nodes
+
+Add nodes using the `add_node()` method:
+
+```python
+# Add root node
+root = TreeNode(id="root", label="Root", type="folder")
+tree.add_node(root)
+
+# Add child node
+child = TreeNode(label="Child 1", type="item")
+tree.add_node(child, parent_id="root")
+
+# Add with specific position
+sibling = TreeNode(label="Child 2", type="item")
+tree.add_node(sibling, parent_id="root", insert_index=0)  # Insert at start
+```
+
+### Visual Structure
+
+```
+TreeView
+├── Root Node 1
+│   ├── [>] Child 1-1        # Collapsed node with children
+│   ├── [ ] Child 1-2        # Leaf node (no children)
+│   └── [v] Child 1-3        # Expanded node
+│       ├── [ ] Grandchild
+│       └── [ ] Grandchild
+└── Root Node 2
+    └── [>] Child 2-1
+```
+
+**Legend:**
+- `[>]` - Collapsed node (has children)
+- `[v]` - Expanded node (has children)
+- `[ ]` - Leaf node (no children)
+
+### Expanding Nodes
+
+Control node expansion programmatically:
+
+```python
+# Expand all nodes with children
+tree.expand_all()
+
+# Expand specific nodes by adding to opened list
+tree._state.opened.append("node-id")
+```
+
+**Note:** Users can also toggle nodes by clicking the chevron icon.
+
+## Interactive Features
+
+### Node Selection
+
+Users can select nodes by clicking on labels. The selected node is visually highlighted:
+
+```python
+# Programmatically select a node
+tree._state.selected = "node-id"
+
+# Check current selection
+current = tree._state.selected
+```
+
+### Adding Nodes
+
+Users can add nodes via action buttons (visible on hover):
+
+**Add Child:**
+- Adds a new node as a child of the target node
+- Automatically expands the parent
+- Creates node with same type as parent
+
+**Add Sibling:**
+- Adds a new node next to the target node (same parent)
+- Inserts after the target node
+- Cannot add sibling to root nodes
+
+```python
+# Programmatically add child
+tree._add_child(parent_id="root", new_label="New Child")
+
+# Programmatically add sibling
+tree._add_sibling(node_id="child1", new_label="New Sibling")
+```
+
+### Renaming Nodes
+
+Users can rename nodes via the edit button:
+
+1. Click the edit icon (visible on hover)
+2. Input field appears with current label
+3. Press Enter to save (triggers command)
+4. Press ESC to cancel (keyboard shortcut)
+
+```python
+# Programmatically start rename
+tree._start_rename("node-id")
+
+# Save rename
+tree._save_rename("node-id", "New Label")
+
+# Cancel rename
+tree._cancel_rename()
+```
+
+### Deleting Nodes
+
+Users can delete nodes via the delete button:
+
+**Restrictions:**
+- Can only delete leaf nodes (no children)
+- Attempting to delete a node with children raises an error
+- Deleted node is removed from parent's children list
+
+```python
+# Programmatically delete node
+tree._delete_node("node-id")  # Raises ValueError if node has children
+```
+
+## Content System
+
+### Node Types and Icons
+
+Assign types to nodes for semantic grouping and custom icon display:
+
+```python
+# Define node types
+root = TreeNode(label="Project", type="project")
+folder = TreeNode(label="src", type="folder")
+file = TreeNode(label="main.py", type="python-file")
+
+# Configure icons for types
+tree.set_icon_config({
+    "project": "fluent.folder_open",
+    "folder": "fluent.folder",
+    "python-file": "fluent.document_python"
+})
+```
+
+**Note:** Icon configuration is stored in state and persists within the session.
+
+### Hierarchical Organization
+
+Nodes automatically maintain parent-child relationships:
+
+```python
+# Get node's children
+node = tree._state.items["node-id"]
+child_ids = node.children
+
+# Get node's parent
+parent_id = node.parent
+
+# Navigate tree programmatically
+for child_id in node.children:
+    child_node = tree._state.items[child_id]
+    print(child_node.label)
+```
+
+### Finding Root Nodes
+
+Root nodes are nodes without a parent:
+
+```python
+root_nodes = [
+    node_id for node_id, node in tree._state.items.items()
+    if node.parent is None
+]
+```
+
+## Advanced Features
+
+### Keyboard Shortcuts
+
+TreeView includes keyboard support for common operations:
+
+| Key | Action |
+|-----|--------|
+| `ESC` | Cancel rename operation |
+
+Additional shortcuts can be added via the Keyboard component:
+
+```python
+from myfasthtml.controls.Keyboard import Keyboard
+
+tree = TreeView(parent=root_instance)
+# ESC handler is automatically included for cancel rename
+```
+
+### State Management
+
+TreeView maintains persistent state within the session:
+
+| State Property | Type | Description |
+|----------------|------|-------------|
+| `items` | `dict[str, TreeNode]` | All nodes indexed by ID |
+| `opened` | `list[str]` | IDs of expanded nodes |
+| `selected` | `str \| None` | Currently selected node ID |
+| `editing` | `str \| None` | Node being renamed (if any) |
+| `icon_config` | `dict[str, str]` | Type-to-icon mapping |
+
+### Dynamic Updates
+
+TreeView updates are handled via commands that return the updated tree:
+
+```python
+# Commands automatically target the tree for HTMX swap
+cmd = tree.commands.toggle_node("node-id")
+# When executed, returns updated TreeView with new state
+```
+
+### CSS Customization
+
+TreeView uses CSS classes for styling:
+
+| Class | Element |
+|-------|---------|
+| `mf-treeview` | Root container |
+| `mf-treenode-container` | Container for node and its children |
+| `mf-treenode` | Individual node row |
+| `mf-treenode.selected` | Selected node highlight |
+| `mf-treenode-label` | Node label text |
+| `mf-treenode-input` | Input field during rename |
+| `mf-treenode-actions` | Action buttons container (hover) |
+
+You can override these classes to customize appearance:
+
+```css
+.mf-treenode.selected {
+    background-color: #e0f2fe;
+    border-left: 3px solid #0284c7;
+}
+
+.mf-treenode-actions {
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+
+.mf-treenode:hover .mf-treenode-actions {
+    opacity: 1;
+}
+```
+
+## Examples
+
+### Example 1: File System Browser
+
+A file/folder browser with different node types:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TreeView import TreeView, TreeNode
+
+# Create tree
+tree = TreeView(parent=root_instance, _id="file-browser")
+
+# Configure icons
+tree.set_icon_config({
+    "folder": "fluent.folder",
+    "python": "fluent.document_python",
+    "text": "fluent.document_text"
+})
+
+# Build file structure
+root = TreeNode(id="root", label="my-project", type="folder")
+tree.add_node(root)
+
+src = TreeNode(id="src", label="src", type="folder")
+tree.add_node(src, parent_id="root")
+
+main = TreeNode(label="main.py", type="python")
+utils = TreeNode(label="utils.py", type="python")
+tree.add_node(main, parent_id="src")
+tree.add_node(utils, parent_id="src")
+
+readme = TreeNode(label="README.md", type="text")
+tree.add_node(readme, parent_id="root")
+
+# Expand to show structure
+tree.expand_all()
+
+return tree
+```
+
+### Example 2: Category Management
+
+Managing product categories with inline editing:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TreeView import TreeView, TreeNode
+
+tree = TreeView(parent=root_instance, _id="categories")
+
+# Root categories
+electronics = TreeNode(id="elec", label="Electronics", type="category")
+tree.add_node(electronics)
+
+# Subcategories
+computers = TreeNode(label="Computers", type="subcategory")
+phones = TreeNode(label="Phones", type="subcategory")
+tree.add_node(computers, parent_id="elec")
+tree.add_node(phones, parent_id="elec")
+
+# Products (leaf nodes)
+laptop = TreeNode(label="Laptops", type="product")
+desktop = TreeNode(label="Desktops", type="product")
+tree.add_node(laptop, parent_id=computers.id)
+tree.add_node(desktop, parent_id=computers.id)
+
+tree.expand_all()
+return tree
+```
+
+### Example 3: Document Outline Editor
+
+Building a document outline with headings:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TreeView import TreeView, TreeNode
+
+tree = TreeView(parent=root_instance, _id="outline")
+
+# Document structure
+doc = TreeNode(id="doc", label="My Document", type="document")
+tree.add_node(doc)
+
+# Chapters
+ch1 = TreeNode(id="ch1", label="Chapter 1: Introduction", type="heading1")
+ch2 = TreeNode(id="ch2", label="Chapter 2: Methods", type="heading1")
+tree.add_node(ch1, parent_id="doc")
+tree.add_node(ch2, parent_id="doc")
+
+# Sections
+sec1_1 = TreeNode(label="1.1 Background", type="heading2")
+sec1_2 = TreeNode(label="1.2 Objectives", type="heading2")
+tree.add_node(sec1_1, parent_id="ch1")
+tree.add_node(sec1_2, parent_id="ch1")
+
+# Subsections
+subsec = TreeNode(label="1.1.1 Historical Context", type="heading3")
+tree.add_node(subsec, parent_id=sec1_1.id)
+
+tree.expand_all()
+return tree
+```
+
+### Example 4: Dynamic Tree with Event Handling
+
+Responding to tree events with custom logic:
+
+```python
+from fasthtml.common import *
+from myfasthtml.controls.TreeView import TreeView, TreeNode
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+
+tree = TreeView(parent=root_instance, _id="dynamic-tree")
+
+# Initial structure
+root = TreeNode(id="root", label="Tasks", type="folder")
+tree.add_node(root)
+
+# Function to handle selection
+def on_node_selected(node_id):
+    # Custom logic when node is selected
+    node = tree._state.items[node_id]
+    tree._select_node(node_id)
+
+    # Update a detail panel elsewhere in the UI
+    return Div(
+        H3(f"Selected: {node.label}"),
+        P(f"Type: {node.type}"),
+        P(f"Children: {len(node.children)}")
+    )
+
+# Override select command with custom handler
+# (In practice, you'd extend the Commands class or use event callbacks)
+
+tree.expand_all()
+return tree
+```
+
+---
+
+## Developer Reference
+
+This section contains technical details for developers working on the TreeView component itself.
+
+### State
+
+The TreeView component maintains the following state properties:
+
+| Name | Type | Description | Default |
+|------|------|-------------|---------|
+| `items` | `dict[str, TreeNode]` | All nodes indexed by ID | `{}` |
+| `opened` | `list[str]` | Expanded node IDs | `[]` |
+| `selected` | `str \| None` | Selected node ID | `None` |
+| `editing` | `str \| None` | Node being renamed | `None` |
+| `icon_config` | `dict[str, str]` | Type-to-icon mapping | `{}` |
+
+### Commands
+
+Available commands for programmatic control:
+
+| Name | Description |
+|------|-------------|
+| `toggle_node(node_id)` | Toggle expand/collapse state |
+| `add_child(parent_id)` | Add child node to parent |
+| `add_sibling(node_id)` | Add sibling node after target |
+| `start_rename(node_id)` | Enter rename mode for node |
+| `save_rename(node_id)` | Save renamed node label |
+| `cancel_rename()` | Cancel rename operation |
+| `delete_node(node_id)` | Delete node (if no children) |
+| `select_node(node_id)` | Select a node |
+
+All commands automatically target the TreeView component for HTMX updates.
+
+### Public Methods
+
+| Method | Description |
+|--------|-------------|
+| `add_node(node, parent_id, insert_index)` | Add a node to the tree |
+| `expand_all()` | Expand all nodes with children |
+| `set_icon_config(config)` | Configure icons for node types |
+| `render()` | Render the complete TreeView |
+
+### TreeNode Dataclass
+
+```python
+@dataclass
+class TreeNode:
+    id: str                      # Unique identifier (auto-generated UUID)
+    label: str = ""              # Display text
+    type: str = "default"        # Node type for icon mapping
+    parent: Optional[str] = None # Parent node ID
+    children: list[str] = []     # Child node IDs
+```
+
+### High Level Hierarchical Structure
+
+```
+Div(id="treeview", cls="mf-treeview")
+├── Div(cls="mf-treenode-container", data-node-id="root1")
+│   ├── Div(cls="mf-treenode")
+│   │   ├── Icon                        # Toggle chevron
+│   │   ├── Span(cls="mf-treenode-label") | Input(cls="mf-treenode-input")
+│   │   └── Div(cls="mf-treenode-actions")
+│   │       ├── Icon                    # Add child
+│   │       ├── Icon                    # Rename
+│   │       └── Icon                    # Delete
+│   └── Div(cls="mf-treenode-container")  # Child nodes (if expanded)
+│       └── ...
+├── Div(cls="mf-treenode-container", data-node-id="root2")
+│   └── ...
+└── Keyboard                            # ESC handler
+```
+
+### Element IDs and Attributes
+
+| Attribute | Element | Description |
+|-----------|---------|-------------|
+| `id` | Root Div | TreeView component ID |
+| `data-node-id` | Node container | Node's unique ID |
+
+### Internal Methods
+
+These methods are used internally for rendering and state management:
+
+| Method | Description |
+|--------|-------------|
+| `_toggle_node(node_id)` | Toggle expand/collapse state |
+| `_add_child(parent_id, new_label)` | Add child node implementation |
+| `_add_sibling(node_id, new_label)` | Add sibling node implementation |
+| `_start_rename(node_id)` | Enter rename mode |
+| `_save_rename(node_id, node_label)` | Save renamed node |
+| `_cancel_rename()` | Cancel rename operation |
+| `_delete_node(node_id)` | Delete node if no children |
+| `_select_node(node_id)` | Select a node |
+| `_render_action_buttons(node_id)` | Render hover action buttons |
+| `_render_node(node_id, level)` | Recursively render node and children |
+
+### Commands Class
+
+The `Commands` nested class provides command factory methods:
+
+| Method | Returns |
+|--------|---------|
+| `toggle_node(node_id)` | Command to toggle node |
+| `add_child(parent_id)` | Command to add child |
+| `add_sibling(node_id)` | Command to add sibling |
+| `start_rename(node_id)` | Command to start rename |
+| `save_rename(node_id)` | Command to save rename |
+| `cancel_rename()` | Command to cancel rename |
+| `delete_node(node_id)` | Command to delete node |
+| `select_node(node_id)` | Command to select node |
+
+All commands are automatically configured with HTMX targeting.
+
+### Integration with Keyboard Component
+
+TreeView includes a Keyboard component for ESC key handling:
+
+```python
+Keyboard(self, {"esc": self.commands.cancel_rename()}, _id="-keyboard")
+```
+
+This enables users to press ESC to cancel rename operations without clicking.

docs/testing_rendered_components.md

@@ -0,0 +1,895 @@
+# Testing Rendered Components with Matcher
+
+## Introduction
+
+When testing FastHTML components, you need to verify that the HTML they generate is correct. Traditional approaches like string comparison are fragile and hard to maintain. The matcher module provides two powerful functions that make component testing simple and reliable:
+
+- **`matches(actual, expected)`** - Validates that a rendered element matches your expectations
+- **`find(ft, expected)`** - Searches for specific elements within an HTML tree
+
+**Key principle**: Test only what matters. The matcher compares only the elements and attributes you explicitly define in your `expected` pattern, ignoring everything else.
+
+### Why use matcher?
+
+**Without matcher:**
+```python
+# Fragile - breaks if whitespace or attribute order changes
+assert str(component.render()) == '<div id="x" class="y"><p>Text</p></div>'
+```
+
+**With matcher:**
+```python
+# Robust - tests only what matters
+from myfasthtml.test.matcher import matches
+from fasthtml.common import Div, P
+
+actual = component.render()
+expected = Div(P("Text"))
+matches(actual, expected)  # Passes - ignores id and class
+```
+
+---
+
+## Part 1: Function Reference
+
+### matches() - Validate Elements
+
+#### Purpose
+
+`matches()` validates that a rendered element structure corresponds exactly to an expected pattern. It's the primary tool for testing component rendering.
+
+**When to use it:**
+- Verifying component output in tests
+- Checking HTML structure
+- Validating attributes and content
+
+#### Basic Syntax
+
+```python
+from myfasthtml.test.matcher import matches
+
+matches(actual, expected)
+```
+
+- **`actual`**: The element to test (usually from `component.render()`)
+- **`expected`**: The pattern to match against (only include what you want to test)
+- **Returns**: `True` if matches, raises `AssertionError` if not
+
+#### Simple Examples
+
+**Example 1: Basic structure matching**
+
+```python
+from myfasthtml.test.matcher import matches
+from fasthtml.common import Div, P
+
+# The actual rendered element
+actual = Div(P("Hello World"), id="container", cls="main")
+
+# Expected pattern - tests only the structure
+expected = Div(P("Hello World"))
+
+matches(actual, expected)  # ✅ Passes - id and cls are ignored
+```
+
+**Example 2: Testing specific attributes**
+
+```python
+from fasthtml.common import Button
+
+actual = Button("Click me",
+                id="btn-1",
+                cls="btn btn-primary",
+                hx_post="/submit",
+                hx_target="#result")
+
+# Test only the HTMX attribute we care about
+expected = Button("Click me", hx_post="/submit")
+
+matches(actual, expected)  # ✅ Passes
+```
+
+**Example 3: Nested structure**
+
+```python
+from fasthtml.common import Div, H1, Form, Input, Button
+
+actual = Div(
+    H1("Registration Form"),
+    Form(
+        Input(name="email", type="email"),
+        Input(name="password", type="password"),
+        Button("Submit", type="submit")
+    ),
+    id="page",
+    cls="container"
+)
+
+# Test only the important parts
+expected = Div(
+    H1("Registration Form"),
+    Form(
+        Input(name="email"),
+        Button("Submit")
+    )
+)
+
+matches(actual, expected)  # ✅ Passes - ignores password field and attributes
+```
+
+#### Predicates Reference
+
+Predicates allow flexible validation when you don't know the exact value but want to validate a pattern.
+
+##### AttrPredicate - For attribute values
+
+**Contains(value)** - Attribute contains the value
+
+```python
+from myfasthtml.test.matcher import Contains
+from fasthtml.common import Div
+
+actual = Div(cls="container main-content active")
+expected = Div(cls=Contains("main-content"))
+
+matches(actual, expected)  # ✅ Passes
+```
+
+**StartsWith(value)** - Attribute starts with the value
+
+```python
+from myfasthtml.test.matcher import StartsWith
+from fasthtml.common import Input
+
+actual = Input(id="input-username-12345")
+expected = Input(id=StartsWith("input-username"))
+
+matches(actual, expected)  # ✅ Passes
+```
+
+**DoesNotContain(value)** - Attribute does not contain the value
+
+```python
+from myfasthtml.test.matcher import DoesNotContain
+from fasthtml.common import Div
+
+actual = Div(cls="container active")
+expected = Div(cls=DoesNotContain("disabled"))
+
+matches(actual, expected)  # ✅ Passes
+```
+
+**AnyValue()** - Attribute exists with any non-None value
+
+```python
+from myfasthtml.test.matcher import AnyValue
+from fasthtml.common import Button
+
+actual = Button("Click", data_action="submit-form", data_id="123")
+expected = Button("Click", data_action=AnyValue())
+
+matches(actual, expected)  # ✅ Passes - just checks data_action exists
+```
+
+##### ChildrenPredicate - For element children
+
+**Empty()** - Element has no children and no attributes
+
+```python
+from myfasthtml.test.matcher import Empty
+from fasthtml.common import Div
+
+actual = Div()
+expected = Div(Empty())
+
+matches(actual, expected)  # ✅ Passes
+```
+
+**NoChildren()** - Element has no children (but can have attributes)
+
+```python
+from myfasthtml.test.matcher import NoChildren
+from fasthtml.common import Div
+
+actual = Div(id="container", cls="empty")
+expected = Div(NoChildren())
+
+matches(actual, expected)  # ✅ Passes - has attributes but no children
+```
+
+**AttributeForbidden(attr_name)** - Attribute must not be present
+
+```python
+from myfasthtml.test.matcher import AttributeForbidden
+from fasthtml.common import Button
+
+actual = Button("Click me")
+expected = Button("Click me", AttributeForbidden("disabled"))
+
+matches(actual, expected)  # ✅ Passes - disabled attribute is not present
+```
+
+#### Error Messages Explained
+
+When a test fails, `matches()` provides a visual diff showing exactly where the problem is:
+
+```python
+from fasthtml.common import Div, Button
+
+actual = Div(Button("Submit", cls="btn-primary"), id="form")
+expected = Div(Button("Cancel", cls="btn-secondary"))
+
+matches(actual, expected)
+```
+
+**Error output:**
+```
+Path  : 'div.button'
+Error : The values are different
+
+(div "id"="form"           | (div
+  (button "cls"="btn-prim  |   (button "cls"="btn-seco
+          ^^^^^^^^^^^^^^^^ |           
+    "Submit")              |     "Cancel")
+    ^^^^^^^                |   
+)                          | )
+```
+
+**Reading the error:**
+- **Left side**: Actual element
+- **Right side**: Expected pattern
+- **`^^^` markers**: Highlight differences 'only on the left side', the right side (the expected pattern) is always correct
+- **Path**: Shows location in the tree (`div.button` = button inside div)
+
+---
+
+### find() - Search Elements
+
+#### Purpose
+
+`find()` searches for all elements matching a pattern within an HTML tree. It's useful when you need to verify the presence of specific elements without knowing their exact position. Or when you want to validate (using matches) a subset of elements.
+
+**When to use it:**
+- Finding elements by attributes
+- Verifying element count
+- Extracting elements for further validation
+- Testing without strict hierarchy requirements
+
+#### Basic Syntax
+
+```python
+from myfasthtml.test.matcher import find
+
+results = find(ft, expected)
+```
+
+- **`ft`**: Element or list of elements to search in
+- **`expected`**: Pattern to match, follows the same syntax and rules as `matches()`
+- **Returns**: List of all matching elements
+- **Raises**: `AssertionError` if no matches found
+
+#### Simple Examples
+
+**Example 1: Find all elements of a type**
+
+```python
+from myfasthtml.test.matcher import find
+from fasthtml.common import Div, P
+
+page = Div(
+    Div(P("First paragraph")),
+    Div(P("Second paragraph")),
+    P("Third paragraph")
+)
+
+# Find all paragraphs
+paragraphs = find(page, P())
+
+assert len(paragraphs) == 3
+```
+
+**Example 2: Find by attribute**
+
+```python
+from fasthtml.common import Div, Button
+from myfasthtml.test.matcher import find
+
+page = Div(
+    Button("Cancel", cls="btn-secondary"),
+    Div(Button("Submit", cls="btn-primary", id="submit"))
+)
+
+# Find the primary button
+primary_buttons = find(page, Button(cls="btn-primary"))
+
+assert len(primary_buttons) == 1
+assert primary_buttons[0].attrs["id"] == "submit"
+```
+
+**Example 3: Find nested structure**
+
+```python
+from fasthtml.common import Div, Form, Input
+
+page = Div(
+    Div(Input(name="search")),
+    Form(
+        Input(name="email", type="email"),
+        Input(name="password", type="password")
+    )
+)
+
+# Find all email inputs
+email_inputs = find(page, Input(type="email"))
+
+assert len(email_inputs) == 1
+assert email_inputs[0].attrs["name"] == "email"
+```
+
+**Example 4: Search in a list**
+
+```python
+from fasthtml.common import Div, P, Span
+
+elements = [
+    Div(P("First")),
+    Div(P("Second")),
+    Span(P("Third"))
+]
+
+# Find all paragraphs across all elements
+all_paragraphs = find(elements, P())
+
+assert len(all_paragraphs) == 3
+```
+
+#### Common Patterns
+
+**Verify element count:**
+
+```python
+buttons = find(page, Button())
+assert len(buttons) == 3, f"Expected 3 buttons, found {len(buttons)}"
+```
+
+**Check element exists:**
+
+```python
+submit_buttons = find(page, Button(type="submit"))
+assert len(submit_buttons) > 0, "No submit button found"
+```
+
+**Extract for further testing:**
+
+```python
+form = find(page, Form())[0]  # Get first form
+inputs = find(form, Input())   # Find inputs within form
+assert all(inp.attrs.get("type") in ["text", "email"] for inp in inputs)
+```
+
+**Handle missing elements:**
+
+```python
+try:
+    admin_section = find(page, Div(id="admin"))
+    print("Admin section found")
+except AssertionError:
+    print("Admin section not present")
+```
+
+---
+
+## Part 2: Testing Rendered Components Guide
+
+This section provides practical patterns for testing different aspects of rendered components.
+
+### 1. Testing Element Structure
+
+**Goal**: Verify the hierarchy and organization of elements.
+
+**Pattern**: Use `matches()` with only the structural elements you care about.
+
+```python
+from myfasthtml.test.matcher import matches
+from fasthtml.common import Div, Header, Nav, Main, Footer
+
+# Your component renders a page layout
+actual = page_component.render()
+
+# Test only the main structure
+expected = Div(
+    Header(Nav()),
+    Main(),
+    Footer()
+)
+
+matches(actual, expected)
+```
+
+**Tip**: Don't include every single child element. Focus on the important structural elements.
+
+### 2. Testing Attributes
+
+**Goal**: Verify that specific attributes are set correctly.
+
+**Pattern**: Include only the attributes you want to test.
+
+```python
+from fasthtml.common import Button
+
+# Component renders a button with HTMX
+actual = button_component.render()
+
+# Test only HTMX attributes
+expected = Button(
+    hx_post="/api/submit",
+    hx_target="#result",
+    hx_swap="innerHTML"
+)
+
+matches(actual, expected)
+```
+
+**With predicates for dynamic values:**
+
+```python
+from myfasthtml.test.matcher import StartsWith
+
+# Test that id follows a pattern
+expected = Button(id=StartsWith("btn-"))
+matches(actual, expected)
+```
+
+### 3. Testing Content
+
+**Goal**: Verify text content in elements.
+
+**Pattern**: Match elements with their text content.
+
+```python
+from fasthtml.common import Div, H1, P
+
+actual = article_component.render()
+
+expected = Div(
+    H1("Article Title"),
+    P("First paragraph content")
+)
+
+matches(actual, expected)
+```
+
+**Partial content matching:**
+
+```python
+from myfasthtml.test.matcher import Contains
+
+# Check that paragraph contains key phrase
+expected = P(Contains("important information"))
+matches(actual, expected)
+```
+
+### 4. Testing with Predicates
+
+**Goal**: Validate patterns rather than exact values.
+
+**Pattern**: Use predicates for flexibility.
+
+**Example: Testing generated IDs**
+
+```python
+from myfasthtml.test.matcher import StartsWith, AnyValue
+from fasthtml.common import Div
+
+# Component generates unique IDs
+actual = widget_component.render()
+
+expected = Div(
+    id=StartsWith("widget-"),
+    data_timestamp=AnyValue()  # Just check it exists
+)
+
+matches(actual, expected)
+```
+
+**Example: Testing CSS classes**
+
+```python
+from myfasthtml.test.matcher import Contains
+from fasthtml.common import Button
+
+actual = dynamic_button.render()
+
+# Check button has 'active' class among others
+expected = Button(cls=Contains("active"))
+matches(actual, expected)
+```
+
+**Example: Forbidden attributes**
+
+```python
+from myfasthtml.test.matcher import AttributeForbidden
+from fasthtml.common import Input
+
+# Verify input is NOT disabled
+actual = input_component.render()
+
+expected = Input(
+    name="username",
+    AttributeForbidden("disabled")
+)
+
+matches(actual, expected)
+```
+
+### 5. Combining matches() and find()
+
+**Goal**: First find elements, then validate them in detail.
+
+**Pattern**: Use `find()` to locate, then `matches()` to validate.
+
+**Example: Testing a form**
+
+```python
+from myfasthtml.test.matcher import find, matches
+from fasthtml.common import Form, Input, Button
+
+# Render a complex page
+actual = page_component.render()
+
+# Step 1: Find the registration form
+forms = find(actual, Form(id="registration"))
+assert len(forms) == 1
+
+# Step 2: Validate the form structure
+registration_form = forms[0]
+expected_form = Form(
+    Input(name="email", type="email"),
+    Input(name="password", type="password"),
+    Button("Register", type="submit")
+)
+
+matches(registration_form, expected_form)
+```
+
+**Example: Testing multiple similar elements**
+
+```python
+from fasthtml.common import Div, Card
+
+actual = dashboard.render()
+
+# Find all cards
+cards = find(actual, Card())
+
+# Verify we have the right number
+assert len(cards) == 3
+
+# Validate each card has required structure
+for card in cards:
+    expected_card = Card(
+        Div(cls="card-header"),
+        Div(cls="card-body")
+    )
+    matches(card, expected_card)
+```
+
+### 6. Testing Edge Cases
+
+**Testing empty elements:**
+
+```python
+from myfasthtml.test.matcher import Empty, NoChildren
+from fasthtml.common import Div
+
+# Test completely empty element
+actual = Div()
+expected = Div(Empty())
+matches(actual, expected)
+
+# Test element with attributes but no children
+actual = Div(id="container", cls="empty-state")
+expected = Div(NoChildren())
+matches(actual, expected)
+```
+
+**Testing absence of elements:**
+
+```python
+from myfasthtml.test.matcher import find
+from fasthtml.common import Div
+
+actual = basic_view.render()
+
+# Verify admin section is not present
+try:
+    find(actual, Div(id="admin-section"))
+    assert False, "Admin section should not be present"
+except AssertionError as e:
+    if "No element found" in str(e):
+        pass  # Expected - admin section absent
+    else:
+        raise
+```
+
+---
+
+## Part 3: How It Works (Technical Overview)
+
+Understanding how the matcher works helps you write better tests and debug failures more effectively.
+
+### The Matching Algorithm
+
+When you call `matches(actual, expected)`, here's what happens:
+
+1. **Type Comparison**: Checks if elements have the same type/tag
+   - For FastHTML elements: compares `.tag` (e.g., "div", "button")
+   - For Python objects: compares class types
+
+2. **Attribute Validation**: For each attribute in `expected`:
+   - Checks if attribute exists in `actual`
+   - If it's a `Predicate`: calls `.validate(actual_value)`
+   - Otherwise: checks for exact equality
+   - **Key point**: Only attributes in `expected` are checked
+
+3. **Children Validation**:
+   - Applies `ChildrenPredicate` validators if present
+   - Recursively matches children in order
+   - **Key point**: Only checks as many children as defined in `expected`
+
+4. **Path Tracking**: Maintains a path through the tree for error reporting
+
+### Understanding the Path
+
+The matcher builds a path as it traverses your element tree:
+
+```
+div#container.form.input[name=email]
+```
+
+This path means:
+- Started at a `div` with `id="container"`
+- Went to a `form` element
+- Then to an `input` with `name="email"`
+
+The path appears in error messages to help you locate problems:
+
+```
+Path  : 'div#form.input[name=email]'
+Error : 'type' is not found in Actual
+```
+
+### How Predicates Work
+
+Predicates are objects that implement a `validate()` method:
+
+```python
+class Contains(AttrPredicate):
+    def validate(self, actual):
+        return self.value in actual
+```
+
+When matching encounters a predicate:
+1. Gets the actual attribute value
+2. Calls `predicate.validate(actual_value)`
+3. If returns `False`, reports validation error
+
+This allows flexible matching without hardcoding exact values.
+
+### Error Output Generation
+
+When a test fails, the matcher generates a side-by-side comparison:
+
+**Process:**
+1. Renders both `actual` and `expected` as tree structures
+2. Compares them element by element
+3. Marks differences with `^^^` characters
+4. Aligns output for easy visual comparison
+
+**Example:**
+```
+(div "id"="old"        | (div "id"="new"
+     ^^^^              |      
+```
+
+The `^^^` appears under attributes or content that don't match.
+
+### The find() Algorithm
+
+`find()` uses depth-first search:
+
+1. **Check current element**: Does it match the pattern?
+   - If yes: add to results
+
+2. **Search children**: Recursively search all children
+
+3. **Return all matches**: Collects matches from entire tree
+
+**Key difference from matches()**: `find()` looks for any occurrence anywhere in the tree, while `matches()` validates exact structure.
+
+---
+
+## Best Practices
+
+### Do's ✅
+
+**Test only what matters**
+```python
+# ✅ Good - tests only the submit action
+expected = Button("Submit", hx_post="/api/save")
+
+# ❌ Bad - tests irrelevant details
+expected = Button("Submit", hx_post="/api/save", id="btn-123", cls="btn btn-primary")
+```
+
+**Use predicates for dynamic values**
+```python
+# ✅ Good - flexible for generated IDs
+expected = Div(id=StartsWith("generated-"))
+
+# ❌ Bad - brittle, will break on regeneration
+expected = Div(id="generated-12345")
+```
+
+**Structure tests in layers**
+```python
+# ✅ Good - separate concerns
+# Test 1: Overall structure
+matches(page, Div(Header(), Main(), Footer()))
+
+# Test 2: Header details
+header = find(page, Header())[0]
+matches(header, Header(Nav(), Div(cls="user-menu")))
+
+# ❌ Bad - everything in one giant test
+matches(page, Div(
+    Header(Nav(...), Div(...)),
+    Main(...),
+    Footer(...)
+))
+```
+
+**Verify element counts with find()**
+```python
+# ✅ Good - explicit count check
+buttons = find(page, Button())
+assert len(buttons) == 3, f"Expected 3 buttons, found {len(buttons)}"
+
+# ❌ Bad - implicit assumption
+button = find(page, Button())[0]  # Fails if 0 or multiple buttons
+```
+
+### Don'ts ❌
+
+**Don't test implementation details**
+```python
+# ❌ Bad - internal div structure might change
+expected = Div(
+    Div(
+        Div(Button("Click"))
+    )
+)
+
+# ✅ Good - test the important element
+expected = Div(Button("Click"))
+```
+
+**Don't use exact string matching**
+```python
+# ❌ Bad - fragile
+assert str(component.render()) == '<div><p>Text</p></div>'
+
+# ✅ Good - structural matching
+matches(component.render(), Div(P("Text")))
+```
+
+**Don't over-specify**
+```python
+# ❌ Bad - tests too much
+expected = Form(
+    Input(name="email", type="email", id="email-input", cls="form-control"),
+    Input(name="password", type="password", id="pwd-input", cls="form-control"),
+    Button("Submit", type="submit", id="submit-btn", cls="btn btn-primary")
+)
+
+# ✅ Good - tests what matters
+expected = Form(
+    Input(name="email", type="email"),
+    Input(name="password", type="password"),
+    Button("Submit", type="submit")
+)
+```
+
+### Performance Tips
+
+**Reuse patterns**
+```python
+# Define reusable patterns
+STANDARD_BUTTON = Button(cls=Contains("btn"))
+
+# Use in multiple tests
+matches(actual, Div(STANDARD_BUTTON))
+```
+
+**Use find() efficiently**
+```python
+# ✅ Good - specific pattern
+buttons = find(page, Button(cls="primary"))
+
+# ❌ Inefficient - too broad then filter
+all_buttons = find(page, Button())
+primary = [b for b in all_buttons if "primary" in b.attrs.get("cls", "")]
+```
+
+---
+
+## Quick Reference
+
+### Import Statements
+
+```python
+# Core functions
+from myfasthtml.test.matcher import matches, find
+
+# AttrPredicates
+from myfasthtml.test.matcher import Contains, StartsWith, DoesNotContain, AnyValue
+
+# ChildrenPredicates
+from myfasthtml.test.matcher import Empty, NoChildren, AttributeForbidden
+
+# For custom test objects
+from myfasthtml.test.matcher import TestObject
+```
+
+### Common Patterns Cheatsheet
+
+```python
+# Basic validation
+matches(actual, expected)
+
+# Find and validate
+elements = find(tree, pattern)
+assert len(elements) == 1
+matches(elements[0], detailed_pattern)
+
+# Flexible attribute matching
+expected = Div(
+    id=StartsWith("prefix-"),
+    cls=Contains("active"),
+    data_value=AnyValue()
+)
+
+# Empty element validation
+expected = Div(Empty())          # No children, no attributes
+expected = Div(NoChildren())     # No children, attributes OK
+
+# Forbidden attribute
+expected = Button(AttributeForbidden("disabled"))
+
+# Multiple children
+expected = Div(
+    Header(),
+    Main(),
+    Footer()
+)
+```
+
+---
+
+## Conclusion
+
+The matcher module provides powerful tools for testing FastHTML components:
+
+- **`matches()`** validates structure with precise, readable error messages
+- **`find()`** locates elements anywhere in your HTML tree
+- **Predicates** enable flexible, maintainable tests
+
+By focusing on what matters and using the right patterns, you can write component tests that are both robust and easy to maintain.
+
+**Next steps:**
+- Practice with simple components first
+- Gradually introduce predicates as needed
+- Review error messages carefully - they guide you to the problem
+- Refactor tests to remove duplication
+
+Happy testing! 🧪

examples/canvas_graph_prototype.html

@@ -0,0 +1,806 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>InstancesDebugger — Canvas Prototype v2</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --bg:        #0d1117;
+      --surface:   #161b22;
+      --surface2:  #1c2128;
+      --border:    #30363d;
+      --text:      #e6edf3;
+      --muted:     #7d8590;
+      --accent:    #388bfd;
+      --selected:  #f0883e;
+      --match:     #e3b341;
+    }
+
+    body {
+      background: var(--bg);
+      color: var(--text);
+      font-family: -apple-system, 'Segoe UI', system-ui, sans-serif;
+      height: 100vh;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    /* ── Toolbar ─────────────────────────────────────── */
+    #toolbar {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 0 14px;
+      height: 44px;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      flex-shrink: 0;
+      user-select: none;
+    }
+
+    .app-icon { font-size: 16px; color: var(--accent); margin-right: 2px; }
+
+    #title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text);
+      margin-right: 2px;
+      flex-shrink: 0;
+    }
+
+    .tb-sep {
+      width: 1px;
+      height: 20px;
+      background: var(--border);
+      margin: 0 4px;
+      flex-shrink: 0;
+    }
+
+    .tb-btn {
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 6px;
+      color: var(--muted);
+      padding: 4px 8px;
+      font-size: 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      transition: color .12s, background .12s, border-color .12s;
+      white-space: nowrap;
+    }
+    .tb-btn:hover { color: var(--text); background: var(--surface2); border-color: var(--border); }
+
+    .tb-btn svg { flex-shrink: 0; }
+
+    #search-wrapper {
+      position: relative;
+      flex: 1;
+      max-width: 240px;
+    }
+    .search-icon {
+      position: absolute;
+      left: 9px; top: 50%;
+      transform: translateY(-50%);
+      color: var(--muted);
+      pointer-events: none;
+    }
+    #search {
+      width: 100%;
+      background: var(--bg);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 5px 10px 5px 30px;
+      color: var(--text);
+      font-size: 12px;
+      outline: none;
+      transition: border-color .15s;
+    }
+    #search:focus { border-color: var(--accent); }
+    #search::placeholder { color: var(--muted); }
+
+    #match-count {
+      position: absolute;
+      right: 9px; top: 50%;
+      transform: translateY(-50%);
+      font-size: 10px;
+      color: var(--muted);
+    }
+
+    #zoom-display {
+      font-size: 11px;
+      color: var(--muted);
+      font-variant-numeric: tabular-nums;
+      min-width: 36px;
+      text-align: right;
+    }
+
+    #hint {
+      font-size: 11px;
+      color: var(--muted);
+      margin-left: auto;
+    }
+
+    /* ── Main ────────────────────────────────────────── */
+    #main { display: flex; flex: 1; overflow: hidden; }
+
+    #canvas-container {
+      flex: 1;
+      position: relative;
+      overflow: hidden;
+      cursor: grab;
+    }
+    #canvas-container.panning { cursor: grabbing; }
+    #canvas-container.hovering { cursor: pointer; }
+
+    #graph-canvas { position: absolute; top: 0; left: 0; display: block; }
+
+    /* ── Legend ──────────────────────────────────────── */
+    #legend {
+      position: absolute;
+      bottom: 14px; left: 14px;
+      background: rgba(22, 27, 34, 0.92);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 10px 13px;
+      font-size: 11px;
+      color: var(--muted);
+      pointer-events: none;
+      backdrop-filter: blur(4px);
+    }
+    .leg { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
+    .leg:last-child { margin-bottom: 0; }
+    .leg-dot { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
+
+    /* ── Properties panel ────────────────────────────── */
+    #props-panel {
+      width: 270px;
+      background: var(--surface);
+      border-left: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      flex-shrink: 0;
+      transition: width .2s;
+    }
+    #props-panel.empty { align-items: center; justify-content: center; }
+    #props-empty { color: var(--muted); font-size: 13px; }
+
+    #props-scroll { overflow-y: auto; flex: 1; }
+
+    .ph {
+      padding: 11px 14px 8px;
+      background: var(--bg);
+      border-bottom: 1px solid var(--border);
+      flex-shrink: 0;
+    }
+    .ph-label { font-size: 13px; font-weight: 600; font-family: monospace; }
+    .ph-kind {
+      display: inline-block;
+      margin-top: 5px;
+      font-size: 10px; font-weight: 500;
+      padding: 2px 8px;
+      border-radius: 10px;
+      color: #fff;
+    }
+
+    .ps { /* props section */
+      padding: 4px 14px;
+      font-size: 10px; font-weight: 700;
+      text-transform: uppercase; letter-spacing: .07em;
+      color: var(--accent);
+      background: rgba(56, 139, 253, 0.07);
+      border-bottom: 1px solid var(--border);
+    }
+    .pr { /* props row */
+      display: flex;
+      padding: 4px 14px;
+      border-bottom: 1px solid rgba(48, 54, 61, 0.6);
+      font-size: 12px; font-family: monospace;
+    }
+    .pk { color: var(--muted); flex: 0 0 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 6px; }
+    .pv { color: var(--text);  flex: 1;         overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  </style>
+</head>
+<body>
+
+<div id="toolbar">
+  <span class="app-icon">⬡</span>
+  <span id="title">InstancesDebugger</span>
+  <div class="tb-sep"></div>
+
+  <!-- Expand all -->
+  <button class="tb-btn" id="expand-all-btn" title="Expand all nodes">
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
+      <path d="M2 4l5 5 5-5"/>
+      <path d="M2 8l5 5 5-5"/>
+    </svg>
+    Expand
+  </button>
+
+  <!-- Collapse all -->
+  <button class="tb-btn" id="collapse-all-btn" title="Collapse all nodes">
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
+      <path d="M2 6l5-5 5 5"/>
+      <path d="M2 10l5-5 5 5"/>
+    </svg>
+    Collapse
+  </button>
+
+  <div class="tb-sep"></div>
+
+  <div id="search-wrapper">
+    <svg class="search-icon" width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+      <circle cx="7" cy="7" r="5"/><path d="m11 11 3 3"/>
+    </svg>
+    <input id="search" type="text" placeholder="Filter instances…" autocomplete="off" spellcheck="false">
+    <span id="match-count"></span>
+  </div>
+
+  <div class="tb-sep"></div>
+  <button class="tb-btn" id="fit-btn" title="Fit all nodes">
+    <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8">
+      <path d="M1 5V1h4M15 5V1h-4M1 11v4h4M15 11v4h-4"/>
+      <rect x="4" y="4" width="8" height="8" rx="1"/>
+    </svg>
+    Fit
+  </button>
+  <span id="zoom-display">100%</span>
+  <span id="hint">Wheel · Drag · Click</span>
+</div>
+
+<div id="main">
+  <div id="canvas-container">
+    <canvas id="graph-canvas"></canvas>
+    <div id="legend">
+      <div class="leg"><div class="leg-dot" style="background:#2563eb"></div>RootInstance</div>
+      <div class="leg"><div class="leg-dot" style="background:#7c3aed"></div>SingleInstance</div>
+      <div class="leg"><div class="leg-dot" style="background:#047857"></div>MultipleInstance</div>
+      <div class="leg"><div class="leg-dot" style="background:#b45309"></div>UniqueInstance</div>
+    </div>
+  </div>
+
+  <div id="props-panel" class="empty">
+    <span id="props-empty">Click a node to inspect</span>
+  </div>
+</div>
+
+<script>
+// ═══════════════════════════════════════════════════════════
+// Data
+// ═══════════════════════════════════════════════════════════
+const NODES = [
+  { id: 'app',                  label: 'app',                  type: 'root',     kind: 'RootInstance',      description: 'Main application root' },
+  { id: 'layout',               label: 'layout',               type: 'single',   kind: 'Layout',            description: 'Main layout with 2 panels' },
+  { id: 'left_panel',           label: 'left_panel',           type: 'multiple', kind: 'Panel' },
+  { id: 'right_panel',          label: 'right_panel',          type: 'multiple', kind: 'Panel' },
+  { id: 'instances_debugger',   label: 'instances_debugger',   type: 'single',   kind: 'InstancesDebugger', description: 'Debug tool for instances' },
+  { id: 'dbg_panel',            label: 'dbg#panel',            type: 'multiple', kind: 'Panel' },
+  { id: 'canvas_graph',         label: 'dbg#canvas_graph',     type: 'multiple', kind: 'CanvasGraph',       description: 'Canvas-based graph view' },
+  { id: 'data_grid_manager',    label: 'data_grid_manager',    type: 'single',   kind: 'DataGridsManager',  description: 'Manages all data grids' },
+  { id: 'my_grid',              label: 'my_grid',              type: 'multiple', kind: 'DataGrid',          description: '42 rows × 5 columns' },
+  { id: 'grid_toolbar',         label: 'my_grid#toolbar',      type: 'multiple', kind: 'Toolbar' },
+  { id: 'grid_search',          label: 'my_grid#search',       type: 'multiple', kind: 'Search' },
+  { id: 'auth_proxy',           label: 'auth_proxy',           type: 'unique',   kind: 'AuthProxy',         description: 'User authentication proxy' },
+];
+
+const EDGES = [
+  { from: 'app',                to: 'layout'              },
+  { from: 'app',                to: 'instances_debugger'  },
+  { from: 'app',                to: 'data_grid_manager'   },
+  { from: 'app',                to: 'auth_proxy'          },
+  { from: 'layout',             to: 'left_panel'          },
+  { from: 'layout',             to: 'right_panel'         },
+  { from: 'instances_debugger', to: 'dbg_panel'           },
+  { from: 'dbg_panel',          to: 'canvas_graph'        },
+  { from: 'data_grid_manager',  to: 'my_grid'             },
+  { from: 'my_grid',            to: 'grid_toolbar'        },
+  { from: 'my_grid',            to: 'grid_search'         },
+];
+
+const DETAILS = {
+  app:                { Main: { Id: 'app', 'Parent Id': '—' },                                              State: { _name: 'AppState' }                                                                },
+  layout:             { Main: { Id: 'layout', 'Parent Id': 'app' },                                        State: { _name: 'LayoutState', left_open: 'true', right_open: 'true' }                   },
+  left_panel:         { Main: { Id: 'left_panel', 'Parent Id': 'layout' },                                 State: { _name: 'PanelState', width: '240px' }                                           },
+  right_panel:        { Main: { Id: 'right_panel', 'Parent Id': 'layout' },                                State: { _name: 'PanelState', width: '320px' }                                           },
+  instances_debugger: { Main: { Id: 'instances_debugger', 'Parent Id': 'app' },                            State: { _name: 'InstancesDebuggerState' },   Commands: { ShowInstance: 'on_show_node'} },
+  dbg_panel:          { Main: { Id: 'dbg#panel', 'Parent Id': 'instances_debugger' },                      State: { _name: 'PanelState', width: '280px' }                                           },
+  canvas_graph:       { Main: { Id: 'dbg#canvas_graph', 'Parent Id': 'dbg#panel' },                        State: { _name: 'CanvasGraphState', nodes: '12', edges: '11' }                           },
+  data_grid_manager:  { Main: { Id: 'data_grid_manager', 'Parent Id': 'app' },                             State: { _name: 'DataGridsManagerState', grids: '1' }                                    },
+  my_grid:            { Main: { Id: 'my_grid', 'Parent Id': 'data_grid_manager' },                         State: { _name: 'DataGridState', rows: '42', cols: '5', page: '0' }, Commands: { DeleteRow: 'on_delete', AddRow: 'on_add' } },
+  grid_toolbar:       { Main: { Id: 'my_grid#toolbar', 'Parent Id': 'my_grid' },                           State: { _name: 'ToolbarState' }                                                         },
+  grid_search:        { Main: { Id: 'my_grid#search', 'Parent Id': 'my_grid' },                            State: { _name: 'SearchState', query: '' }                                               },
+  auth_proxy:         { Main: { Id: 'auth_proxy', 'Parent Id': 'app' },                                    State: { _name: 'AuthProxyState', user: 'admin@example.com', roles: 'admin' }            },
+};
+
+// ═══════════════════════════════════════════════════════════
+// Constants
+// ═══════════════════════════════════════════════════════════
+const NODE_W         = 178;
+const NODE_H_SMALL   = 36;   // Without description
+const NODE_H_LARGE   = 54;   // With description
+const LEVEL_H        = 96;   // Vertical distance between levels
+const LEAF_GAP       = 22;   // Horizontal gap between leaf slots
+const CHEV_ZONE      = 26;   // Rightmost px = toggle hit zone
+
+function getNodeHeight(node) {
+  return node.description ? NODE_H_LARGE : NODE_H_SMALL;
+}
+
+const TYPE_COLOR = {
+  root:     '#2563eb',
+  single:   '#7c3aed',
+  multiple: '#047857',
+  unique:   '#b45309',
+};
+
+// ═══════════════════════════════════════════════════════════
+// Graph structure
+// ═══════════════════════════════════════════════════════════
+const childMap     = {};
+const hasParentSet = new Set();
+
+for (const n of NODES) childMap[n.id] = [];
+for (const e of EDGES) {
+  (childMap[e.from] = childMap[e.from] || []).push(e.to);
+  hasParentSet.add(e.to);
+}
+
+function hasChildren(id) { return (childMap[id] || []).length > 0; }
+
+// ═══════════════════════════════════════════════════════════
+// Collapse state
+// ═══════════════════════════════════════════════════════════
+const collapsed = new Set();
+
+function getHiddenSet() {
+  const hidden = new Set();
+  function addDesc(id) {
+    for (const c of childMap[id] || []) {
+      if (!hidden.has(c)) { hidden.add(c); addDesc(c); }
+    }
+  }
+  for (const id of collapsed) addDesc(id);
+  return hidden;
+}
+
+function visNodes() {
+  const h = getHiddenSet();
+  return NODES.filter(n => !h.has(n.id));
+}
+
+function visEdges(vn) {
+  const vi = new Set(vn.map(n => n.id));
+  return EDGES.filter(e => vi.has(e.from) && vi.has(e.to));
+}
+
+// ═══════════════════════════════════════════════════════════
+// Layout engine  (Reingold-Tilford simplified)
+// ═══════════════════════════════════════════════════════════
+function computeLayout(nodes, edges) {
+  const cm = {};
+  const hp = new Set();
+  for (const n of nodes) cm[n.id] = [];
+  for (const e of edges) { (cm[e.from] = cm[e.from] || []).push(e.to); hp.add(e.to); }
+
+  const roots = nodes.filter(n => !hp.has(n.id)).map(n => n.id);
+
+  const depth = {};
+  const q = roots.map(r => [r, 0]);
+  while (q.length) {
+    const [id, d] = q.shift();
+    if (depth[id] !== undefined) continue;
+    depth[id] = d;
+    for (const c of cm[id] || []) q.push([c, d + 1]);
+  }
+
+  const pos = {};
+  for (const n of nodes) pos[n.id] = { x: 0, y: (depth[n.id] || 0) * LEVEL_H };
+
+  let slot = 0;
+  function dfs(id) {
+    const children = cm[id] || [];
+    if (children.length === 0) { pos[id].x = slot++ * (NODE_W + LEAF_GAP); return; }
+    for (const c of children) dfs(c);
+    const xs = children.map(c => pos[c].x);
+    pos[id].x = (Math.min(...xs) + Math.max(...xs)) / 2;
+  }
+  for (const r of roots) dfs(r);
+
+  return pos;
+}
+
+let pos = {};
+function recomputeLayout() {
+  const vn = visNodes();
+  pos = computeLayout(vn, visEdges(vn));
+}
+recomputeLayout();
+
+// ═══════════════════════════════════════════════════════════
+// Canvas
+// ═══════════════════════════════════════════════════════════
+const canvas    = document.getElementById('graph-canvas');
+const ctx       = canvas.getContext('2d');
+const container = document.getElementById('canvas-container');
+const zoomEl    = document.getElementById('zoom-display');
+
+let transform  = { x: 0, y: 0, scale: 1 };
+let selectedId = null;
+let filterQuery = '';
+
+// ── Dot grid background (Figma-style, fixed screen-space dots) ──
+function drawDotGrid() {
+  const spacing = 24;
+  const ox = ((transform.x % spacing) + spacing) % spacing;
+  const oy = ((transform.y % spacing) + spacing) % spacing;
+  ctx.fillStyle = 'rgba(125,133,144,0.12)';
+  for (let x = ox - spacing; x < canvas.width + spacing; x += spacing)
+    for (let y = oy - spacing; y < canvas.height + spacing; y += spacing) {
+      ctx.beginPath();
+      ctx.arc(x, y, 0.9, 0, Math.PI * 2);
+      ctx.fill();
+    }
+}
+
+// ── Main draw ────────────────────────────────────────────
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawDotGrid();
+
+  const q = filterQuery.trim().toLowerCase();
+  const matchIds = q
+    ? new Set(NODES.filter(n =>
+        n.label.toLowerCase().includes(q) || n.kind.toLowerCase().includes(q)
+      ).map(n => n.id))
+    : null;
+
+  // Update match count display
+  const matchCountEl = document.getElementById('match-count');
+  matchCountEl.textContent = matchIds ? `${matchIds.size}` : '';
+
+  const vn = visNodes();
+
+  ctx.save();
+  ctx.translate(transform.x, transform.y);
+  ctx.scale(transform.scale, transform.scale);
+
+  // Edges
+  for (const edge of EDGES) {
+    const p1 = pos[edge.from], p2 = pos[edge.to];
+    if (!p1 || !p2) continue;
+    const dimmed = matchIds && !matchIds.has(edge.from) && !matchIds.has(edge.to);
+    const node1 = NODES.find(n => n.id === edge.from);
+    const node2 = NODES.find(n => n.id === edge.to);
+    const h1 = node1 ? getNodeHeight(node1) : NODE_H_SMALL;
+    const h2 = node2 ? getNodeHeight(node2) : NODE_H_SMALL;
+    const x1 = p1.x, y1 = p1.y + h1 / 2;
+    const x2 = p2.x, y2 = p2.y - h2 / 2;
+    const cy = (y1 + y2) / 2;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    ctx.bezierCurveTo(x1, cy, x2, cy, x2, y2);
+    ctx.strokeStyle = dimmed ? 'rgba(48,54,61,0.25)' : 'rgba(48,54,61,0.9)';
+    ctx.lineWidth = 1.5;
+    ctx.stroke();
+  }
+
+  // Nodes
+  for (const node of vn) {
+    const p = pos[node.id];
+    if (!p) continue;
+    const isSel   = node.id === selectedId;
+    const isMatch = matchIds !== null &&  matchIds.has(node.id);
+    const isDim   = matchIds !== null && !matchIds.has(node.id);
+    drawNode(node, p.x, p.y, isSel, isMatch, isDim);
+  }
+
+  ctx.restore();
+
+  // Update zoom indicator
+  zoomEl.textContent = `${Math.round(transform.scale * 100)}%`;
+}
+
+// ── Node renderer ────────────────────────────────────────
+function drawNode(node, cx, cy, isSel, isMatch, isDim) {
+  const nodeH = getNodeHeight(node);
+  const hw = NODE_W / 2, hh = nodeH / 2, r = 6;
+  const x  = cx - hw,   y  = cy - hh;
+  const color = TYPE_COLOR[node.type] || '#334155';
+
+  ctx.globalAlpha = isDim ? 0.15 : 1;
+
+  // Glow for selected
+  if (isSel) { ctx.shadowColor = '#f0883e'; ctx.shadowBlur = 16; }
+
+  // Background — dark card
+  ctx.beginPath();
+  ctx.roundRect(x, y, NODE_W, nodeH, r);
+  ctx.fillStyle = isSel ? '#2a1f0f' : '#1c2128';
+  ctx.fill();
+  ctx.shadowBlur = 0;
+
+  // Left color strip (clipped)
+  ctx.save();
+  ctx.beginPath();
+  ctx.roundRect(x, y, NODE_W, nodeH, r);
+  ctx.clip();
+  ctx.fillStyle = color;
+  ctx.fillRect(x, y, 4, nodeH);
+  ctx.restore();
+
+  // Border
+  ctx.beginPath();
+  ctx.roundRect(x, y, NODE_W, nodeH, r);
+  if (isSel) {
+    ctx.strokeStyle = '#f0883e';
+    ctx.lineWidth = 1.5;
+  } else if (isMatch) {
+    ctx.strokeStyle = '#e3b341';
+    ctx.lineWidth = 1.5;
+  } else {
+    ctx.strokeStyle = `${color}44`;
+    ctx.lineWidth = 1;
+  }
+  ctx.stroke();
+
+  // Kind badge (top-right, small pill)
+  const kindText = node.kind;
+  ctx.font = '9px system-ui';
+  const rawW = ctx.measureText(kindText).width;
+  const badgeW = Math.min(rawW + 8, 66);
+  const chevSpace = hasChildren(node.id) ? CHEV_ZONE : 8;
+  const badgeX = x + NODE_W - chevSpace - badgeW - 2;
+  const badgeY = y + (nodeH - 14) / 2;
+  ctx.beginPath();
+  ctx.roundRect(badgeX, badgeY, badgeW, 14, 3);
+  ctx.fillStyle = `${color}22`;
+  ctx.fill();
+  ctx.fillStyle = color;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+  // Truncate kind if needed
+  let kLabel = kindText;
+  while (kLabel.length > 3 && ctx.measureText(kLabel).width > badgeW - 6) kLabel = kLabel.slice(0, -1);
+  if (kLabel !== kindText) kLabel += '…';
+  ctx.fillText(kLabel, badgeX + badgeW / 2, badgeY + 7);
+
+  // Label (centered if no description, top if description)
+  ctx.font = `${isSel ? 500 : 400} 12px monospace`;
+  ctx.fillStyle = isDim ? 'rgba(125,133,144,0.5)' : '#e6edf3';
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'middle';
+  const labelX    = x + 12;
+  const labelMaxW = badgeX - labelX - 6;
+  let label = node.label;
+  while (label.length > 3 && ctx.measureText(label).width > labelMaxW) label = label.slice(0, -1);
+  if (label !== node.label) label += '…';
+  const labelY = node.description ? cy - 9 : cy;
+  ctx.fillText(label, labelX, labelY);
+
+  // Description (bottom line, only if present)
+  if (node.description) {
+    ctx.font = '9px system-ui';
+    ctx.fillStyle = isDim ? 'rgba(125,133,144,0.3)' : 'rgba(125,133,144,0.7)';
+    let desc = node.description;
+    while (desc.length > 3 && ctx.measureText(desc).width > labelMaxW) desc = desc.slice(0, -1);
+    if (desc !== node.description) desc += '…';
+    ctx.fillText(desc, labelX, cy + 8);
+  }
+
+  // Chevron toggle (if has children)
+  if (hasChildren(node.id)) {
+    const chevX = x + NODE_W - CHEV_ZONE / 2 - 1;
+    const isCollapsed = collapsed.has(node.id);
+    drawChevron(ctx, chevX, cy, !isCollapsed, color);
+  }
+
+  ctx.globalAlpha = 1;
+}
+
+function drawChevron(ctx, cx, cy, pointDown, color) {
+  const s = 4;
+  ctx.strokeStyle = color;
+  ctx.lineWidth   = 1.5;
+  ctx.lineCap     = 'round';
+  ctx.lineJoin    = 'round';
+  ctx.beginPath();
+  if (pointDown) {
+    ctx.moveTo(cx - s, cy - s * 0.5);
+    ctx.lineTo(cx,     cy + s * 0.5);
+    ctx.lineTo(cx + s, cy - s * 0.5);
+  } else {
+    ctx.moveTo(cx - s * 0.5, cy - s);
+    ctx.lineTo(cx + s * 0.5, cy);
+    ctx.lineTo(cx - s * 0.5, cy + s);
+  }
+  ctx.stroke();
+}
+
+// ═══════════════════════════════════════════════════════════
+// Fit all
+// ═══════════════════════════════════════════════════════════
+function fitAll() {
+  const vn = visNodes();
+  if (vn.length === 0) return;
+  const pad  = 48;
+  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+  for (const n of vn) {
+    const p = pos[n.id];
+    if (!p) continue;
+    const h = getNodeHeight(n);
+    minX = Math.min(minX, p.x - NODE_W / 2);
+    maxX = Math.max(maxX, p.x + NODE_W / 2);
+    minY = Math.min(minY, p.y - h / 2);
+    maxY = Math.max(maxY, p.y + h / 2);
+  }
+  minX -= pad; maxX += pad; minY -= pad; maxY += pad;
+  const scale = Math.min(canvas.width / (maxX - minX), canvas.height / (maxY - minY), 1.5);
+  transform.scale = scale;
+  transform.x     = (canvas.width  - (minX + maxX) * scale) / 2;
+  transform.y     = (canvas.height - (minY + maxY) * scale) / 2;
+  draw();
+}
+
+// ═══════════════════════════════════════════════════════════
+// Hit testing — returns { node, isToggle }
+// ═══════════════════════════════════════════════════════════
+function hitTest(sx, sy) {
+  const wx = (sx - transform.x) / transform.scale;
+  const wy = (sy - transform.y) / transform.scale;
+  const vn = visNodes();
+  for (let i = vn.length - 1; i >= 0; i--) {
+    const n = vn[i];
+    const p = pos[n.id];
+    if (!p) continue;
+    const nodeH = getNodeHeight(n);
+    if (Math.abs(wx - p.x) <= NODE_W / 2 && Math.abs(wy - p.y) <= nodeH / 2) {
+      const isToggle = hasChildren(n.id) && wx >= p.x + NODE_W / 2 - CHEV_ZONE;
+      return { node: n, isToggle };
+    }
+  }
+  return null;
+}
+
+// ═══════════════════════════════════════════════════════════
+// Properties panel
+// ═══════════════════════════════════════════════════════════
+const propsPanel = document.getElementById('props-panel');
+
+function showProperties(node) {
+  const details = DETAILS[node.id] || {};
+  const color   = TYPE_COLOR[node.type] || '#334155';
+  let html = `
+    <div class="ph">
+      <div class="ph-label">${node.label}</div>
+      <span class="ph-kind" style="background:${color}">${node.kind}</span>
+    </div>
+    <div id="props-scroll">`;
+  for (const [section, rows] of Object.entries(details)) {
+    html += `<div class="ps">${section}</div>`;
+    for (const [k, v] of Object.entries(rows))
+      html += `<div class="pr"><span class="pk" title="${k}">${k}</span><span class="pv" title="${v}">${v}</span></div>`;
+  }
+  html += '</div>';
+  propsPanel.innerHTML = html;
+  propsPanel.classList.remove('empty');
+}
+
+function clearProperties() {
+  propsPanel.innerHTML = '<span id="props-empty">Click a node to inspect</span>';
+  propsPanel.classList.add('empty');
+}
+
+// ═══════════════════════════════════════════════════════════
+// Interaction
+// ═══════════════════════════════════════════════════════════
+let isPanning   = false;
+let panOrigin   = { x: 0, y: 0 };
+let tfAtStart   = null;
+let didMove     = false;
+
+canvas.addEventListener('mousedown', e => {
+  isPanning = true; didMove = false;
+  panOrigin = { x: e.clientX, y: e.clientY };
+  tfAtStart = { ...transform };
+  container.classList.add('panning');
+  container.classList.remove('hovering');
+});
+
+window.addEventListener('mousemove', e => {
+  if (isPanning) {
+    const dx = e.clientX - panOrigin.x;
+    const dy = e.clientY - panOrigin.y;
+    if (Math.abs(dx) > 3 || Math.abs(dy) > 3) didMove = true;
+    transform.x = tfAtStart.x + dx;
+    transform.y = tfAtStart.y + dy;
+    draw();
+    return;
+  }
+  // Hover cursor
+  const rect = canvas.getBoundingClientRect();
+  const hit  = hitTest(e.clientX - rect.left, e.clientY - rect.top);
+  container.classList.toggle('hovering', !!hit);
+});
+
+window.addEventListener('mouseup', e => {
+  if (!isPanning) return;
+  isPanning = false;
+  container.classList.remove('panning');
+
+  if (!didMove) {
+    const rect = canvas.getBoundingClientRect();
+    const hit  = hitTest(e.clientX - rect.left, e.clientY - rect.top);
+    if (hit) {
+      if (hit.isToggle) {
+        // Toggle collapse
+        if (collapsed.has(hit.node.id)) collapsed.delete(hit.node.id);
+        else collapsed.add(hit.node.id);
+        recomputeLayout();
+        if (selectedId && !visNodes().find(n => n.id === selectedId)) {
+          selectedId = null; clearProperties();
+        }
+      } else {
+        selectedId = hit.node.id;
+        showProperties(hit.node);
+      }
+    } else {
+      selectedId = null;
+      clearProperties();
+    }
+    draw();
+  }
+});
+
+canvas.addEventListener('wheel', e => {
+  e.preventDefault();
+  const rect  = canvas.getBoundingClientRect();
+  const mx    = e.clientX - rect.left;
+  const my    = e.clientY - rect.top;
+  const f     = e.deltaY < 0 ? 1.12 : 1 / 1.12;
+  const ns    = Math.max(0.12, Math.min(3.5, transform.scale * f));
+  transform.x = mx - (mx - transform.x) * (ns / transform.scale);
+  transform.y = my - (my - transform.y) * (ns / transform.scale);
+  transform.scale = ns;
+  draw();
+}, { passive: false });
+
+// ─── Search ──────────────────────────────────────────────
+document.getElementById('search').addEventListener('input', e => {
+  filterQuery = e.target.value; draw();
+});
+
+// ─── Fit ─────────────────────────────────────────────────
+document.getElementById('fit-btn').addEventListener('click', fitAll);
+
+// ─── Expand / Collapse all ───────────────────────────────
+document.getElementById('expand-all-btn').addEventListener('click', () => {
+  collapsed.clear(); recomputeLayout(); draw();
+});
+
+document.getElementById('collapse-all-btn').addEventListener('click', () => {
+  for (const n of NODES) if (hasChildren(n.id)) collapsed.add(n.id);
+  if (selectedId && !visNodes().find(n => n.id === selectedId)) {
+    selectedId = null; clearProperties();
+  }
+  recomputeLayout(); draw();
+});
+
+// ─── Resize (zoom stable) ───────────────────────────────
+new ResizeObserver(() => {
+  canvas.width  = container.clientWidth;
+  canvas.height = container.clientHeight;
+  draw();
+}).observe(container);
+
+// ─── Init ────────────────────────────────────────────────
+canvas.width  = container.clientWidth;
+canvas.height = container.clientHeight;
+setTimeout(fitAll, 30);
+</script>
+</body>
+</html>

examples/keyboard_support.js

@@ -91,7 +91,6 @@
 
     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) {

examples/test_mouse_support.html

@@ -159,6 +159,14 @@
       <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>Element 3 - Mousedown&gt;mouseup actions:</strong></p>
+    <ul>
+      <li><code>click</code> - Simple click (coexists with mousedown&gt;mouseup)</li>
+      <li><code>mousedown>mouseup</code> - Left press and release (with JS values)</li>
+      <li><code>ctrl+mousedown>mouseup</code> - Ctrl + press and release</li>
+      <li><code>rmousedown>mouseup</code> - Right press and release</li>
+      <li><code>click mousedown>mouseup</code> - Click then press-and-release sequence</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>
@@ -197,6 +205,14 @@
     </button>
   </div>
 
+  <div class="test-container">
+    <h2>Test Element 3 (Mousedown&gt;mouseup actions)</h2>
+    <div id="test-element-3" class="test-element" tabindex="0">
+      Try mousedown&gt;mouseup actions here!<br>
+      Press and hold, then release. Also try Ctrl+drag, right-drag, and click then drag.
+    </div>
+  </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"
@@ -346,10 +362,48 @@
 
     add_mouse_support('test-element-2', JSON.stringify(combinations2));
 
+    // JS function for dynamic mousedown>mouseup values
+    // Returns cell-like data for testing
+    window.getCellId = function(event, element, combination) {
+      const x = event.clientX;
+      const y = event.clientY;
+      return {
+        cell_id: `cell-${Math.floor(x / 50)}-${Math.floor(y / 50)}`,
+        x: x,
+        y: y
+      };
+    };
+
+    // Element 3 - Mousedown>mouseup actions
+    const combinations3 = {
+      "click": {
+        "hx-post": "/test/element3-click"
+      },
+      "mousedown>mouseup": {
+        "hx-post": "/test/element3-mousedown-mouseup",
+        "hx-vals-extra": {"js": "getCellId"}
+      },
+      "ctrl+mousedown>mouseup": {
+        "hx-post": "/test/element3-ctrl-mousedown-mouseup",
+        "hx-vals-extra": {"js": "getCellId"}
+      },
+      "rmousedown>mouseup": {
+        "hx-post": "/test/element3-rmousedown-mouseup",
+        "hx-vals-extra": {"js": "getCellId"}
+      },
+      "click mousedown>mouseup": {
+        "hx-post": "/test/element3-click-then-mousedown-mouseup",
+        "hx-vals-extra": {"js": "getCellId"}
+      }
+    };
+
+    add_mouse_support('test-element-3', JSON.stringify(combinations3));
+
     // Log initial state
     logEvent('Mouse support initialized',
              'Element 1: All mouse actions configured',
              'Element 2: Using "rclick" alias (click, rclick, and click rclick sequence)',
+             'Element 3: Mousedown>mouseup actions (with JS getCellId function)',
              'Smart timeout: 500ms for sequences', false);
   </script>
 </body>

pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "myfasthtml"
-version = "0.3.0"
+version = "0.4.0"
 description = "Set of tools to quickly create HTML pages using FastHTML."
 readme = "README.md"
 authors = [
@@ -43,6 +43,7 @@ dependencies = [
     "uvloop",
     "watchfiles",
     "websockets",
+    "lark",
 ]
 
 [project.urls]
@@ -73,10 +74,12 @@ dev = [
 # -------------------------------------------------------------------
 [tool.setuptools]
 package-dir = { "" = "src" }
-packages = ["myfasthtml"]
+
+[tool.setuptools.packages.find]
+where = ["src"]
 
 [tool.setuptools.package-data]
 myfasthtml = [
-    "assets/*.css",
-    "assets/*.js"
+    "assets/**/*.css",
+    "assets/**/*.js"
 ]

requirements.txt

@@ -33,21 +33,25 @@ jaraco.context==6.0.1
 jaraco.functools==4.3.0
 jeepney==0.9.0
 keyring==25.6.0
+lark==1.3.1
 markdown-it-py==4.0.0
 mdurl==0.1.2
 more-itertools==10.8.0
 myauth==0.2.1
-mydbengine==0.1.0
-myutils==0.4.0
+mydbengine==0.2.1
+-e git+ssh://git@sheerka.synology.me:1010/kodjo/MyFastHtml.git@2f808ed226e98738a1cf476e1f1dda8a1d9118b0#egg=myfasthtml
+myutils==0.5.1
 nh3==0.3.1
 numpy==2.3.5
 oauthlib==3.3.1
 openpyxl==3.1.5
 packaging==25.0
 pandas==2.3.3
+pandas-stubs==2.3.3.251201
 passlib==1.7.4
 pipdeptree==2.29.0
 pluggy==1.6.0
+pyarrow==22.0.0
 pyasn1==0.6.1
 pycparser==2.23
 pydantic==2.12.3
@@ -77,6 +81,7 @@ soupsieve==2.8
 starlette==0.48.0
 twine==6.2.0
 typer==0.20.0
+types-pytz==2025.2.0.20251108
 typing-inspection==0.4.2
 typing_extensions==4.15.0
 tzdata==2025.2

src/app.py

@@ -1,18 +1,26 @@
+import json
 import logging.config
 
+import pandas as pd
 import yaml
+from dbengine.handlers import BaseRefHandler, handlers
 from fasthtml import serve
+from fasthtml.components import Div
 
 from myfasthtml.controls.CommandsDebugger import CommandsDebugger
+from myfasthtml.controls.DataGridsManager import DataGridsManager
 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.dbengine_utils import DataFrameHandler
 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
 
@@ -31,11 +39,60 @@ 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)
+  session_instance = UniqueInstance(session=session,
+                                    _id=Ids.UserSession,
+                                    on_init=lambda: handlers.register_handler(DataFrameHandler()))
   layout = Layout(session_instance, "Testing Layout")
-  layout.set_footer("Goodbye World")
+  layout.footer_left.add("Goodbye World")
   
   tabs_manager = TabsManager(layout, _id=f"-tabs_manager")
   add_tab = tabs_manager.commands.add_tab
@@ -51,7 +108,7 @@ def index(session):
   
   commands_debugger = CommandsDebugger(layout)
   btn_show_commands_debugger = mk.label("Commands",
-                                        icon=None,
+                                        icon=key_command16_regular,
                                         command=add_tab("Commands", commands_debugger),
                                         id=commands_debugger.get_id())
   
@@ -63,13 +120,26 @@ def index(session):
   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")
+  
+  # data grids
+  dgs_manager = DataGridsManager(layout, _id="-datagrids")
+  layout.left_drawer.add_group("Documents", Div("Documents",
+                                                dgs_manager.mk_main_icons(),
+                                                cls="mf-layout-group flex gap-3"))
+  layout.left_drawer.add(dgs_manager, "Documents")
   layout.set_main(tabs_manager)
+  
+  # keyboard shortcuts
   keyboard = Keyboard(layout, _id="-keyboard").add("ctrl+o",
                                                    add_tab("File Open", FileUpload(layout, _id="-file_upload")))
   keyboard.add("ctrl+n", add_tab("File Open", FileUpload(layout, _id="-file_upload")))

src/myfasthtml/assets/Readme.md

@@ -0,0 +1,15 @@
+# Commands used
+```
+cd src/myfasthtml/assets
+
+# Url to get codemirror resources : https://cdnjs.com/libraries/codemirror
+
+wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/codemirror.min.js
+wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/codemirror.min.css
+wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/hint/show-hint.min.js 
+wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/hint/show-hint.min.css
+wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/display/placeholder.min.js
+wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/lint/lint.min.css
+wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/lint/lint.min.js
+wget https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.20/addon/mode/simple.min.js
+```

src/myfasthtml/assets/codemirror/lint.min.css

@@ -0,0 +1 @@
+.CodeMirror-lint-markers{width:16px}.CodeMirror-lint-tooltip{background-color:#ffd;border:1px solid #000;border-radius:4px 4px 4px 4px;color:#000;font-family:monospace;font-size:10pt;overflow:hidden;padding:2px 5px;position:fixed;white-space:pre;white-space:pre-wrap;z-index:100;max-width:600px;opacity:0;transition:opacity .4s;-moz-transition:opacity .4s;-webkit-transition:opacity .4s;-o-transition:opacity .4s;-ms-transition:opacity .4s}.CodeMirror-lint-mark{background-position:left bottom;background-repeat:repeat-x}.CodeMirror-lint-mark-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=)}.CodeMirror-lint-mark-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==)}.CodeMirror-lint-marker{background-position:center center;background-repeat:no-repeat;cursor:pointer;display:inline-block;height:16px;width:16px;vertical-align:middle;position:relative}.CodeMirror-lint-message{padding-left:18px;background-position:top left;background-repeat:no-repeat}.CodeMirror-lint-marker-warning,.CodeMirror-lint-message-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=)}.CodeMirror-lint-marker-error,.CodeMirror-lint-message-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=)}.CodeMirror-lint-marker-multiple{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC);background-repeat:no-repeat;background-position:right bottom;width:100%;height:100%}.CodeMirror-lint-line-error{background-color:rgba(183,76,81,.08)}.CodeMirror-lint-line-warning{background-color:rgba(255,211,0,.1)}

src/myfasthtml/assets/codemirror/lint.min.js

@@ -0,0 +1 @@
+!function(t){"object"==typeof exports&&"object"==typeof module?t(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],t):t(CodeMirror)}(function(p){"use strict";var h="CodeMirror-lint-markers",g="CodeMirror-lint-line-";function u(t){t.parentNode&&t.parentNode.removeChild(t)}function v(t,e,n,o){t=t,e=e,n=n,(i=document.createElement("div")).className="CodeMirror-lint-tooltip cm-s-"+t.options.theme,i.appendChild(n.cloneNode(!0)),(t.state.lint.options.selfContain?t.getWrapperElement():document.body).appendChild(i),p.on(document,"mousemove",a),a(e),null!=i.style.opacity&&(i.style.opacity=1);var i,r=i;function a(t){if(!i.parentNode)return p.off(document,"mousemove",a);var e=Math.max(0,t.clientY-i.offsetHeight-5),t=Math.max(0,Math.min(t.clientX+5,i.ownerDocument.defaultView.innerWidth-i.offsetWidth));i.style.top=e+"px",i.style.left=t+"px"}function l(){var t;p.off(o,"mouseout",l),r&&((t=r).parentNode&&(null==t.style.opacity&&u(t),t.style.opacity=0,setTimeout(function(){u(t)},600)),r=null)}var s=setInterval(function(){if(r)for(var t=o;;t=t.parentNode){if((t=t&&11==t.nodeType?t.host:t)==document.body)return;if(!t){l();break}}if(!r)return clearInterval(s)},400);p.on(o,"mouseout",l)}function a(s,t,e){for(var n in this.marked=[],(t=t instanceof Function?{getAnnotations:t}:t)&&!0!==t||(t={}),this.options={},this.linterOptions=t.options||{},o)this.options[n]=o[n];for(var n in t)o.hasOwnProperty(n)?null!=t[n]&&(this.options[n]=t[n]):t.options||(this.linterOptions[n]=t[n]);this.timeout=null,this.hasGutter=e,this.onMouseOver=function(t){var e=s,n=t.target||t.srcElement;if(/\bCodeMirror-lint-mark-/.test(n.className)){for(var n=n.getBoundingClientRect(),o=(n.left+n.right)/2,n=(n.top+n.bottom)/2,i=e.findMarksAt(e.coordsChar({left:o,top:n},"client")),r=[],a=0;a<i.length;++a){var l=i[a].__annotation;l&&r.push(l)}r.length&&!function(t,e,n){for(var o=n.target||n.srcElement,i=document.createDocumentFragment(),r=0;r<e.length;r++){var a=e[r];i.appendChild(M(a))}v(t,n,i,o)}(e,r,t)}},this.waitingFor=0}var o={highlightLines:!1,tooltips:!0,delay:500,lintOnChange:!0,getAnnotations:null,async:!1,selfContain:null,formatAnnotation:null,onUpdateLinting:null};function C(t){var n,e=t.state.lint;e.hasGutter&&t.clearGutter(h),e.options.highlightLines&&(n=t).eachLine(function(t){var e=t.wrapClass&&/\bCodeMirror-lint-line-\w+\b/.exec(t.wrapClass);e&&n.removeLineClass(t,"wrap",e[0])});for(var o=0;o<e.marked.length;++o)e.marked[o].clear();e.marked.length=0}function M(t){var e=(e=t.severity)||"error",n=document.createElement("div");return n.className="CodeMirror-lint-message CodeMirror-lint-message-"+e,void 0!==t.messageHTML?n.innerHTML=t.messageHTML:n.appendChild(document.createTextNode(t.message)),n}function l(e){var t,n,o,i,r,a,l=e.state.lint;function s(){a=-1,o.off("change",s)}!l||(t=(i=l.options).getAnnotations||e.getHelper(p.Pos(0,0),"lint"))&&(i.async||t.async?(i=t,r=(o=e).state.lint,a=++r.waitingFor,o.on("change",s),i(o.getValue(),function(t,e){o.off("change",s),r.waitingFor==a&&(e&&t instanceof p&&(t=e),o.operation(function(){c(o,t)}))},r.linterOptions,o)):(n=t(e.getValue(),l.linterOptions,e))&&(n.then?n.then(function(t){e.operation(function(){c(e,t)})}):e.operation(function(){c(e,n)})))}function c(t,e){var n=t.state.lint;if(n){for(var o,i,r=n.options,a=(C(t),function(t){for(var e=[],n=0;n<t.length;++n){var o=t[n],i=o.from.line;(e[i]||(e[i]=[])).push(o)}return e}(e)),l=0;l<a.length;++l){var s=a[l];if(s){for(var u=null,c=n.hasGutter&&document.createDocumentFragment(),f=0;f<s.length;++f){var m=s[f],d=m.severity;i=d=d||"error",u="error"==(o=u)?o:i,r.formatAnnotation&&(m=r.formatAnnotation(m)),n.hasGutter&&c.appendChild(M(m)),m.to&&n.marked.push(t.markText(m.from,m.to,{className:"CodeMirror-lint-mark CodeMirror-lint-mark-"+d,__annotation:m}))}n.hasGutter&&t.setGutterMarker(l,h,function(e,n,t,o,i){var r=document.createElement("div"),a=r;return r.className="CodeMirror-lint-marker CodeMirror-lint-marker-"+t,o&&((a=r.appendChild(document.createElement("div"))).className="CodeMirror-lint-marker CodeMirror-lint-marker-multiple"),0!=i&&p.on(a,"mouseover",function(t){v(e,t,n,a)}),r}(t,c,u,1<s.length,r.tooltips)),r.highlightLines&&t.addLineClass(l,"wrap",g+u)}}r.onUpdateLinting&&r.onUpdateLinting(e,a,t)}}function s(t){var e=t.state.lint;e&&(clearTimeout(e.timeout),e.timeout=setTimeout(function(){l(t)},e.options.delay))}p.defineOption("lint",!1,function(t,e,n){if(n&&n!=p.Init&&(C(t),!1!==t.state.lint.options.lintOnChange&&t.off("change",s),p.off(t.getWrapperElement(),"mouseover",t.state.lint.onMouseOver),clearTimeout(t.state.lint.timeout),delete t.state.lint),e){for(var o=t.getOption("gutters"),i=!1,r=0;r<o.length;++r)o[r]==h&&(i=!0);n=t.state.lint=new a(t,e,i);n.options.lintOnChange&&t.on("change",s),0!=n.options.tooltips&&"gutter"!=n.options.tooltips&&p.on(t.getWrapperElement(),"mouseover",n.onMouseOver),l(t)}}),p.defineExtension("performLint",function(){l(this)})});

src/myfasthtml/assets/codemirror/placeholder.min.js

@@ -0,0 +1 @@
+!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(r){function n(e){e.state.placeholder&&(e.state.placeholder.parentNode.removeChild(e.state.placeholder),e.state.placeholder=null)}function i(e){n(e);var o=e.state.placeholder=document.createElement("pre"),t=(o.style.cssText="height: 0; overflow: visible",o.style.direction=e.getOption("direction"),o.className="CodeMirror-placeholder CodeMirror-line-like",e.getOption("placeholder"));"string"==typeof t&&(t=document.createTextNode(t)),o.appendChild(t),e.display.lineSpace.insertBefore(o,e.display.lineSpace.firstChild)}function l(e){c(e)&&i(e)}function a(e){var o=e.getWrapperElement(),t=c(e);o.className=o.className.replace(" CodeMirror-empty","")+(t?" CodeMirror-empty":""),(t?i:n)(e)}function c(e){return 1===e.lineCount()&&""===e.getLine(0)}r.defineOption("placeholder","",function(e,o,t){var t=t&&t!=r.Init;o&&!t?(e.on("blur",l),e.on("change",a),e.on("swapDoc",a),r.on(e.getInputField(),"compositionupdate",e.state.placeholderCompose=function(){var t;t=e,setTimeout(function(){var e,o=!1;((o=1==t.lineCount()?"TEXTAREA"==(e=t.getInputField()).nodeName?!t.getLine(0).length:!/[^\u200b]/.test(e.querySelector(".CodeMirror-line").textContent):o)?i:n)(t)},20)}),a(e)):!o&&t&&(e.off("blur",l),e.off("change",a),e.off("swapDoc",a),r.off(e.getInputField(),"compositionupdate",e.state.placeholderCompose),n(e),(t=e.getWrapperElement()).className=t.className.replace(" CodeMirror-empty","")),o&&!e.hasFocus()&&l(e)})});

src/myfasthtml/assets/codemirror/show-hint.min.css

@@ -0,0 +1 @@
+.CodeMirror-hints{position:absolute;z-index:10;overflow:hidden;list-style:none;margin:0;padding:2px;-webkit-box-shadow:2px 3px 5px rgba(0,0,0,.2);-moz-box-shadow:2px 3px 5px rgba(0,0,0,.2);box-shadow:2px 3px 5px rgba(0,0,0,.2);border-radius:3px;border:1px solid silver;background:#fff;font-size:90%;font-family:monospace;max-height:20em;overflow-y:auto;box-sizing:border-box}.CodeMirror-hint{margin:0;padding:0 4px;border-radius:2px;white-space:pre;color:#000;cursor:pointer}li.CodeMirror-hint-active{background:#08f;color:#fff}

src/myfasthtml/assets/codemirror/simple.min.js

@@ -0,0 +1 @@
+!function(e){"object"==typeof exports&&"object"==typeof module?e(require("../../lib/codemirror")):"function"==typeof define&&define.amd?define(["../../lib/codemirror"],e):e(CodeMirror)}(function(v){"use strict";function h(e,t){if(!e.hasOwnProperty(t))throw new Error("Undefined state "+t+" in simple mode")}function k(e,t){if(!e)return/(?:)/;var n="";return e=e instanceof RegExp?(e.ignoreCase&&(n="i"),e.unicode&&(n+="u"),e.source):String(e),new RegExp((!1===t?"":"^")+"(?:"+e+")",n)}function g(e,t){(e.next||e.push)&&h(t,e.next||e.push),this.regex=k(e.regex),this.token=function(e){if(!e)return null;if(e.apply)return e;if("string"==typeof e)return e.replace(/\./g," ");for(var t=[],n=0;n<e.length;n++)t.push(e[n]&&e[n].replace(/\./g," "));return t}(e.token),this.data=e}v.defineSimpleMode=function(e,t){v.defineMode(e,function(e){return v.simpleMode(e,t)})},v.simpleMode=function(e,t){h(t,"start");var n,a={},o=t.meta||{},r=!1;for(n in t)if(n!=o&&t.hasOwnProperty(n))for(var i=a[n]=[],l=t[n],s=0;s<l.length;s++){var d=l[s];i.push(new g(d,t)),(d.indent||d.dedent)&&(r=!0)}var c,p,S,m,u={startState:function(){return{state:"start",pending:null,local:null,localState:null,indent:r?[]:null}},copyState:function(e){var t={state:e.state,pending:e.pending,local:e.local,localState:null,indent:e.indent&&e.indent.slice(0)};e.localState&&(t.localState=v.copyState(e.local.mode,e.localState)),e.stack&&(t.stack=e.stack.slice(0));for(var n=e.persistentStates;n;n=n.next)t.persistentStates={mode:n.mode,spec:n.spec,state:n.state==e.localState?t.localState:v.copyState(n.mode,n.state),next:t.persistentStates};return t},token:(m=e,function(e,t){var n,a;if(t.pending)return a=t.pending.shift(),0==t.pending.length&&(t.pending=null),e.pos+=a.text.length,a.token;if(t.local)return t.local.end&&e.match(t.local.end)?(n=t.local.endToken||null,t.local=t.localState=null):(n=t.local.mode.token(e,t.localState),t.local.endScan&&(a=t.local.endScan.exec(e.current()))&&(e.pos=e.start+a.index)),n;for(var o=S[t.state],r=0;r<o.length;r++){var i=o[r],l=(!i.data.sol||e.sol())&&e.match(i.regex);if(l){if(i.data.next?t.state=i.data.next:i.data.push?((t.stack||(t.stack=[])).push(t.state),t.state=i.data.push):i.data.pop&&t.stack&&t.stack.length&&(t.state=t.stack.pop()),i.data.mode){h=d=f=s=u=p=c=d=void 0;var s,d=m,c=t,p=i.data.mode,u=i.token;if(p.persistent)for(var f=c.persistentStates;f&&!s;f=f.next)(p.spec?function e(t,n){if(t===n)return!0;if(!t||"object"!=typeof t||!n||"object"!=typeof n)return!1;var a=0;for(var o in t)if(t.hasOwnProperty(o)){if(!n.hasOwnProperty(o)||!e(t[o],n[o]))return!1;a++}for(var o in n)n.hasOwnProperty(o)&&a--;return 0==a}(p.spec,f.spec):p.mode==f.mode)&&(s=f);var d=s?s.mode:p.mode||v.getMode(d,p.spec),h=s?s.state:v.startState(d);p.persistent&&!s&&(c.persistentStates={mode:d,spec:p.spec,state:h,next:c.persistentStates}),c.localState=h,c.local={mode:d,end:p.end&&k(p.end),endScan:p.end&&!1!==p.forceEnd&&k(p.end,!1),endToken:u&&u.join?u[u.length-1]:u}}i.data.indent&&t.indent.push(e.indentation()+m.indentUnit),i.data.dedent&&t.indent.pop();h=i.token;if(h&&h.apply&&(h=h(l)),2<l.length&&i.token&&"string"!=typeof i.token){for(var g=2;g<l.length;g++)l[g]&&(t.pending||(t.pending=[])).push({text:l[g],token:i.token[g-1]});return e.backUp(l[0].length-(l[1]?l[1].length:0)),h[0]}return h&&h.join?h[0]:h}}return e.next(),null}),innerMode:function(e){return e.local&&{mode:e.local.mode,state:e.localState}},indent:(c=S=a,function(e,t,n){if(e.local&&e.local.mode.indent)return e.local.mode.indent(e.localState,t,n);if(null==e.indent||e.local||p.dontIndentStates&&-1<function(e,t){for(var n=0;n<t.length;n++)if(t[n]===e)return!0}(e.state,p.dontIndentStates))return v.Pass;var a=e.indent.length-1,o=c[e.state];e:for(;;){for(var r=0;r<o.length;r++){var i=o[r];if(i.data.dedent&&!1!==i.data.dedentIfLineStart){var l=i.regex.exec(t);if(l&&l[0]){a--,(i.next||i.push)&&(o=c[i.next||i.push]),t=t.slice(l[0].length);continue e}}}break}return a<0?0:e.indent[a]})};if(p=o)for(var f in o)o.hasOwnProperty(f)&&(u[f]=o[f]);return u}});

src/myfasthtml/assets/core/boundaries.js

@@ -0,0 +1,50 @@
+function initBoundaries(elementId, updateUrl) {
+  function updateBoundaries() {
+    const container = document.getElementById(elementId);
+    if (!container) {
+      console.warn("initBoundaries : element " + elementId + " is not found !");
+      return;
+    }
+
+    const rect = container.getBoundingClientRect();
+    const width = Math.floor(rect.width);
+    const height = Math.floor(rect.height);
+    console.log("boundaries: ", rect)
+
+    // Send boundaries to server
+    htmx.ajax('POST', updateUrl, {
+      target: '#' + elementId,
+      swap: 'outerHTML',
+      values: {width: width, height: height}
+    });
+  }
+
+  // Debounce function
+  let resizeTimeout;
+
+  function debouncedUpdate() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(updateBoundaries, 250);
+  }
+
+  // Update on load
+  setTimeout(updateBoundaries, 100);
+
+  // Update on window resize
+  const container = document.getElementById(elementId);
+  container.addEventListener('resize', debouncedUpdate);
+
+  // Cleanup on element removal
+  if (container) {
+    const observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        mutation.removedNodes.forEach(function (node) {
+          if (node.id === elementId) {
+            window.removeEventListener('resize', debouncedUpdate);
+          }
+        });
+      });
+    });
+    observer.observe(container.parentNode, {childList: true});
+  }
+}

src/myfasthtml/assets/core/dropdown.css

@@ -0,0 +1,57 @@
+.mf-dropdown-wrapper {
+    position: relative; /* CRUCIAL for the anchor */
+}
+
+.mf-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 50;
+    min-width: 200px;
+    padding: 0.5rem;
+    box-sizing: border-box;
+    overflow-x: auto;
+
+    /* DaisyUI styling */
+    background-color: var(--color-base-100);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-md);
+    box-shadow: 0 4px 6px -1px color-mix(in oklab, var(--color-neutral) 20%, #0000),
+    0 2px 4px -2px color-mix(in oklab, var(--color-neutral) 20%, #0000);
+}
+
+.mf-dropdown.is-visible {
+    display: block;
+    opacity: 1;
+}
+
+/* Dropdown vertical positioning */
+.mf-dropdown-below {
+    top: 100%;
+    bottom: auto;
+}
+
+.mf-dropdown-above {
+    bottom: 100%;
+    top: auto;
+}
+
+/* Dropdown horizontal alignment */
+.mf-dropdown-left {
+    left: 0;
+    right: auto;
+    transform: none;
+}
+
+.mf-dropdown-right {
+    right: 0;
+    left: auto;
+    transform: none;
+}
+
+.mf-dropdown-center {
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+}

src/myfasthtml/assets/core/dropdown.js

@@ -0,0 +1,11 @@
+/**
+ * Check if the click was on a dropdown button element.
+ * Used with hx-vals="js:getDropdownExtra()" for Dropdown toggle behavior.
+ *
+ * @param {MouseEvent} event - The mouse event
+ * @returns {Object} Object with is_button boolean property
+ */
+function getDropdownExtra(event) {
+  const button = event.target.closest('.mf-dropdown-btn');
+  return {is_button: button !== null};
+}

src/myfasthtml/assets/core/dsleditor.css

@@ -0,0 +1,329 @@
+/* *********************************************** */
+/* ********** CodeMirror DaisyUI Theme *********** */
+/* *********************************************** */
+
+/* Theme selector - uses DaisyUI variables for automatic theme switching */
+.cm-s-daisy.CodeMirror {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    font-family: var(--font-mono, ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, 'Courier New', monospace);
+    font-size: 14px;
+    line-height: 1.5;
+    height: auto;
+    border-radius: 0.5rem;
+    border: 1px solid var(--color-border);
+}
+
+/* Cursor */
+.cm-s-daisy .CodeMirror-cursor {
+    border-left-color: var(--color-primary);
+    border-left-width: 2px;
+}
+
+/* Selection */
+.cm-s-daisy .CodeMirror-selected {
+    background-color: var(--color-selection) !important;
+}
+
+.cm-s-daisy.CodeMirror-focused .CodeMirror-selected {
+    background-color: color-mix(in oklab, var(--color-primary) 30%, transparent) !important;
+}
+
+/* Line numbers and gutters */
+.cm-s-daisy .CodeMirror-gutters {
+    background-color: var(--color-base-200);
+    border-right: 1px solid var(--color-border);
+}
+
+.cm-s-daisy .CodeMirror-linenumber {
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    padding: 0 8px;
+}
+
+/* Active line */
+.cm-s-daisy .CodeMirror-activeline-background {
+    background-color: color-mix(in oklab, var(--color-base-content) 5%, transparent);
+}
+
+.cm-s-daisy .CodeMirror-activeline-gutter {
+    background-color: var(--color-base-300);
+}
+
+/* Matching brackets */
+.cm-s-daisy .CodeMirror-matchingbracket {
+    color: var(--color-success) !important;
+    font-weight: bold;
+}
+
+.cm-s-daisy .CodeMirror-nonmatchingbracket {
+    color: var(--color-error) !important;
+}
+
+/* *********************************************** */
+/* ******** CodeMirror Syntax Highlighting ******* */
+/* *********************************************** */
+
+/* Keywords (column, row, cell, if, not, and, or, in, between, case) */
+.cm-s-daisy .cm-keyword {
+    color: var(--color-primary);
+    font-weight: bold;
+}
+
+/* Built-in functions (style, format) */
+.cm-s-daisy .cm-builtin {
+    color: var(--color-secondary);
+    font-weight: 600;
+}
+
+/* Operators (==, <, >, contains, startswith, etc.) */
+.cm-s-daisy .cm-operator {
+    color: var(--color-warning);
+}
+
+/* Strings ("error", "EUR", etc.) */
+.cm-s-daisy .cm-string {
+    color: var(--color-success);
+}
+
+/* Numbers (0, 100, 3.14) */
+.cm-s-daisy .cm-number {
+    color: var(--color-accent);
+}
+
+/* Booleans (True, False, true, false) */
+.cm-s-daisy .cm-atom {
+    color: var(--color-info);
+}
+
+/* Special variables (value, col, row, cell) */
+.cm-s-daisy .cm-variable-2 {
+    color: var(--color-accent);
+    font-style: italic;
+}
+
+/* Cell IDs (tcell_*) */
+.cm-s-daisy .cm-variable-3 {
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+}
+
+/* Comments (#...) */
+.cm-s-daisy .cm-comment {
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    font-style: italic;
+}
+
+/* Property names (bold=, color=, etc.) */
+.cm-s-daisy .cm-property {
+    color: var(--color-base-content);
+    opacity: 0.8;
+}
+
+/* Errors/invalid syntax */
+.cm-s-daisy .cm-error {
+    color: var(--color-error);
+    text-decoration: underline wavy;
+}
+
+/* *********************************************** */
+/* ********** CodeMirror Autocomplete ************ */
+/* *********************************************** */
+
+/* Autocomplete dropdown container */
+.CodeMirror-hints {
+    background-color: var(--color-base-100);
+    border: 1px solid var(--color-border);
+    border-radius: 0.5rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+    font-family: var(--font-mono, ui-monospace, monospace);
+    font-size: 13px;
+    max-height: 20em;
+    overflow-y: auto;
+}
+
+/* Individual hint items */
+.CodeMirror-hint {
+    color: var(--color-base-content);
+    padding: 4px 8px;
+    cursor: pointer;
+}
+
+/* Hovered/selected hint */
+.CodeMirror-hint-active {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+}
+
+/* *********************************************** */
+/* ********** CodeMirror Lint Markers ************ */
+/* *********************************************** */
+
+/* Lint gutter marker */
+.CodeMirror-lint-marker {
+    cursor: pointer;
+}
+
+.CodeMirror-lint-marker-error {
+    color: var(--color-error);
+}
+
+.CodeMirror-lint-marker-warning {
+    color: var(--color-warning);
+}
+
+/* Lint tooltip */
+.CodeMirror-lint-tooltip {
+    background-color: var(--color-base-100);
+    border: 1px solid var(--color-border);
+    border-radius: 0.375rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    color: var(--color-base-content);
+    font-family: var(--font-sans, ui-sans-serif, system-ui);
+    font-size: 13px;
+    padding: 8px 12px;
+    max-width: 400px;
+}
+
+.CodeMirror-lint-message-error {
+    color: var(--color-error);
+}
+
+.CodeMirror-lint-message-warning {
+    color: var(--color-warning);
+}
+
+/* *********************************************** */
+/* ********** DslEditor Wrapper Styles *********** */
+/* *********************************************** */
+
+/* Wrapper container for DslEditor */
+.mf-dsl-editor-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+/* Editor container */
+.mf-dsl-editor {
+    border-radius: 0.5rem;
+    overflow: hidden;
+}
+
+/* *********************************************** */
+/* ********** Preset Styles *********** */
+/* *********************************************** */
+
+.mf-formatting-primary {
+    background-color: color-mix(in oklab, var(--color-primary) 65%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-success {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-error {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
+    border-radius: 0.375rem;
+}
+
+
+.mf-formatting-red {
+    background-color: color-mix(in oklab, red 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+
+.mf-formatting-red {
+    background-color: color-mix(in oklab, red 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-blue {
+    background-color: color-mix(in oklab, blue 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-green {
+    background-color: color-mix(in oklab, green 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-yellow {
+    background-color: color-mix(in oklab, yellow 50%, #0000);
+    color: var(--color-base-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-orange {
+    background-color: color-mix(in oklab, orange 50%, #0000);
+    color: var(--color-base-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-purple {
+    background-color: color-mix(in oklab, purple 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-pink {
+    background-color: color-mix(in oklab, pink 50%, #0000);
+    color: var(--color-base-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-gray {
+    background-color: color-mix(in oklab, gray 50%, #0000);
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-black {
+    background-color: black;
+    color: var(--color-primary-content);
+    border-radius: 0.375rem;
+}
+
+.mf-formatting-white {
+    background-color: white;
+    color: var(--color-base-content);
+    border-radius: 0.375rem;
+}

src/myfasthtml/assets/core/dsleditor.js

@@ -0,0 +1,269 @@
+/**
+ * Initialize DslEditor with CodeMirror 5
+ *
+ * Features:
+ * - DSL-based autocompletion
+ * - Line numbers
+ * - Readonly support
+ * - Placeholder support
+ * - Textarea synchronization
+ * - Debounced HTMX server update via updateCommandId
+ *
+ * Required CodeMirror addons:
+ * - addon/hint/show-hint.js
+ * - addon/hint/show-hint.css
+ * - addon/display/placeholder.js
+ *
+ * Requires:
+ * - htmx loaded globally
+ *
+ * @param {Object} config
+ */
+function initDslEditor(config) {
+  const {
+    elementId,
+    textareaId,
+    lineNumbers,
+    autocompletion,
+    linting,
+    placeholder,
+    readonly,
+    updateCommandId,
+    dslId,
+    dsl
+  } = config;
+
+  const wrapper = document.getElementById(elementId);
+  const textarea = document.getElementById(textareaId);
+  const editorContainer = document.getElementById(`cm_${elementId}`);
+
+  if (!wrapper || !textarea || !editorContainer) {
+    console.error(`DslEditor: Missing elements for ${elementId}`);
+    return;
+  }
+
+  if (typeof CodeMirror === "undefined") {
+    console.error("DslEditor: CodeMirror 5 not loaded");
+    return;
+  }
+
+  /* --------------------------------------------------
+   * DSL autocompletion hint (async via server)
+   * -------------------------------------------------- */
+
+  // Characters that trigger auto-completion
+  const AUTO_TRIGGER_CHARS = [".", "(", '"', " "];
+
+  function dslHint(cm, callback) {
+    const cursor = cm.getCursor();
+    const text = cm.getValue();
+
+    // Build URL with query params
+    const params = new URLSearchParams({
+      e_id: dslId,
+      text: text,
+      line: cursor.line,
+      ch: cursor.ch
+    });
+
+    fetch(`/myfasthtml/completions?${params}`)
+      .then(response => response.json())
+      .then(data => {
+        if (!data || !data.suggestions || data.suggestions.length === 0) {
+          callback(null);
+          return;
+        }
+
+        callback({
+          list: data.suggestions.map(s => ({
+            text: s.label,
+            displayText: s.detail ? `${s.label} - ${s.detail}` : s.label
+          })),
+          from: CodeMirror.Pos(data.from.line, data.from.ch),
+          to: CodeMirror.Pos(data.to.line, data.to.ch)
+        });
+      })
+      .catch(err => {
+        console.error("DslEditor: Completion error", err);
+        callback(null);
+      });
+  }
+
+  // Mark hint function as async for CodeMirror
+  dslHint.async = true;
+
+  /* --------------------------------------------------
+   * DSL linting (async via server)
+   * -------------------------------------------------- */
+
+  function dslLint(text, updateOutput, options, cm) {
+    const cursor = cm.getCursor();
+
+    const params = new URLSearchParams({
+      e_id: dslId,
+      text: text,
+      line: cursor.line,
+      ch: cursor.ch
+    });
+
+    fetch(`/myfasthtml/validations?${params}`)
+      .then(response => response.json())
+      .then(data => {
+        if (!data || !data.errors || data.errors.length === 0) {
+          updateOutput([]);
+          return;
+        }
+
+        // Convert server errors to CodeMirror lint format
+        // Server returns 1-based positions, CodeMirror expects 0-based
+        const annotations = data.errors.map(err => ({
+          from: CodeMirror.Pos(err.line - 1, Math.max(0, err.column - 1)),
+          to: CodeMirror.Pos(err.line - 1, err.column),
+          message: err.message,
+          severity: err.severity || "error"
+        }));
+
+        updateOutput(annotations);
+      })
+      .catch(err => {
+        console.error("DslEditor: Linting error", err);
+        updateOutput([]);
+      });
+  }
+
+  // Mark lint function as async for CodeMirror
+  dslLint.async = true;
+
+  /* --------------------------------------------------
+   * Register Simple Mode if available and config provided
+   * -------------------------------------------------- */
+
+  let modeName = null;
+
+  if (typeof CodeMirror.defineSimpleMode !== "undefined" && dsl && dsl.simpleModeConfig) {
+    // Generate unique mode name from DSL name
+    modeName = `dsl-${dsl.name.toLowerCase().replace(/\s+/g, '-')}`;
+
+    // Register the mode if not already registered
+    if (!CodeMirror.modes[modeName]) {
+      try {
+        CodeMirror.defineSimpleMode(modeName, dsl.simpleModeConfig);
+      } catch (err) {
+        console.error(`Failed to register Simple Mode for ${dsl.name}:`, err);
+        modeName = null;
+      }
+    }
+  }
+
+  /* --------------------------------------------------
+   * Create CodeMirror editor
+   * -------------------------------------------------- */
+
+  const enableCompletion = autocompletion && dslId;
+  // Only enable linting if the lint addon is loaded
+  const lintAddonLoaded = typeof CodeMirror.lint !== "undefined" ||
+    (CodeMirror.defaults && "lint" in CodeMirror.defaults);
+  const enableLinting = linting && dslId && lintAddonLoaded;
+
+  const editorOptions = {
+    value: textarea.value || "",
+    mode: modeName || undefined,  // Use Simple Mode if available
+    theme: "daisy",  // Use DaisyUI theme for automatic theme switching
+    lineNumbers: !!lineNumbers,
+    readOnly: !!readonly,
+    placeholder: placeholder || "",
+    extraKeys: enableCompletion ? {
+      "Ctrl-Space": "autocomplete"
+    } : {},
+    hintOptions: enableCompletion ? {
+      hint: dslHint,
+      completeSingle: false
+    } : undefined
+  };
+
+  // Add linting options if enabled and addon is available
+  if (enableLinting) {
+    // Include linenumbers gutter if lineNumbers is enabled
+    editorOptions.gutters = lineNumbers
+      ? ["CodeMirror-linenumbers", "CodeMirror-lint-markers"]
+      : ["CodeMirror-lint-markers"];
+    editorOptions.lint = {
+      getAnnotations: dslLint,
+      async: true
+    };
+  }
+
+  const editor = CodeMirror(editorContainer, editorOptions);
+
+  /* --------------------------------------------------
+   * Auto-trigger completion on specific characters
+   * -------------------------------------------------- */
+
+  if (enableCompletion) {
+    editor.on("inputRead", function (cm, change) {
+      if (change.origin !== "+input") return;
+
+      const lastChar = change.text[change.text.length - 1];
+      const lastCharOfInput = lastChar.slice(-1);
+
+      if (AUTO_TRIGGER_CHARS.includes(lastCharOfInput)) {
+        cm.showHint({completeSingle: false});
+      }
+    });
+  }
+
+  /* --------------------------------------------------
+   * Debounced update + HTMX transport
+   * -------------------------------------------------- */
+
+  let debounceTimer = null;
+  const DEBOUNCE_DELAY = 300;
+
+  editor.on("change", function (cm) {
+    const value = cm.getValue();
+    textarea.value = value;
+
+    if (!updateCommandId) return;
+
+    clearTimeout(debounceTimer);
+    debounceTimer = setTimeout(() => {
+      wrapper.dispatchEvent(
+        new CustomEvent("dsl-editor-update", {
+          detail: {
+            commandId: updateCommandId,
+            value: value
+          }
+        })
+      );
+    }, DEBOUNCE_DELAY);
+  });
+
+  /* --------------------------------------------------
+   * HTMX listener (LOCAL to wrapper)
+   * -------------------------------------------------- */
+
+  if (updateCommandId && typeof htmx !== "undefined") {
+    wrapper.addEventListener("dsl-editor-update", function (e) {
+      htmx.ajax("POST", "/myfasthtml/commands", {
+        target: wrapper,
+        swap: "none",
+        values: {
+          c_id: e.detail.commandId,
+          content: e.detail.value
+        }
+      });
+    });
+  }
+
+  /* --------------------------------------------------
+   * Public API
+   * -------------------------------------------------- */
+
+  wrapper._dslEditor = {
+    editor: editor,
+    getContent: () => editor.getValue(),
+    setContent: (content) => editor.setValue(content)
+  };
+
+  //console.debug(`DslEditor initialized: ${elementId}, DSL=${dsl?.name || "unknown"}, dsl_id=${dslId}, completion=${enableCompletion ? "enabled" : "disabled"}, linting=${enableLinting ? "enabled" : "disabled"}`);
+}

src/myfasthtml/assets/core/hierarchical_canvas_graph.css

@@ -0,0 +1,128 @@
+/**
+ * Hierarchical Canvas Graph Styles
+ *
+ * Styles for the canvas-based hierarchical graph visualization control.
+ */
+
+/* *********************************************** */
+/* ********** Color Variables (DaisyUI) ********** */
+/* *********************************************** */
+
+/* Instance kind colors - hardcoded to preserve visual identity */
+:root {
+  --hcg-color-root: #2563eb;
+  --hcg-color-single: #7c3aed;
+  --hcg-color-multiple: #047857;
+  --hcg-color-unique: #b45309;
+
+  /* UI colors */
+  --hcg-bg-main: var(--color-base-100, #0d1117);
+  --hcg-bg-button: var(--color-base-200, rgba(22, 27, 34, 0.92));
+  --hcg-border: var(--color-border, #30363d);
+  --hcg-text-muted: color-mix(in oklab, var(--color-base-content, #e6edf3) 50%, transparent);
+  --hcg-text-primary: var(--color-base-content, #e6edf3);
+
+  /* Canvas drawing colors */
+  --hcg-dot-grid: rgba(125, 133, 144, 0.12);
+  --hcg-edge: rgba(48, 54, 61, 0.9);
+  --hcg-edge-dimmed: rgba(48, 54, 61, 0.25);
+  --hcg-node-bg: var(--color-base-300, #1c2128);
+  --hcg-node-bg-selected: color-mix(in oklab, var(--color-base-300, #1c2128) 70%, #f0883e 30%);
+  --hcg-node-border-selected: #f0883e;
+  --hcg-node-border-match: #e3b341;
+  --hcg-node-glow: #f0883e;
+}
+
+/* Main control wrapper */
+.mf-hierarchical-canvas-graph {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Container that holds the canvas */
+.mf-hcg-container {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  background: var(--hcg-bg-main);
+  width: 100%;
+  height: 100%;
+}
+
+/* Toggle button positioned absolutely within container */
+.mf-hcg-container button {
+  font-family: inherit;
+  user-select: none;
+}
+
+/* Canvas element (sized by JavaScript) */
+.mf-hcg-container canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+}
+
+.mf-hcg-container canvas:active {
+  cursor: grabbing;
+}
+
+/* Optional: toolbar/controls overlay (if needed in future) */
+.mf-hcg-toolbar {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background: var(--hcg-bg-button);
+  border: 1px solid var(--hcg-border);
+  border-radius: 8px;
+  padding: 6px;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  backdrop-filter: blur(4px);
+  z-index: 10;
+}
+
+/* Layout toggle button */
+.mf-hcg-toggle-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  background: var(--hcg-bg-button);
+  border: 1px solid var(--hcg-border);
+  border-radius: 6px;
+  color: var(--hcg-text-muted);
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+  transition: color 0.15s, background 0.15s;
+  z-index: 10;
+  padding: 0;
+  line-height: 1;
+}
+
+.mf-hcg-toggle-btn:hover {
+  color: var(--hcg-text-primary);
+  background: color-mix(in oklab, var(--hcg-bg-main) 90%, var(--hcg-text-primary) 10%);
+}
+
+/* Optional: loading state */
+.mf-hcg-container.loading::after {
+  content: 'Loading...';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--hcg-text-muted);
+  font-size: 14px;
+  font-family: system-ui, sans-serif;
+}

src/myfasthtml/assets/core/hierarchical_canvas_graph.js

@@ -0,0 +1,861 @@
+/**
+ * Hierarchical Canvas Graph
+ *
+ * Canvas-based visualization for hierarchical graph data with expand/collapse.
+ * Features: Reingold-Tilford layout, zoom/pan, search filter, dot grid background.
+ */
+
+/**
+ * Initialize hierarchical canvas graph visualization.
+ *
+ * Creates an interactive canvas-based hierarchical graph with the following features:
+ * - Reingold-Tilford tree layout algorithm
+ * - Expand/collapse nodes with children
+ * - Zoom (mouse wheel) and pan (drag) controls
+ * - Layout mode toggle (horizontal/vertical)
+ * - Search/filter nodes by label or kind
+ * - Click events for node selection and toggle
+ * - Stable zoom on container resize
+ * - Dot grid background (Figma-style)
+ *
+ * @param {string} containerId - The ID of the container div element
+ * @param {Object} options - Configuration options
+ * @param {Array<Object>} options.nodes - Array of node objects with properties:
+ *   @param {string} options.nodes[].id - Unique node identifier
+ *   @param {string} options.nodes[].label - Display label
+ *   @param {string} options.nodes[].kind - Instance kind (root|single|unique|multiple)
+ *   @param {string} options.nodes[].type - Class type/name
+ * @param {Array<Object>} options.edges - Array of edge objects with properties:
+ *   @param {string} options.edges[].from - Source node ID
+ *   @param {string} options.edges[].to - Target node ID
+ * @param {Array<string>} [options.collapsed=[]] - Array of initially collapsed node IDs
+ * @param {Object} [options.events={}] - Event handlers mapping event names to HTMX options:
+ *   @param {Object} [options.events.select_node] - Handler for node selection (click on node)
+ *   @param {Object} [options.events.toggle_node] - Handler for expand/collapse toggle
+ *
+ * @returns {void}
+ *
+ * @example
+ * initHierarchicalCanvasGraph('graph-container', {
+ *   nodes: [
+ *     { id: 'root', label: 'Root', kind: 'root', type: 'RootInstance' },
+ *     { id: 'child', label: 'Child', kind: 'single', type: 'MyComponent' }
+ *   ],
+ *   edges: [{ from: 'root', to: 'child' }],
+ *   collapsed: [],
+ *   events: {
+ *     select_node: { url: '/api/select', target: '#panel', swap: 'innerHTML' }
+ *   }
+ * });
+ */
+function initHierarchicalCanvasGraph(containerId, options = {}) {
+  const container = document.getElementById(containerId);
+  if (!container) {
+    console.error(`HierarchicalCanvasGraph: Container "${containerId}" not found`);
+    return;
+  }
+
+  // Prevent double initialization
+  if (container._hcgInitialized) {
+    console.warn(`HierarchicalCanvasGraph: Container "${containerId}" already initialized`);
+    return;
+  }
+  container._hcgInitialized = true;
+
+  // ═══════════════════════════════════════════════════════════
+  // Configuration & Constants
+  // ═══════════════════════════════════════════════════════════
+  const NODES          = options.nodes || [];
+  const EDGES          = options.edges || [];
+  const EVENTS         = options.events || {};
+  // filtered_nodes: null = no filter, [] = filter but no matches, [ids] = filter with matches
+  const FILTERED_NODES = options.filtered_nodes === null ? null : new Set(options.filtered_nodes);
+
+  // ═══════════════════════════════════════════════════════════
+  // Visual Constants
+  // ═══════════════════════════════════════════════════════════
+  const NODE_W         = 178;  // Node width in pixels
+  const NODE_H_SMALL   = 36;   // Node height without description
+  const NODE_H_LARGE   = 54;   // Node height with description
+  const CHEV_ZONE      = 26;   // Toggle button hit area width (rightmost px of node)
+
+  function getNodeHeight(node) {
+    return node.description ? NODE_H_LARGE : NODE_H_SMALL;
+  }
+
+  const TOGGLE_BTN_SIZE = 32;  // Toggle button dimensions
+  const TOGGLE_BTN_POS  = 12;  // Toggle button offset from corner
+
+  const FIT_PADDING     = 48;  // Padding around graph when fitting
+  const FIT_MAX_SCALE   = 1.5; // Maximum zoom level when fitting
+
+  const DOT_GRID_SPACING = 24; // Dot grid spacing in pixels
+  const DOT_GRID_RADIUS  = 0.9; // Dot radius in pixels
+
+  const ZOOM_FACTOR      = 1.12;  // Zoom multiplier per wheel tick
+  const ZOOM_MIN         = 0.12;  // Minimum zoom level
+  const ZOOM_MAX         = 3.5;   // Maximum zoom level
+
+  // Spacing constants (adjusted per mode)
+  const HORIZONTAL_MODE_SPACING = {
+    levelGap: 84,    // vertical distance between parent-child levels
+    siblingGap: 22   // gap between siblings (in addition to NODE_W)
+  };
+
+  const VERTICAL_MODE_SPACING = {
+    levelGap: 220,   // horizontal distance between parent-child (after swap)
+    siblingGap: 14   // gap between siblings (in addition to NODE_H_LARGE)
+  };
+
+  function getSpacing() {
+    return layoutMode === 'vertical' ? VERTICAL_MODE_SPACING : HORIZONTAL_MODE_SPACING;
+  }
+
+  // Color mapping based on instance kind (read from CSS variables for DaisyUI theme compatibility)
+  const computedStyle = getComputedStyle(document.documentElement);
+  const KIND_COLOR = {
+    root:     computedStyle.getPropertyValue('--hcg-color-root').trim() || '#2563eb',
+    single:   computedStyle.getPropertyValue('--hcg-color-single').trim() || '#7c3aed',
+    multiple: computedStyle.getPropertyValue('--hcg-color-multiple').trim() || '#047857',
+    unique:   computedStyle.getPropertyValue('--hcg-color-unique').trim() || '#b45309',
+  };
+
+  // UI colors from CSS variables
+  const UI_COLORS = {
+    dotGrid:          computedStyle.getPropertyValue('--hcg-dot-grid').trim() || 'rgba(125,133,144,0.12)',
+    edge:             computedStyle.getPropertyValue('--hcg-edge').trim() || 'rgba(48,54,61,0.9)',
+    edgeDimmed:       computedStyle.getPropertyValue('--hcg-edge-dimmed').trim() || 'rgba(48,54,61,0.25)',
+    nodeBg:           computedStyle.getPropertyValue('--hcg-node-bg').trim() || '#1c2128',
+    nodeBgSelected:   computedStyle.getPropertyValue('--hcg-node-bg-selected').trim() || '#2a1f0f',
+    nodeBorderSel:    computedStyle.getPropertyValue('--hcg-node-border-selected').trim() || '#f0883e',
+    nodeBorderMatch:  computedStyle.getPropertyValue('--hcg-node-border-match').trim() || '#e3b341',
+    nodeGlow:         computedStyle.getPropertyValue('--hcg-node-glow').trim() || '#f0883e',
+    textPrimary:      computedStyle.getPropertyValue('--hcg-text-primary').trim() || '#e6edf3',
+    textMuted:        computedStyle.getPropertyValue('--hcg-text-muted').trim() || 'rgba(125,133,144,0.5)',
+  };
+
+  // ═══════════════════════════════════════════════════════════
+  // Graph structure
+  // ═══════════════════════════════════════════════════════════
+  const childMap = {};
+  const hasParentSet = new Set();
+
+  for (const n of NODES) childMap[n.id] = [];
+  for (const e of EDGES) {
+    (childMap[e.from] = childMap[e.from] || []).push(e.to);
+    hasParentSet.add(e.to);
+  }
+
+  function hasChildren(id) {
+    return (childMap[id] || []).length > 0;
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // State
+  // ═══════════════════════════════════════════════════════════
+  const collapsed    = new Set(options.collapsed || []);
+  let selectedId     = null;
+  let filterQuery    = '';
+  let transform      = options.transform || { x: 0, y: 0, scale: 1 };
+  let pos            = {};
+  let layoutMode     = options.layout_mode || 'horizontal'; // 'horizontal' | 'vertical'
+
+  // ═══════════════════════════════════════════════════════════
+  // Visibility & Layout
+  // ═══════════════════════════════════════════════════════════
+  function getHiddenSet() {
+    const hidden = new Set();
+    function addDesc(id) {
+      for (const c of childMap[id] || []) {
+        if (!hidden.has(c)) { hidden.add(c); addDesc(c); }
+      }
+    }
+    for (const id of collapsed) addDesc(id);
+    return hidden;
+  }
+
+  function getDescendants(nodeId) {
+    /**
+     * Get all descendant node IDs for a given node.
+     * Used to highlight descendants when a node is selected.
+     */
+    const descendants = new Set();
+    function addDesc(id) {
+      for (const child of childMap[id] || []) {
+        if (!descendants.has(child)) {
+          descendants.add(child);
+          addDesc(child);
+        }
+      }
+    }
+    addDesc(nodeId);
+    return descendants;
+  }
+
+  function visNodes() {
+    const h = getHiddenSet();
+    return NODES.filter(n => !h.has(n.id));
+  }
+
+  function visEdges(vn) {
+    const vi = new Set(vn.map(n => n.id));
+    return EDGES.filter(e => vi.has(e.from) && vi.has(e.to));
+  }
+
+  /**
+   * Compute hierarchical layout using Reingold-Tilford algorithm (simplified)
+   */
+  function computeLayout(nodes, edges) {
+    const spacing = getSpacing();
+    const cm = {};
+    const hp = new Set();
+    for (const n of nodes) cm[n.id] = [];
+    for (const e of edges) { (cm[e.from] = cm[e.from] || []).push(e.to); hp.add(e.to); }
+
+    const roots = nodes.filter(n => !hp.has(n.id)).map(n => n.id);
+
+    // Assign depth via BFS
+    const depth = {};
+    const q = roots.map(r => [r, 0]);
+    while (q.length) {
+      const [id, d] = q.shift();
+      if (depth[id] !== undefined) continue;
+      depth[id] = d;
+      for (const c of cm[id] || []) q.push([c, d + 1]);
+    }
+
+    // Assign positions
+    const positions = {};
+    for (const n of nodes) positions[n.id] = { x: 0, y: (depth[n.id] || 0) * spacing.levelGap };
+
+    // Create node map for quick access by ID
+    const nodeMap = {};
+    for (const n of nodes) nodeMap[n.id] = n;
+
+    // Sibling stride for horizontal mode
+    const siblingStride = NODE_W + spacing.siblingGap;
+
+    // DFS to assign x (sibling spacing)
+    let slot = 0;
+    let currentX = 0; // For dynamic spacing in vertical mode
+
+    function dfs(id) {
+      const children = cm[id] || [];
+      if (children.length === 0) {
+        // Leaf node: assign x position based on layout mode
+        if (layoutMode === 'vertical') {
+          // Dynamic spacing based on actual node height
+          const node = nodeMap[id];
+          const h = getNodeHeight(node);
+          positions[id].x = currentX + h / 2; // Center of the node
+          currentX += h + spacing.siblingGap; // Move to next position
+        } else {
+          // Horizontal mode: constant spacing
+          positions[id].x = slot++ * siblingStride;
+        }
+        return;
+      }
+      // Non-leaf: recurse children, then center between them
+      for (const c of children) dfs(c);
+      const xs = children.map(c => positions[c].x);
+      positions[id].x = (Math.min(...xs) + Math.max(...xs)) / 2;
+    }
+    for (const r of roots) dfs(r);
+
+    return positions;
+  }
+
+  function recomputeLayout() {
+    const vn = visNodes();
+    pos = computeLayout(vn, visEdges(vn));
+  }
+
+  /**
+   * Transform position based on current layout mode
+   * In vertical mode: swap x and y so tree grows left-to-right instead of top-to-bottom
+   * @param {Object} p - Position {x, y}
+   * @returns {Object} - Transformed position
+   */
+  function transformPos(p) {
+    if (layoutMode === 'vertical') {
+      // Swap x and y: horizontal spread becomes vertical, depth becomes horizontal
+      return { x: p.y, y: p.x };
+    }
+    return p;
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // Canvas Setup
+  // ═══════════════════════════════════════════════════════════
+  const canvas = document.createElement('canvas');
+  canvas.id = `${containerId}_canvas`;
+  canvas.style.cssText = 'display:block; width:100%; height:100%; cursor:grab; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: always;';
+  container.appendChild(canvas);
+
+  const ctx = canvas.getContext('2d');
+
+  // Logical dimensions (CSS pixels) - used for drawing coordinates
+  let logicalWidth = 0;
+  let logicalHeight = 0;
+
+  // Tooltip element for showing full text when truncated
+  const tooltip = document.createElement('div');
+  tooltip.className = 'mf-tooltip-container';
+  tooltip.setAttribute('data-visible', 'false');
+  document.body.appendChild(tooltip);
+
+  // Layout toggle button overlay
+  const toggleBtn = document.createElement('button');
+  toggleBtn.className = 'mf-hcg-toggle-btn';
+  toggleBtn.innerHTML = '⇄';
+  toggleBtn.title = 'Toggle layout orientation';
+  toggleBtn.setAttribute('aria-label', 'Toggle between horizontal and vertical layout');
+  toggleBtn.addEventListener('click', () => {
+    layoutMode = layoutMode === 'horizontal' ? 'vertical' : 'horizontal';
+    toggleBtn.innerHTML = layoutMode === 'horizontal' ? '⇄' : '⇅';
+    toggleBtn.title = `Switch to ${layoutMode === 'horizontal' ? 'vertical' : 'horizontal'} layout`;
+    toggleBtn.setAttribute('aria-label', `Switch to ${layoutMode === 'horizontal' ? 'vertical' : 'horizontal'} layout`);
+    // Recompute layout with new spacing
+    recomputeLayout();
+    fitAll();
+    // Save layout mode change
+    saveViewState();
+  });
+  container.appendChild(toggleBtn);
+
+  function resize() {
+    const ratio = window.devicePixelRatio || 1;
+
+    // Store logical dimensions (CSS pixels) for drawing coordinates
+    logicalWidth = container.clientWidth;
+    logicalHeight = container.clientHeight;
+
+    // Set canvas internal resolution to match physical pixels (prevents blur on HiDPI screens)
+    canvas.width = logicalWidth * ratio;
+    canvas.height = logicalHeight * ratio;
+
+    // Reset transformation matrix to identity (prevents cumulative scaling)
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+
+    // Scale context to maintain logical coordinate system
+    ctx.scale(ratio, ratio);
+
+    draw();
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // Drawing
+  // ═══════════════════════════════════════════════════════════
+  function drawDotGrid() {
+    const ox = ((transform.x % DOT_GRID_SPACING) + DOT_GRID_SPACING) % DOT_GRID_SPACING;
+    const oy = ((transform.y % DOT_GRID_SPACING) + DOT_GRID_SPACING) % DOT_GRID_SPACING;
+    ctx.fillStyle = UI_COLORS.dotGrid;
+    for (let x = ox - DOT_GRID_SPACING; x < logicalWidth + DOT_GRID_SPACING; x += DOT_GRID_SPACING) {
+      for (let y = oy - DOT_GRID_SPACING; y < logicalHeight + DOT_GRID_SPACING; y += DOT_GRID_SPACING) {
+        ctx.beginPath();
+        ctx.arc(x, y, DOT_GRID_RADIUS, 0, Math.PI * 2);
+        ctx.fill();
+      }
+    }
+  }
+
+  function draw() {
+    ctx.clearRect(0, 0, logicalWidth, logicalHeight);
+    drawDotGrid();
+
+    // Calculate matchIds based on filter state:
+    // - FILTERED_NODES === null: no filter active → matchIds = null (nothing dimmed)
+    // - FILTERED_NODES.size === 0: filter active, no matches → matchIds = empty Set (everything dimmed)
+    // - FILTERED_NODES.size > 0: filter active with matches → matchIds = FILTERED_NODES (dim non-matches)
+    const matchIds = FILTERED_NODES === null ? null : FILTERED_NODES;
+
+    // Get descendants of selected node for highlighting
+    const descendantIds = selectedId ? getDescendants(selectedId) : new Set();
+
+    const vn = visNodes();
+
+    ctx.save();
+    ctx.translate(transform.x, transform.y);
+    ctx.scale(transform.scale, transform.scale);
+
+    // Edges
+    for (const edge of EDGES) {
+      const p1 = pos[edge.from], p2 = pos[edge.to];
+      if (!p1 || !p2) continue;
+      const dimmed = matchIds && !matchIds.has(edge.from) && !matchIds.has(edge.to);
+      const isHighlighted = selectedId && (edge.from === selectedId || descendantIds.has(edge.from));
+
+      // Get dynamic heights for source and target nodes
+      const node1 = NODES.find(n => n.id === edge.from);
+      const node2 = NODES.find(n => n.id === edge.to);
+      const h1 = node1 ? getNodeHeight(node1) : NODE_H_SMALL;
+      const h2 = node2 ? getNodeHeight(node2) : NODE_H_SMALL;
+
+      const tp1 = transformPos(p1);
+      const tp2 = transformPos(p2);
+
+      let x1, y1, x2, y2, cx, cy;
+      if (layoutMode === 'horizontal') {
+        // Horizontal: edges go from bottom of parent to top of child
+        x1 = tp1.x; y1 = tp1.y + h1 / 2;
+        x2 = tp2.x; y2 = tp2.y - h2 / 2;
+        cy = (y1 + y2) / 2;
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.bezierCurveTo(x1, cy, x2, cy, x2, y2);
+      } else {
+        // Vertical: edges go from right of parent to left of child
+        x1 = tp1.x + NODE_W / 2; y1 = tp1.y;
+        x2 = tp2.x - NODE_W / 2; y2 = tp2.y;
+        cx = (x1 + x2) / 2;
+        ctx.beginPath();
+        ctx.moveTo(x1, y1);
+        ctx.bezierCurveTo(cx, y1, cx, y2, x2, y2);
+      }
+
+      if (isHighlighted) {
+        ctx.strokeStyle = UI_COLORS.nodeBorderSel;
+        ctx.lineWidth = 2.5;
+      } else if (dimmed) {
+        ctx.strokeStyle = UI_COLORS.edgeDimmed;
+        ctx.lineWidth = 1.5;
+      } else {
+        ctx.strokeStyle = UI_COLORS.edge;
+        ctx.lineWidth = 1.5;
+      }
+      ctx.stroke();
+    }
+
+    // Nodes
+    for (const node of vn) {
+      const p = pos[node.id];
+      if (!p) continue;
+      const tp = transformPos(p);
+      const isSel   = node.id === selectedId;
+      const isDesc  = descendantIds.has(node.id);
+      const isMatch = matchIds !== null &&  matchIds.has(node.id);
+      const isDim   = matchIds !== null && !matchIds.has(node.id);
+      drawNode(node, tp.x, tp.y, isSel, isDesc, isMatch, isDim, transform.scale);
+    }
+
+    ctx.restore();
+  }
+
+  function drawNode(node, cx, cy, isSel, isDesc, isMatch, isDim, zoomLevel) {
+    // Nodes have dynamic height (with or without description)
+    const nodeH = getNodeHeight(node);
+    const hw = NODE_W / 2, hh = nodeH / 2, r = 6;
+    const x  = cx - hw,   y  = cy - hh;
+    const color = KIND_COLOR[node.kind] || '#334155';
+
+    ctx.globalAlpha = isDim ? 0.15 : 1;
+
+    // Glow for selected
+    if (isSel) { ctx.shadowColor = UI_COLORS.nodeGlow; ctx.shadowBlur = 16; }
+
+    // Background
+    ctx.beginPath();
+    ctx.roundRect(x, y, NODE_W, nodeH, r);
+    ctx.fillStyle = isSel ? UI_COLORS.nodeBgSelected : UI_COLORS.nodeBg;
+    ctx.fill();
+    ctx.shadowBlur = 0;
+
+    // Left color strip (always on left, regardless of mode)
+    ctx.save();
+    ctx.beginPath();
+    ctx.roundRect(x, y, NODE_W, nodeH, r);
+    ctx.clip();
+    ctx.fillStyle = color;
+    ctx.fillRect(x, y, 4, nodeH);
+    ctx.restore();
+
+    // Border
+    ctx.beginPath();
+    ctx.roundRect(x, y, NODE_W, nodeH, r);
+    if (isSel || isDesc) {
+      // Selected node or descendant: orange border
+      ctx.strokeStyle = UI_COLORS.nodeBorderSel;
+      ctx.lineWidth = 1.5;
+    } else if (isMatch) {
+      ctx.strokeStyle = UI_COLORS.nodeBorderMatch;
+      ctx.lineWidth = 1.5;
+    } else {
+      ctx.strokeStyle = `${color}44`;
+      ctx.lineWidth = 1;
+    }
+    ctx.stroke();
+
+    // Type badge (class name) - with dynamic font size for sharp rendering at all zoom levels
+    const kindText = node.type;
+    const badgeFontSize = 9 * zoomLevel;
+    ctx.save();
+    ctx.scale(1 / zoomLevel, 1 / zoomLevel);
+    ctx.font = `${badgeFontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", sans-serif`;
+    const rawW = ctx.measureText(kindText).width;
+    const badgeW = Math.min(rawW + 8, 66 * zoomLevel);
+    const chevSpace = hasChildren(node.id) ? CHEV_ZONE : 8;
+    const badgeX = (x + NODE_W - chevSpace - badgeW / zoomLevel - 2) * zoomLevel;
+    const badgeY = (y + (nodeH - 14) / 2) * zoomLevel;
+    ctx.beginPath();
+    ctx.roundRect(badgeX, badgeY, badgeW, 14 * zoomLevel, 3 * zoomLevel);
+    ctx.fillStyle = `${color}22`;
+    ctx.fill();
+    ctx.fillStyle = color;
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    let kLabel = kindText;
+    while (kLabel.length > 3 && ctx.measureText(kLabel).width > badgeW - 6 * zoomLevel) kLabel = kLabel.slice(0, -1);
+    if (kLabel !== kindText) kLabel += '…';
+    ctx.fillText(kLabel, Math.round(badgeX + badgeW / 2), Math.round(badgeY + 7 * zoomLevel));
+    ctx.restore();
+
+    // Label (centered if no description, top if description) - with dynamic font size for sharp rendering at all zoom levels
+    const labelFontSize = 12 * zoomLevel;
+    ctx.save();
+    ctx.scale(1 / zoomLevel, 1 / zoomLevel);
+    ctx.font = `${isSel ? 500 : 400} ${labelFontSize}px "SF Mono", "Cascadia Code", "Consolas", "Menlo", "Monaco", monospace`;
+    ctx.fillStyle = isDim ? UI_COLORS.textMuted : UI_COLORS.textPrimary;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'middle';
+    const labelX    = (x + 12) * zoomLevel;
+    const labelMaxW = (badgeX / zoomLevel - (x + 12) - 6) * zoomLevel;
+    let label = node.label;
+    while (label.length > 3 && ctx.measureText(label).width > labelMaxW) label = label.slice(0, -1);
+    if (label !== node.label) label += '…';
+    const labelY = node.description ? (cy - 9) * zoomLevel : cy * zoomLevel;
+    ctx.fillText(label, Math.round(labelX), Math.round(labelY));
+
+    // Description (bottom line, only if present)
+    if (node.description) {
+      const descFontSize = 9 * zoomLevel;
+      ctx.font = `${descFontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Roboto", sans-serif`;
+      ctx.fillStyle = isDim ? 'rgba(125,133,144,0.3)' : 'rgba(125,133,144,0.7)';
+      let desc = node.description;
+      while (desc.length > 3 && ctx.measureText(desc).width > labelMaxW) desc = desc.slice(0, -1);
+      if (desc !== node.description) desc += '…';
+      ctx.fillText(desc, Math.round(labelX), Math.round((cy + 8) * zoomLevel));
+    }
+    ctx.restore();
+
+    // Chevron toggle (same position in both modes)
+    if (hasChildren(node.id)) {
+      const chevX = x + NODE_W - CHEV_ZONE / 2 - 1;
+      const isCollapsed = collapsed.has(node.id);
+      drawChevron(ctx, chevX, cy, !isCollapsed, color);
+    }
+
+    ctx.globalAlpha = 1;
+  }
+
+  function drawChevron(ctx, cx, cy, pointDown, color) {
+    const s = 4;
+    ctx.strokeStyle = color;
+    ctx.lineWidth   = 1.5;
+    ctx.lineCap     = 'round';
+    ctx.lineJoin    = 'round';
+    ctx.beginPath();
+    // Chevron always drawn the same way (down or right)
+    if (pointDown) {
+      ctx.moveTo(cx - s, cy - s * 0.5);
+      ctx.lineTo(cx,     cy + s * 0.5);
+      ctx.lineTo(cx + s, cy - s * 0.5);
+    } else {
+      ctx.moveTo(cx - s * 0.5, cy - s);
+      ctx.lineTo(cx + s * 0.5, cy);
+      ctx.lineTo(cx - s * 0.5, cy + s);
+    }
+    ctx.stroke();
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // Fit all
+  // ═══════════════════════════════════════════════════════════
+  function fitAll() {
+    const vn = visNodes();
+    if (vn.length === 0) return;
+
+    // Calculate bounds using dynamic node heights
+    let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+    for (const n of vn) {
+      const p = pos[n.id];
+      if (!p) continue;
+      const tp = transformPos(p);
+      const h = getNodeHeight(n);
+      minX = Math.min(minX, tp.x - NODE_W / 2);
+      maxX = Math.max(maxX, tp.x + NODE_W / 2);
+      minY = Math.min(minY, tp.y - h / 2);
+      maxY = Math.max(maxY, tp.y + h / 2);
+    }
+
+    if (!isFinite(minX)) return;
+
+    minX -= FIT_PADDING;
+    maxX += FIT_PADDING;
+    minY -= FIT_PADDING;
+    maxY += FIT_PADDING;
+
+    const scale = Math.min(logicalWidth / (maxX - minX), logicalHeight / (maxY - minY), FIT_MAX_SCALE);
+    transform.scale = scale;
+    transform.x     = (logicalWidth  - (minX + maxX) * scale) / 2;
+    transform.y     = (logicalHeight - (minY + maxY) * scale) / 2;
+    draw();
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // Tooltip helpers
+  // ═══════════════════════════════════════════════════════════
+  function showTooltip(text, clientX, clientY) {
+    tooltip.textContent = text;
+    tooltip.style.left = `${clientX + 10}px`;
+    tooltip.style.top = `${clientY + 10}px`;
+    tooltip.setAttribute('data-visible', 'true');
+  }
+
+  function hideTooltip() {
+    tooltip.setAttribute('data-visible', 'false');
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // Hit testing
+  // ═══════════════════════════════════════════════════════════
+  function hitTest(sx, sy) {
+    const wx = (sx - transform.x) / transform.scale;
+    const wy = (sy - transform.y) / transform.scale;
+    const vn = visNodes();
+
+    for (let i = vn.length - 1; i >= 0; i--) {
+      const n = vn[i];
+      const p = pos[n.id];
+      if (!p) continue;
+      const tp = transformPos(p);
+      const nodeH = getNodeHeight(n);
+
+      // Nodes have dynamic height based on description
+      if (Math.abs(wx - tp.x) <= NODE_W / 2 && Math.abs(wy - tp.y) <= nodeH / 2) {
+        const hw = NODE_W / 2, hh = nodeH / 2;
+        const x = tp.x - hw, y = tp.y - hh;
+
+        // Check border (left strip) - 4px wide
+        const isBorder = wx >= x && wx <= x + 4;
+
+        // Check toggle zone (chevron on right)
+        const isToggle = hasChildren(n.id) && wx >= tp.x + NODE_W / 2 - CHEV_ZONE;
+
+        // Check badge (type badge) - approximate zone (right side, excluding toggle)
+        // Badge is positioned at: x + NODE_W - chevSpace - badgeW - 2
+        // For hit testing, we use a simplified zone: last ~70px before toggle area
+        const chevSpace = hasChildren(n.id) ? CHEV_ZONE : 8;
+        const badgeZoneStart = x + NODE_W - chevSpace - 70;
+        const badgeZoneEnd = x + NODE_W - chevSpace - 2;
+        const badgeY = y + (nodeH - 14) / 2;
+        const isBadge = !isToggle && wx >= badgeZoneStart && wx <= badgeZoneEnd
+                        && wy >= badgeY && wy <= badgeY + 14;
+
+        return { node: n, isToggle, isBadge, isBorder };
+      }
+    }
+    return null;
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // Event posting to server
+  // ═══════════════════════════════════════════════════════════
+  function postEvent(eventName, eventData) {
+    const handler = EVENTS[eventName];
+    if (!handler || !handler.url) {
+      console.warn(`HierarchicalCanvasGraph: No handler for event "${eventName}"`);
+      return;
+    }
+    htmx.ajax('POST', handler.url, {
+      values: eventData,  // Send data as separate fields (default command engine behavior)
+      target: handler.target || 'body',
+      swap:   handler.swap   || 'none'
+    });
+  }
+
+  function saveViewState() {
+    postEvent('_internal_update_state', {
+      transform: transform,
+      layout_mode: layoutMode
+    });
+  }
+
+  // ═══════════════════════════════════════════════════════════
+  // Interaction
+  // ═══════════════════════════════════════════════════════════
+  let isPanning = false;
+  let panOrigin = { x: 0, y: 0 };
+  let tfAtStart = null;
+  let didMove   = false;
+
+  canvas.addEventListener('mousedown', e => {
+    isPanning = true; didMove = false;
+    panOrigin = { x: e.clientX, y: e.clientY };
+    tfAtStart = { ...transform };
+    canvas.style.cursor = 'grabbing';
+    hideTooltip();
+  });
+
+  window.addEventListener('mousemove', e => {
+    if (isPanning) {
+      const dx = e.clientX - panOrigin.x;
+      const dy = e.clientY - panOrigin.y;
+      if (Math.abs(dx) > 3 || Math.abs(dy) > 3) didMove = true;
+      transform.x = tfAtStart.x + dx;
+      transform.y = tfAtStart.y + dy;
+      draw();
+      hideTooltip();
+      return;
+    }
+
+    // Show tooltip if hovering over a node with truncated text
+    const rect = canvas.getBoundingClientRect();
+    const canvasX = e.clientX - rect.left;
+    const canvasY = e.clientY - rect.top;
+
+    // Check if mouse is over canvas
+    if (canvasX >= 0 && canvasX <= rect.width && canvasY >= 0 && canvasY <= rect.height) {
+      const hit = hitTest(canvasX, canvasY);
+      if (hit && !hit.isToggle) {
+        const node = hit.node;
+        // Check if label or type is truncated (contains ellipsis)
+        const labelTruncated = node.label.length > 15; // Approximate truncation threshold
+        const typeTruncated = node.type.length > 8;    // Approximate truncation threshold
+
+        if (labelTruncated || typeTruncated) {
+          const tooltipText = `${node.label}${node.type !== node.label ? ` (${node.type})` : ''}`;
+          showTooltip(tooltipText, e.clientX, e.clientY);
+        } else {
+          hideTooltip();
+        }
+      } else {
+        hideTooltip();
+      }
+    } else {
+      hideTooltip();
+    }
+  });
+
+  window.addEventListener('mouseup', e => {
+    if (!isPanning) return;
+    isPanning = false;
+    canvas.style.cursor = 'grab';
+
+    if (!didMove) {
+      const rect = canvas.getBoundingClientRect();
+      const hit  = hitTest(e.clientX - rect.left, e.clientY - rect.top);
+      if (hit) {
+        if (hit.isToggle) {
+          // Save screen position of clicked node before layout change
+          const oldPos = pos[hit.node.id];
+          const oldTp = transformPos(oldPos);
+          const screenX = oldTp.x * transform.scale + transform.x;
+          const screenY = oldTp.y * transform.scale + transform.y;
+
+          // Toggle collapse
+          if (collapsed.has(hit.node.id)) collapsed.delete(hit.node.id);
+          else collapsed.add(hit.node.id);
+          recomputeLayout();
+
+          // Adjust transform to keep clicked node at same screen position
+          const newPos = pos[hit.node.id];
+          if (newPos) {
+            const newTp = transformPos(newPos);
+            transform.x = screenX - newTp.x * transform.scale;
+            transform.y = screenY - newTp.y * transform.scale;
+          }
+
+          // Post toggle_node event
+          postEvent('toggle_node', {
+            node_id: hit.node.id,
+            collapsed: collapsed.has(hit.node.id)
+          });
+
+          // Clear selection if node is now hidden
+          if (selectedId && !visNodes().find(n => n.id === selectedId)) {
+            selectedId = null;
+          }
+        } else if (hit.isBadge) {
+          // Badge click: filter by type
+          postEvent('_internal_filter_by_type', { query_param: 'type', value: hit.node.type });
+        } else if (hit.isBorder) {
+          // Border click: filter by kind
+          postEvent('_internal_filter_by_kind', { query_param: 'kind', value: hit.node.kind });
+        } else {
+          selectedId = hit.node.id;
+
+          // Post select_node event
+          postEvent('select_node', {
+            node_id: hit.node.id,
+            label: hit.node.label,
+            kind: hit.node.kind,
+            type: hit.node.type
+          });
+        }
+      } else {
+        selectedId = null;
+      }
+      draw();
+    } else {
+      // Panning occurred - save view state
+      saveViewState();
+    }
+  });
+
+  let zoomTimeout = null;
+  canvas.addEventListener('wheel', e => {
+    e.preventDefault();
+    hideTooltip();
+    const rect  = canvas.getBoundingClientRect();
+    const mx    = e.clientX - rect.left;
+    const my    = e.clientY - rect.top;
+    const f     = e.deltaY < 0 ? ZOOM_FACTOR : 1 / ZOOM_FACTOR;
+    const ns    = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, transform.scale * f));
+    transform.x = mx - (mx - transform.x) * (ns / transform.scale);
+    transform.y = my - (my - transform.y) * (ns / transform.scale);
+    transform.scale = ns;
+    draw();
+
+    // Debounce save to avoid too many requests during continuous zoom
+    clearTimeout(zoomTimeout);
+    zoomTimeout = setTimeout(saveViewState, 500);
+  }, { passive: false });
+
+  canvas.addEventListener('mouseleave', () => {
+    hideTooltip();
+  });
+
+  // ═══════════════════════════════════════════════════════════
+  // Resize observer (stable zoom on resize)
+  // ═══════════════════════════════════════════════════════════
+  new ResizeObserver(resize).observe(container);
+
+  // ═══════════════════════════════════════════════════════════
+  // Public API (attached to container for potential external access)
+  // ═══════════════════════════════════════════════════════════
+  container._hcgAPI = {
+    fitAll,
+    setFilter: (query) => { filterQuery = query; draw(); },
+    expandAll: () => { collapsed.clear(); recomputeLayout(); draw(); },
+    collapseAll: () => {
+      for (const n of NODES) if (hasChildren(n.id)) collapsed.add(n.id);
+      if (selectedId && !visNodes().find(n => n.id === selectedId)) selectedId = null;
+      recomputeLayout(); draw();
+    },
+    redraw: draw
+  };
+
+  // ═══════════════════════════════════════════════════════════
+  // Init
+  // ═══════════════════════════════════════════════════════════
+  recomputeLayout();
+  resize();
+
+  // Only fit all if no stored transform (first time or reset)
+  const hasStoredTransform = options.transform &&
+    (options.transform.x !== 0 || options.transform.y !== 0 || options.transform.scale !== 1);
+
+  if (!hasStoredTransform) {
+    setTimeout(fitAll, 30);
+  }
+}

src/myfasthtml/assets/core/keyboard.js

@@ -0,0 +1,378 @@
+/**
+ * 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);
+      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;
+  }
+
+  /**
+   * 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);
+
+    // 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, respecting require_inside flag
+      if (hasMatch) {
+        const requireInside = currentNode.config["require_inside"] === true;
+        if (!requireInside || isInside) {
+          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) {
+        triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, event);
+      }
+
+      // 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;
+      const savedEvent = event; // Save event for timeout callback
+
+      KeyboardRegistry.pendingTimeout = setTimeout(() => {
+        // Timeout expired, trigger ALL pending matches
+        for (const match of KeyboardRegistry.pendingMatches) {
+          triggerHtmxAction(match.elementId, match.config, match.combinationStr, match.isInside, savedEvent);
+        }
+
+        // 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();
+    }
+  };
+})();

src/myfasthtml/assets/core/layout.css

@@ -1,468 +1,270 @@
-:root {
-    --color-border-primary: color-mix(in oklab, var(--color-primary) 40%, #0000);
-    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
-    --spacing: 0.25rem;
-    --text-sm: 0.875rem;
-    --text-sm--line-height: calc(1.25 / 0.875);
-    --text-xl: 1.25rem;
-    --text-xl--line-height: calc(1.75 / 1.25);
-    --font-weight-medium: 500;
-    --radius-md: 0.375rem;
-    --default-font-family: var(--font-sans);
-    --default-mono-font-family: var(--font-mono);
-}
-
-
-.mf-icon-16 {
-    width: 16px;
-    min-width: 16px;
-    height: 16px;
-    margin-top: auto;
-}
-
-.mf-icon-20 {
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
-    margin-top: auto;
-}
-
-.mf-icon-24 {
-    width: 24px;
-    min-width: 24px;
-    height: 24px;
-    margin-top: auto;
-
-}
-
-.mf-icon-28 {
-    width: 28px;
-    min-width: 28px;
-    height: 28px;
-    margin-top: auto;
-}
-
-.mf-icon-32 {
-    width: 32px;
-    min-width: 32px;
-    height: 32px;
-    margin-top: auto;
-}
-
-/*
- * MF Layout Component - CSS Grid Layout
- * Provides fixed header/footer, collapsible drawers, and scrollable main content
- * Compatible with DaisyUI 5
- */
-
-/* Main layout container using CSS Grid */
-.mf-layout {
-    display: grid;
-    grid-template-areas:
-    "header header header"
-    "left-drawer main right-drawer"
-    "footer footer footer";
-    grid-template-rows: 32px 1fr 32px;
-    grid-template-columns: auto 1fr auto;
-    height: 100vh;
-    width: 100vw;
-    overflow: hidden;
-}
-
-/* Header - fixed at top */
-.mf-layout-header {
-    grid-area: header;
-    display: flex;
-    align-items: center;
-    justify-content: space-between; /* put one item on each side */
-    gap: 1rem;
-    padding: 0 1rem;
-    background-color: var(--color-base-300);
-    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
-    z-index: 30;
-}
-
-/* Footer - fixed at bottom */
-.mf-layout-footer {
-    grid-area: footer;
-    display: flex;
-    align-items: center;
-    padding: 0 1rem;
-    background-color: var(--color-neutral);
-    color: var(--color-neutral-content);
-    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
-    z-index: 30;
-}
-
-/* Main content area - scrollable */
-.mf-layout-main {
-    grid-area: main;
-    overflow-y: auto;
-    overflow-x: auto;
-    padding: 0.5rem;
-    background-color: var(--color-base-100);
-}
-
-/* Drawer base styles */
-.mf-layout-drawer {
-    overflow-y: auto;
-    overflow-x: hidden;
-    background-color: var(--color-base-100);
-    transition: width 0.3s ease-in-out, margin 0.3s ease-in-out;
-    width: 250px;
-    padding: 1rem;
-}
-
-/* Left drawer */
-.mf-layout-left-drawer {
-    grid-area: left-drawer;
-    border-right: 1px solid var(--color-border-primary);
-}
-
-/* Right drawer */
-.mf-layout-right-drawer {
-    grid-area: right-drawer;
-    /*border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);*/
-    border-left: 1px solid var(--color-border-primary);
-}
-
-/* Collapsed drawer states */
-.mf-layout-drawer.collapsed {
-    width: 0;
-    padding: 0;
-    border: none;
-    overflow: hidden;
-}
-
-/* Toggle buttons positioning */
-.mf-layout-toggle-left {
-    margin-right: auto;
-}
-
-.mf-layout-toggle-right {
-    margin-left: auto;
-}
-
-/* Smooth scrollbar styling for webkit browsers */
-.mf-layout-main::-webkit-scrollbar,
-.mf-layout-drawer::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-.mf-layout-main::-webkit-scrollbar-track,
-.mf-layout-drawer::-webkit-scrollbar-track {
-    background: var(--color-base-200);
-}
-
-.mf-layout-main::-webkit-scrollbar-thumb,
-.mf-layout-drawer::-webkit-scrollbar-thumb {
-    background: color-mix(in oklab, var(--color-base-content) 20%, #0000);
-    border-radius: 4px;
-}
-
-.mf-layout-main::-webkit-scrollbar-thumb:hover,
-.mf-layout-drawer::-webkit-scrollbar-thumb:hover {
-    background: color-mix(in oklab, var(--color-base-content) 30%, #0000);
-}
-
-/* Responsive adjustments for smaller screens */
-@media (max-width: 768px) {
-    .mf-layout-drawer {
-        width: 200px;
-    }
-
-    .mf-layout-header,
-    .mf-layout-footer {
-        padding: 0 0.5rem;
-    }
-
-    .mf-layout-main {
-        padding: 0.5rem;
-    }
-}
-
-/* Handle layouts with no drawers */
-.mf-layout[data-left-drawer="false"] {
-    grid-template-areas:
-    "header header"
-    "main right-drawer"
-    "footer footer";
-    grid-template-columns: 1fr auto;
-}
-
-.mf-layout[data-right-drawer="false"] {
-    grid-template-areas:
-    "header header"
-    "left-drawer main"
-    "footer footer";
-    grid-template-columns: auto 1fr;
-}
-
-.mf-layout[data-left-drawer="false"][data-right-drawer="false"] {
-    grid-template-areas:
-    "header"
-    "main"
-    "footer";
-    grid-template-columns: 1fr;
-}
-
-
-/**
- * Layout Drawer Resizer Styles
- *
- * Styles for the resizable drawer borders with visual feedback
- */
-
-/* Ensure drawer has relative positioning and no overflow */
-.mf-layout-drawer {
-    position: relative;
-    overflow: hidden;
-}
-
-/* Content wrapper handles scrolling */
-.mf-layout-drawer-content {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 1rem;
-}
-
-/* Base resizer styles */
-.mf-layout-resizer {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    background-color: transparent;
-    transition: background-color 0.2s ease;
-    z-index: 100;
-}
-
-/* Resizer on the right side (for left drawer) */
-.mf-layout-resizer-right {
-    right: 0;
-    cursor: col-resize;
-}
-
-/* Resizer on the left side (for right drawer) */
-.mf-layout-resizer-left {
-    left: 0;
-    cursor: col-resize;
-}
-
-/* Hover state */
-.mf-layout-resizer:hover {
-    background-color: rgba(59, 130, 246, 0.3); /* Blue-500 with opacity */
-}
-
-/* Active state during resize */
-.mf-layout-drawer-resizing .mf-layout-resizer {
-    background-color: rgba(59, 130, 246, 0.5);
-}
-
-/* Disable transitions during resize for smooth dragging */
-.mf-layout-drawer-resizing {
-    transition: none !important;
-}
-
-/* Prevent text selection during resize */
-.mf-layout-resizing {
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-}
-
-/* Cursor override for entire body during resize */
-.mf-layout-resizing * {
-    cursor: col-resize !important;
-}
-
-/* Visual indicator for resizer on hover - subtle border */
-.mf-layout-resizer::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 2px;
-    height: 40px;
-    background-color: rgba(156, 163, 175, 0.4); /* Gray-400 with opacity */
-    border-radius: 2px;
-    opacity: 0;
-    transition: opacity 0.2s ease;
-}
-
-.mf-layout-resizer-right::before {
-    right: 1px;
-}
-
-.mf-layout-resizer-left::before {
-    left: 1px;
-}
-
-.mf-layout-resizer:hover::before,
-.mf-layout-drawer-resizing .mf-layout-resizer::before {
-    opacity: 1;
-}
-
-
-.mf-layout-group {
-    font-weight: bold;
-    /*font-size: var(--text-sm);*/
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    margin-bottom: 0.2rem;
-}
-
-/* *********************************************** */
-/* *********** Tabs Manager Component ************ */
-/* *********************************************** */
-
-/* Tabs Manager Container */
-.mf-tabs-manager {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-    background-color: var(--color-base-200);
-    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
-    border-radius: .5rem;
-}
-
-/* Tabs Header using DaisyUI tabs component */
-.mf-tabs-header {
-    display: flex;
-    gap: 0;
-    flex-shrink: 1;
-    min-height: 25px;
-
-    overflow-x: hidden;
-    overflow-y: hidden;
-    white-space: nowrap;
-}
-
-.mf-tabs-header-wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    width: 100%;
-    /*overflow: hidden;  important */
-}
-
-/* Individual Tab Button using DaisyUI tab classes */
-.mf-tab-button {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0 0.5rem 0 1rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.mf-tab-button:hover {
-    color: var(--color-base-content); /* Change text color on hover */
-}
-
-.mf-tab-button.mf-tab-active {
-    --depth: 1;
-    background-color: var(--color-base-100);
-    color: var(--color-base-content);
-    border-radius: .25rem;
-    border-bottom: 4px solid var(--color-primary);
-    box-shadow: 0 1px oklch(100% 0 0/calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000);
-}
-
-/* Tab Label */
-.mf-tab-label {
-    user-select: none;
-    white-space: nowrap;
-    max-width: 150px;
-}
-
-/* Tab Close Button */
-.mf-tab-close-btn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1rem;
-    height: 1rem;
-    border-radius: 0.25rem;
-    font-size: 1.25rem;
-    line-height: 1;
-    @apply text-base-content/50;
-    transition: all 0.2s ease;
-}
-
-.mf-tab-close-btn:hover {
-    @apply bg-base-300 text-error;
-}
-
-/* Tab Content Area */
-.mf-tab-content {
-    flex: 1;
-    overflow: auto;
-    height: 100%;
-}
-
-.mf-tab-content-wrapper {
-    flex: 1;
-    overflow: auto;
-    background-color: var(--color-base-100);
-    padding: 1rem;
-    border-top: 1px solid var(--color-border-primary);
-}
-
-/* Empty Content State */
-.mf-empty-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    @apply text-base-content/50;
-    font-style: italic;
-}
-
-.mf-vis {
-    width: 100%;
-    height: 100%;
-}
-
-.mf-search-results {
-    margin-top: 0.5rem;
-    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;
-}
+/*
+ * MF Layout Component - CSS Grid Layout
+ * Provides fixed header/footer, collapsible drawers, and scrollable main content
+ * Compatible with DaisyUI 5
+ */
+
+/* Main layout container using CSS Grid */
+.mf-layout {
+    display: grid;
+    grid-template-areas:
+    "header header header"
+    "left-drawer main right-drawer"
+    "footer footer footer";
+    grid-template-rows: 32px 1fr 32px;
+    grid-template-columns: auto 1fr auto;
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+/* Header - fixed at top */
+.mf-layout-header {
+    grid-area: header;
+    display: flex;
+    align-items: center;
+    justify-content: space-between; /* put one item on each side */
+    gap: 1rem;
+    padding: 0 1rem;
+    background-color: var(--color-base-300);
+    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
+    z-index: 30;
+}
+
+/* Footer - fixed at bottom */
+.mf-layout-footer {
+    grid-area: footer;
+    display: flex;
+    align-items: center;
+    padding: 0 1rem;
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    border-top: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);
+    z-index: 30;
+}
+
+/* Main content area - scrollable */
+.mf-layout-main {
+    grid-area: main;
+    overflow-y: auto;
+    overflow-x: auto;
+    padding: 0.5rem;
+    background-color: var(--color-base-100);
+}
+
+/* Drawer base styles */
+.mf-layout-drawer {
+    overflow-y: auto;
+    overflow-x: hidden;
+    background-color: var(--color-base-100);
+    transition: width 0.3s ease-in-out, margin 0.3s ease-in-out;
+    width: 250px;
+    padding: 1rem;
+}
+
+/* Left drawer */
+.mf-layout-left-drawer {
+    grid-area: left-drawer;
+    border-right: 1px solid var(--color-border-primary);
+}
+
+/* Right drawer */
+.mf-layout-right-drawer {
+    grid-area: right-drawer;
+    /*border-left: 1px solid color-mix(in oklab, var(--color-base-content) 10%, #0000);*/
+    border-left: 1px solid var(--color-border-primary);
+}
+
+/* Collapsed drawer states */
+.mf-layout-drawer.collapsed {
+    width: 0;
+    padding: 0;
+    border: none;
+    overflow: hidden;
+}
+
+/* Toggle buttons positioning */
+.mf-layout-toggle-left {
+    margin-right: auto;
+}
+
+.mf-layout-toggle-right {
+    margin-left: auto;
+}
+
+/* Smooth scrollbar styling for webkit browsers */
+.mf-layout-main::-webkit-scrollbar,
+.mf-layout-drawer::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.mf-layout-main::-webkit-scrollbar-track,
+.mf-layout-drawer::-webkit-scrollbar-track {
+    background: var(--color-base-200);
+}
+
+.mf-layout-main::-webkit-scrollbar-thumb,
+.mf-layout-drawer::-webkit-scrollbar-thumb {
+    background: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    border-radius: 4px;
+}
+
+.mf-layout-main::-webkit-scrollbar-thumb:hover,
+.mf-layout-drawer::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklab, var(--color-base-content) 30%, #0000);
+}
+
+/* Responsive adjustments for smaller screens */
+@media (max-width: 768px) {
+    .mf-layout-drawer {
+        width: 200px;
+    }
+
+    .mf-layout-header,
+    .mf-layout-footer {
+        padding: 0 0.5rem;
+    }
+
+    .mf-layout-main {
+        padding: 0.5rem;
+    }
+}
+
+/* Handle layouts with no drawers */
+.mf-layout[data-left-drawer="false"] {
+    grid-template-areas:
+    "header header"
+    "main right-drawer"
+    "footer footer";
+    grid-template-columns: 1fr auto;
+}
+
+.mf-layout[data-right-drawer="false"] {
+    grid-template-areas:
+    "header header"
+    "left-drawer main"
+    "footer footer";
+    grid-template-columns: auto 1fr;
+}
+
+.mf-layout[data-left-drawer="false"][data-right-drawer="false"] {
+    grid-template-areas:
+    "header"
+    "main"
+    "footer";
+    grid-template-columns: 1fr;
+}
+
+
+/**
+ * Layout Drawer Resizer Styles
+ *
+ * Styles for the resizable drawer borders with visual feedback
+ */
+
+/* Ensure drawer has relative positioning and no overflow */
+.mf-layout-drawer {
+    position: relative;
+    overflow: hidden;
+}
+
+/* Content wrapper handles scrolling */
+.mf-layout-drawer-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding: 1rem;
+}
+
+/* Base resizer styles */
+.mf-layout-resizer {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 4px;
+    background-color: transparent;
+    transition: background-color 0.2s ease;
+    z-index: 100;
+}
+
+/* Resizer on the right side (for left drawer) */
+.mf-layout-resizer-right {
+    right: 0;
+    cursor: col-resize;
+}
+
+/* Resizer on the left side (for right drawer) */
+.mf-layout-resizer-left {
+    left: 0;
+    cursor: col-resize;
+}
+
+/* Hover state */
+.mf-layout-resizer:hover {
+    background-color: rgba(59, 130, 246, 0.3); /* Blue-500 with opacity */
+}
+
+/* Active state during resize */
+.mf-layout-drawer-resizing .mf-layout-resizer {
+    background-color: rgba(59, 130, 246, 0.5);
+}
+
+/* Disable transitions during resize for smooth dragging */
+.mf-layout-drawer-resizing {
+    transition: none !important;
+}
+
+/* Prevent text selection during resize */
+.mf-layout-resizing {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+/* Cursor override for entire body during resize */
+.mf-layout-resizing * {
+    cursor: col-resize !important;
+}
+
+/* Visual indicator for resizer on hover - subtle border */
+.mf-layout-resizer::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 2px;
+    height: 40px;
+    background-color: rgba(156, 163, 175, 0.4); /* Gray-400 with opacity */
+    border-radius: 2px;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.mf-layout-resizer-right::before {
+    right: 1px;
+}
+
+.mf-layout-resizer-left::before {
+    left: 1px;
+}
+
+.mf-layout-resizer:hover::before,
+.mf-layout-drawer-resizing .mf-layout-resizer::before {
+    opacity: 1;
+}
+
+
+.mf-layout-group {
+    font-weight: bold;
+    /*font-size: var(--text-sm);*/
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin-bottom: 0.2rem;
+}

src/myfasthtml/assets/core/layout.js

@@ -0,0 +1,4 @@
+function initLayout(elementId) {
+  initResizer(elementId);
+  bindTooltipsWithDelegation(elementId);
+}

src/myfasthtml/assets/core/myfasthtml.css

@@ -0,0 +1,164 @@
+:root {
+    --color-border-primary: color-mix(in oklab, var(--color-primary) 40%, #0000);
+    --color-border: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    --color-resize: color-mix(in oklab, var(--color-base-content) 50%, #0000);
+    --color-selection: color-mix(in oklab, var(--color-primary) 20%, #0000);
+
+    --datagrid-resize-zindex: 1;
+    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    --spacing: 0.25rem;
+    --text-xs: 0.6875rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --font-weight-medium: 500;
+    --radius-md: 0.375rem;
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --properties-font-size: var(--text-xs);
+    --mf-tooltip-zindex: 10;
+}
+
+.mf-icon-16 {
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+}
+
+.mf-icon-20 {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+}
+
+.mf-icon-24 {
+    width: 24px;
+    min-width: 24px;
+    height: 24px;
+
+}
+
+.mf-icon-28 {
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
+}
+
+.mf-icon-32 {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+}
+
+.mf-button {
+    border-radius: 0.375rem;
+    transition: background-color 0.15s ease;
+}
+
+.mf-button:hover {
+    background-color: var(--color-base-300);
+}
+
+.mf-tooltip-container {
+    background: var(--color-base-200);
+    padding: 5px 10px;
+    border-radius: 4px;
+    pointer-events: none; /* Prevent interfering with mouse events */
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0; /* Default to invisible */
+    visibility: hidden; /* Prevent interaction when invisible */
+    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility removal */
+    position: fixed; /* Keep it above other content and adjust position */
+    z-index: var(--mf-tooltip-zindex); /* Ensure it's on top */
+}
+
+.mf-tooltip-container[data-visible="true"] {
+    opacity: 1;
+    visibility: visible; /* Show tooltip */
+    transition: opacity 0.3s ease; /* No delay when becoming visible */
+}
+
+/* *********************************************** */
+/* ********** 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;
+}

src/myfasthtml/assets/core/myfasthtml.js

@@ -0,0 +1,383 @@
+/**
+ * Generic Resizer
+ *
+ * Handles resizing of elements with drag functionality.
+ * Communicates with server via HTMX to persist width changes.
+ * Works for both Layout drawers and Panel sides.
+ */
+
+/**
+ * Initialize resizer functionality for a specific container
+ *
+ * @param {string} containerId - The ID of the container instance to initialize
+ * @param {Object} options - Configuration options
+ * @param {number} options.minWidth - Minimum width in pixels (default: 150)
+ * @param {number} options.maxWidth - Maximum width in pixels (default: 600)
+ */
+function initResizer(containerId, options = {}) {
+
+  const MIN_WIDTH = options.minWidth || 150;
+  const MAX_WIDTH = options.maxWidth || 600;
+
+  let isResizing = false;
+  let currentResizer = null;
+  let currentItem = null;
+  let startX = 0;
+  let startWidth = 0;
+  let side = null;
+
+  const containerElement = document.getElementById(containerId);
+
+  if (!containerElement) {
+    console.error(`Container element with ID "${containerId}" not found`);
+    return;
+  }
+
+  /**
+   * Initialize resizer functionality for this container instance
+   */
+  function initResizers() {
+    const resizers = containerElement.querySelectorAll('.mf-resizer');
+
+    resizers.forEach(resizer => {
+      // Remove existing listener if any to avoid duplicates
+      resizer.removeEventListener('mousedown', handleMouseDown);
+      resizer.addEventListener('mousedown', handleMouseDown);
+    });
+  }
+
+  /**
+   * Handle mouse down event on resizer
+   */
+  function handleMouseDown(e) {
+    e.preventDefault();
+
+    currentResizer = e.target;
+    side = currentResizer.dataset.side;
+    currentItem = currentResizer.parentElement;
+
+    if (!currentItem) {
+      console.error('Could not find item element');
+      return;
+    }
+
+    isResizing = true;
+    startX = e.clientX;
+    startWidth = currentItem.offsetWidth;
+
+    // Add event listeners for mouse move and up
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+
+    // Add resizing class for visual feedback
+    document.body.classList.add('mf-resizing');
+    currentItem.classList.add('mf-item-resizing');
+    // Disable transition during manual resize
+    currentItem.classList.add('no-transition');
+  }
+
+  /**
+   * Handle mouse move event during resize
+   */
+  function handleMouseMove(e) {
+    if (!isResizing) return;
+
+    e.preventDefault();
+
+    let newWidth;
+
+    if (side === 'left') {
+      // Left drawer: increase width when moving right
+      newWidth = startWidth + (e.clientX - startX);
+    } else if (side === 'right') {
+      // Right drawer: increase width when moving left
+      newWidth = startWidth - (e.clientX - startX);
+    }
+
+    // Constrain width between min and max
+    newWidth = Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, newWidth));
+
+    // Update item width visually
+    currentItem.style.width = `${newWidth}px`;
+  }
+
+  /**
+   * Handle mouse up event - end resize and save to server
+   */
+  function handleMouseUp(e) {
+    if (!isResizing) return;
+
+    isResizing = false;
+
+    // Remove event listeners
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+
+    // Remove resizing classes
+    document.body.classList.remove('mf-resizing');
+    currentItem.classList.remove('mf-item-resizing');
+    // Re-enable transition after manual resize
+    currentItem.classList.remove('no-transition');
+
+    // Get final width
+    const finalWidth = currentItem.offsetWidth;
+    const commandId = currentResizer.dataset.commandId;
+
+    if (!commandId) {
+      console.error('No command ID found on resizer');
+      return;
+    }
+
+    // Send width update to server
+    saveWidth(commandId, finalWidth);
+
+    // Reset state
+    currentResizer = null;
+    currentItem = null;
+    side = null;
+  }
+
+  /**
+   * Save width to server via HTMX
+   */
+  function saveWidth(commandId, width) {
+    htmx.ajax('POST', '/myfasthtml/commands', {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded"
+      }, swap: "outerHTML", target: `#${currentItem.id}`, values: {
+        c_id: commandId, width: width
+      }
+    });
+  }
+
+  // Initialize resizers
+  initResizers();
+
+  // Re-initialize after HTMX swaps within this container
+  containerElement.addEventListener('htmx:afterSwap', function (event) {
+    initResizers();
+  });
+}
+
+function bindTooltipsWithDelegation(elementId) {
+  // To display the tooltip, the attribute 'data-tooltip' is mandatory => it contains the text to tooltip
+  // Then
+  //      the 'truncate' to show only when the text is truncated
+  //      the class 'mmt-tooltip' for force the display
+
+  console.info("bindTooltips on element " + elementId);
+
+  const element = document.getElementById(elementId);
+  const tooltipContainer = document.getElementById(`tt_${elementId}`);
+
+
+  if (!element) {
+    console.error(`Invalid element '${elementId}' container`);
+    return;
+  }
+
+  if (!tooltipContainer) {
+    console.error(`Invalid tooltip 'tt_${elementId}' container.`);
+    return;
+  }
+
+  // OPTIMIZATION C: Throttling flag to limit mouseenter processing
+  let tooltipRafScheduled = false;
+
+  // Add a single mouseenter and mouseleave listener to the parent element
+  element.addEventListener("mouseenter", (event) => {
+    const target = event.target;
+
+    // Early exit - check mf-no-tooltip on the registered element OR any ancestor of the target
+    if (element.hasAttribute("mf-no-tooltip") || target.closest("[mf-no-tooltip]")) {
+      return;
+    }
+
+    // OPTIMIZATION C: Throttle mouseenter events (max 1 per frame)
+    if (tooltipRafScheduled) {
+      return;
+    }
+
+    const cell = target.closest("[data-tooltip]");
+    if (!cell) {
+      return;
+    }
+
+    // OPTIMIZATION C: Move ALL DOM reads into RAF to avoid forced synchronous layouts
+    tooltipRafScheduled = true;
+    requestAnimationFrame(() => {
+      tooltipRafScheduled = false;
+
+      // Check again in case tooltip was disabled during RAF delay
+      if (element.hasAttribute("mf-no-tooltip") || target.closest("[mf-no-tooltip]")) {
+        return;
+      }
+
+      // All DOM reads happen here (batched in RAF)
+      const content = cell.querySelector(".truncate") || cell;
+      const isOverflowing = content.scrollWidth > content.clientWidth;
+      const forceShow = cell.classList.contains("mf-tooltip");
+
+      if (isOverflowing || forceShow) {
+        const tooltipText = cell.getAttribute("data-tooltip");
+        if (tooltipText) {
+          const rect = cell.getBoundingClientRect();
+          const tooltipRect = tooltipContainer.getBoundingClientRect();
+
+          let top = rect.top - 30; // Above the cell
+          let left = rect.left;
+
+          // Adjust tooltip position to prevent it from going off-screen
+          if (top < 0) top = rect.bottom + 5; // Move below if no space above
+          if (left + tooltipRect.width > window.innerWidth) {
+            left = window.innerWidth - tooltipRect.width - 5; // Prevent overflow right
+          }
+
+          // Apply styles (already in RAF)
+          tooltipContainer.textContent = tooltipText;
+          tooltipContainer.setAttribute("data-visible", "true");
+          tooltipContainer.style.top = `${top}px`;
+          tooltipContainer.style.left = `${left}px`;
+        }
+      }
+    });
+  }, true); // Capture phase required: mouseenter doesn't bubble
+
+  element.addEventListener("mouseleave", (event) => {
+    const cell = event.target.closest("[data-tooltip]");
+    if (cell) {
+      tooltipContainer.setAttribute("data-visible", "false");
+    }
+  }, true); // Capture phase required: mouseleave doesn't bubble
+}
+
+function disableTooltip() {
+  const elementId = tooltipElementId
+  // console.debug("disableTooltip on element " + elementId);
+
+  const element = document.getElementById(elementId);
+  if (!element) {
+    console.error(`Invalid element '${elementId}' container`);
+    return;
+  }
+
+  element.setAttribute("mmt-no-tooltip", "");
+}
+
+function enableTooltip() {
+  const elementId = tooltipElementId
+  // console.debug("enableTooltip on element " + elementId);
+
+  const element = document.getElementById(elementId);
+  if (!element) {
+    console.error(`Invalid element '${elementId}' container`);
+    return;
+  }
+
+  element.removeAttribute("mmt-no-tooltip");
+}
+
+/**
+ * Shared utility function for triggering HTMX actions from keyboard/mouse bindings.
+ * Handles dynamic hx-vals with "js:functionName()" syntax.
+ *
+ * @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/click is inside the element
+ * @param {Event} event - The event that triggered this action (KeyboardEvent or MouseEvent)
+ */
+function triggerHtmxAction(elementId, config, combinationStr, isInside, event) {
+  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 = {};
+
+  // 1. Merge static hx-vals from command (if present)
+  if (config['hx-vals'] && typeof config['hx-vals'] === 'object') {
+    Object.assign(values, config['hx-vals']);
+  }
+
+  // 2. Merge hx-vals-extra (user overrides)
+  if (config['hx-vals-extra']) {
+    const extra = config['hx-vals-extra'];
+
+    // Merge static dict values
+    if (extra.dict && typeof extra.dict === 'object') {
+      Object.assign(values, extra.dict);
+    }
+
+    // Call dynamic JS function and merge result
+    if (extra.js) {
+      try {
+        const func = window[extra.js];
+        if (typeof func === 'function') {
+          const dynamicValues = func(event, element, combinationStr);
+          if (dynamicValues && typeof dynamicValues === 'object') {
+            Object.assign(values, dynamicValues);
+          }
+        } else {
+          console.error(`Function "${extra.js}" not found on window`);
+        }
+      } catch (e) {
+        console.error('Error calling dynamic hx-vals function:', e);
+      }
+    }
+  }
+
+  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
+  //console.debug(`Triggering HTMX action for element ${elementId}: ${method} ${url}`, htmxOptions);
+  htmx.ajax(method, url, htmxOptions);
+}
+

src/myfasthtml/assets/core/panel.css

@@ -0,0 +1,117 @@
+/* *********************************************** */
+/* *************** Panel Component *************** */
+/* *********************************************** */
+
+.mf-panel {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Common properties for side panels */
+.mf-panel-left,
+.mf-panel-right {
+    position: relative;
+    flex-shrink: 0;
+    width: 250px;
+    min-width: 150px;
+    max-width: 500px;
+    height: 100%;
+    overflow: auto;
+    transition: width 0.3s ease, min-width 0.3s ease, max-width 0.3s ease;
+    padding-top: 25px;
+}
+
+/* Left panel specific */
+.mf-panel-left {
+    border-right: 1px solid var(--color-border-primary);
+}
+
+/* Right panel specific */
+.mf-panel-right {
+    border-left: 1px solid var(--color-border-primary);
+    padding-left: 0.5rem;
+}
+
+.mf-panel-main {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+    min-width: 0; /* Important to allow the shrinking of flexbox */
+}
+
+/* Hidden state - common for both panels */
+.mf-panel-left.mf-hidden,
+.mf-panel-right.mf-hidden {
+    width: 0;
+    min-width: 0;
+    max-width: 0;
+    overflow: hidden;
+    border: none;
+    padding: 0;
+}
+
+/* No transition during manual resize - common for both panels */
+.mf-panel-left.no-transition,
+.mf-panel-right.no-transition {
+    transition: none;
+}
+
+/* Common properties for panel toggle icons */
+.mf-panel-hide-icon,
+.mf-panel-show-icon {
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+    z-index: 10;
+    border-radius: 0.25rem;
+}
+
+.mf-panel-hide-icon:hover,
+.mf-panel-show-icon:hover {
+    background-color: var(--color-bg-hover, rgba(0, 0, 0, 0.05));
+}
+
+/* Show icon positioning */
+.mf-panel-show-icon-left {
+    left: 0.5rem;
+}
+
+.mf-panel-show-icon-right {
+    right: 0.5rem;
+}
+
+/* Panel with title - grid layout for header + scrollable content */
+.mf-panel-body {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+    overflow: hidden;
+}
+
+.mf-panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.25rem 0.5rem;
+    background-color: var(--color-base-200);
+    border-bottom: 1px solid var(--color-border);
+}
+
+/* Override absolute positioning for hide icon when inside header */
+.mf-panel-header .mf-panel-hide-icon {
+    position: static;
+}
+
+.mf-panel-content {
+    overflow-y: auto;
+}
+
+/* Remove padding-top when using title layout */
+.mf-panel-left.mf-panel-with-title,
+.mf-panel-right.mf-panel-with-title {
+    padding-top: 0;
+}

src/myfasthtml/assets/core/properties.css

@@ -0,0 +1,88 @@
+/* *********************************************** */
+/* ************* Properties Component ************ */
+/* *********************************************** */
+
+/*!* Properties container *!*/
+.mf-properties {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+/*!* Group card - using DaisyUI card styling *!*/
+.mf-properties-group-card {
+    background-color: var(--color-base-100);
+    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
+    border-radius: var(--radius-md);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    overflow: auto;
+}
+
+.mf-properties-group-container {
+    display: inline-block; /* important */
+    min-width: max-content; /* important */
+    width: 100%;
+}
+
+
+/*!* Group header - gradient using DaisyUI primary color *!*/
+.mf-properties-group-header {
+    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in oklab, var(--color-primary) 80%, black) 100%);
+    color: var(--color-primary-content);
+    padding: calc(var(--properties-font-size) * 0.5) calc(var(--properties-font-size) * 0.75);
+    font-weight: 700;
+    font-size: var(--properties-font-size);
+}
+
+/*!* Group content area *!*/
+.mf-properties-group-content {
+    display: flex;
+    flex-direction: column;
+    min-width: max-content;
+}
+
+/*!* Property row *!*/
+.mf-properties-row {
+    display: grid;
+    grid-template-columns: 6rem 1fr;
+
+    align-items: center;
+    padding: calc(var(--properties-font-size) * 0.4) calc(var(--properties-font-size) * 0.75);
+
+    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 5%, transparent);
+    transition: background-color 0.15s ease;
+
+    gap: calc(var(--properties-font-size) * 0.75);
+}
+
+.mf-properties-row:last-child {
+    border-bottom: none;
+}
+
+.mf-properties-row:hover {
+    background-color: color-mix(in oklab, var(--color-base-content) 3%, transparent);
+}
+
+/*!* Property key - normal font *!*/
+.mf-properties-key {
+    align-items: start;
+    font-weight: 600;
+    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    flex: 0 0 40%;
+    font-size: var(--properties-font-size);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/*!* Property value - monospace font *!*/
+.mf-properties-value {
+    font-family: var(--default-mono-font-family);
+    color: var(--color-base-content);
+    flex: 1;
+    text-align: left;
+    font-size: var(--properties-font-size);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

src/myfasthtml/assets/core/search.css

@@ -0,0 +1,5 @@
+.mf-search-results {
+    margin-top: 0.5rem;
+    /*max-height: 400px;*/
+    overflow: auto;
+}

src/myfasthtml/assets/core/tabs.css

@@ -0,0 +1,107 @@
+/* *********************************************** */
+/* *********** Tabs Manager Component ************ */
+/* *********************************************** */
+
+/* Tabs Manager Container */
+.mf-tabs-manager {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background-color: var(--color-base-200);
+    color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
+    border-radius: .5rem;
+}
+
+/* Tabs Header using DaisyUI tabs component */
+.mf-tabs-header {
+    display: flex;
+    gap: 0;
+    flex-shrink: 1;
+    min-height: 25px;
+
+    overflow-x: hidden;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+
+.mf-tabs-header-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+    /*overflow: hidden;  important */
+}
+
+/* Individual Tab Button using DaisyUI tab classes */
+.mf-tab-button {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0 0.5rem 0 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.mf-tab-button:hover {
+    color: var(--color-base-content); /* Change text color on hover */
+}
+
+.mf-tab-button.mf-tab-active {
+    --depth: 1;
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    border-radius: .25rem;
+    border-bottom: 4px solid var(--color-primary);
+    box-shadow: 0 1px oklch(100% 0 0/calc(var(--depth) * .1)) inset, 0 1px 1px -1px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 50%), #0000), 0 1px 6px -4px color-mix(in oklab, var(--color-neutral) calc(var(--depth) * 100%), #0000);
+}
+
+/* Tab Label */
+.mf-tab-label {
+    user-select: none;
+    white-space: nowrap;
+    max-width: 150px;
+}
+
+/* Tab Close Button */
+.mf-tab-close-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 0.25rem;
+    font-size: 1.25rem;
+    line-height: 1;
+    @apply text-base-content/50;
+    transition: all 0.2s ease;
+}
+
+.mf-tab-close-btn:hover {
+    @apply bg-base-300 text-error;
+}
+
+/* Tab Content Area */
+.mf-tab-content {
+    flex: 1;
+    overflow: auto;
+    height: 100%;
+}
+
+.mf-tab-content-wrapper {
+    flex: 1;
+    overflow: auto;
+    background-color: var(--color-base-100);
+    padding: 0.5rem;
+    border-top: 1px solid var(--color-border-primary);
+}
+
+/* Empty Content State */
+.mf-empty-content {
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    @apply text-base-content/50;
+    font-style: italic;
+}

src/myfasthtml/assets/core/tabs.js

@@ -0,0 +1,59 @@
+/**
+ * Updates the tabs display by showing the active tab content and scrolling to make it visible.
+ * This function is called when switching between tabs to update both the content visibility
+ * and the tab button states.
+ *
+ * @param {string} controllerId - The ID of the tabs controller element (format: "{managerId}-controller")
+ */
+function updateTabs(controllerId) {
+  const controller = document.getElementById(controllerId);
+  if (!controller) {
+    console.warn(`Controller ${controllerId} not found`);
+    return;
+  }
+
+  const activeTabId = controller.dataset.activeTab;
+  if (!activeTabId) {
+    console.warn('No active tab ID found');
+    return;
+  }
+
+  // Extract manager ID from controller ID (remove '-controller' suffix)
+  const managerId = controllerId.replace('-controller', '');
+
+  // Hide all tab contents for this manager
+  const contentWrapper = document.getElementById(`${managerId}-content-wrapper`);
+  if (contentWrapper) {
+    contentWrapper.querySelectorAll('.mf-tab-content').forEach(content => {
+      content.classList.add('hidden');
+    });
+
+    // Show the active tab content
+    const activeContent = document.getElementById(`${managerId}-${activeTabId}-content`);
+    if (activeContent) {
+      activeContent.classList.remove('hidden');
+    }
+  }
+
+  // Update active tab button styling
+  const header = document.getElementById(`${managerId}-header`);
+  if (header) {
+    // Remove active class from all tabs
+    header.querySelectorAll('.mf-tab-button').forEach(btn => {
+      btn.classList.remove('mf-tab-active');
+    });
+
+    // Add active class to current tab
+    const activeButton = header.querySelector(`[data-tab-id="${activeTabId}"]`);
+    if (activeButton) {
+      activeButton.classList.add('mf-tab-active');
+
+      // Scroll to make active tab visible if needed
+      activeButton.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }
+}

src/myfasthtml/assets/core/treeview.css

@@ -0,0 +1,78 @@
+/* *********************************************** */
+/* ************** 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;
+}

src/myfasthtml/assets/datagrid/datagrid.css

@@ -0,0 +1,319 @@
+/* ********************************************* */
+/* ************* Datagrid Component ************ */
+/* ********************************************* */
+
+/* Header and Footer */
+.dt2-header,
+.dt2-footer {
+    background-color: var(--color-base-200);
+    border-radius: 10px 10px 0 0;
+    min-width: max-content; /* Content width propagates to scrollable parent */
+    height: 24px;
+    display: flex;
+    width: 100%;
+    font-size: var(--text-xl);
+    margin: 4px 0;
+}
+
+/* Body */
+.dt2-body {
+    overflow: hidden;
+    min-width: max-content; /* Content width propagates to scrollable parent */
+}
+
+/* Row */
+.dt2-row {
+    display: flex;
+    width: 100%;
+    height: 20px;
+}
+
+/* Cell */
+.dt2-cell {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 2px 8px;
+    position: relative;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 100px;
+    flex-grow: 0;
+    flex-shrink: 1;
+    box-sizing: border-box;
+    border-bottom: 1px solid var(--color-border);
+    user-select: none;
+}
+
+/* Cell content types */
+.dt2-cell-content-text {
+    text-align: inherit;
+    width: 100%;
+    padding-right: 10px;
+    padding-left: 10px;
+}
+
+.dt2-cell-content-checkbox {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+.dt2-cell-content-number {
+    text-align: right;
+    width: 100%;
+    padding-right: 10px;
+}
+
+/* Footer cell */
+.dt2-footer-cell {
+    cursor: pointer;
+}
+
+/* Resize handle */
+.dt2-resize-handle {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 8px;
+    height: 100%;
+    cursor: col-resize;
+}
+
+.dt2-resize-handle::after {
+    content: '';
+    position: absolute;
+    z-index: var(--datagrid-resize-zindex);
+    display: block;
+    width: 3px;
+    height: 60%;
+    top: calc(50% - 60% * 0.5);
+    background-color: var(--color-resize);
+}
+
+/* Hidden column */
+.dt2-col-hidden {
+    width: 5px;
+    border-bottom: 1px solid var(--color-border);
+}
+
+/* Highlight */
+.dt2-highlight-1 {
+    color: var(--color-accent);
+}
+
+
+.dt2-selected-focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -3px; /* Ensure the outline is snug to the cell */
+}
+
+.dt2-cell:hover,
+.dt2-selected-cell {
+    background-color: var(--color-selection);
+}
+
+.dt2-selected-row {
+    background-color: var(--color-selection);
+}
+
+.dt2-selected-column {
+    background-color: var(--color-selection);
+}
+
+.dt2-hover-row {
+    background-color: var(--color-selection);
+}
+
+.dt2-hover-column {
+    background-color: var(--color-selection);
+}
+
+.dt2-drag-preview {
+    background-color: var(--color-selection);
+}
+
+/* Selection border - outlines the entire selection rectangle */
+.dt2-selection-border-top {
+    border-top: 2px solid var(--color-primary);
+}
+
+.dt2-selection-border-bottom {
+    border-bottom: 2px solid var(--color-primary);
+}
+
+.dt2-selection-border-left {
+    border-left: 2px solid var(--color-primary);
+}
+
+.dt2-selection-border-right {
+    border-right: 2px solid var(--color-primary);
+}
+
+
+/* *********************************************** */
+/* ******** DataGrid Fixed Header/Footer ******** */
+/* *********************************************** */
+
+/*
+ * DataGrid with CSS Grid + Custom Scrollbars
+ * - Wrapper takes 100% of parent height
+ * - Table uses Grid: header (auto) + body (1fr) + footer (auto)
+ * - Native scrollbars hidden, custom scrollbars overlaid
+ * - Vertical scrollbar: right side of entire table
+ * - Horizontal scrollbar: bottom, under footer
+ */
+
+/* Main wrapper - takes full parent height, contains table + scrollbars */
+.dt2-table-wrapper {
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+/* Table with Grid layout - horizontal scroll enabled, scrollbars hidden */
+.dt2-table {
+    --color-border: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    --color-resize: color-mix(in oklab, var(--color-base-content) 50%, #0000);
+    height: fit-content;
+    max-height: 100%;
+    display: grid;
+    grid-template-rows: auto minmax(auto, 1fr) auto; /* header, body, footer */
+    overflow-x: auto; /* Enable horizontal scroll */
+    overflow-y: hidden; /* No vertical scroll on table */
+    scrollbar-width: none; /* Firefox: hide scrollbar */
+    -ms-overflow-style: none; /* IE/Edge: hide scrollbar */
+    border: 1px solid var(--color-border);
+    border-radius: 10px;
+}
+
+/* Chrome/Safari: hide scrollbar */
+.dt2-table::-webkit-scrollbar {
+    display: none;
+}
+
+/* Header - no scroll, takes natural height */
+.dt2-header-container {
+    overflow: hidden;
+    min-width: max-content; /* Force table to be as wide as content */
+}
+
+/* Body - scrollable vertically via JS, scrollbars hidden */
+.dt2-body-container {
+    overflow: hidden; /* Scrollbars hidden, scroll via JS */
+    min-height: 0; /* Important for Grid to allow shrinking */
+    min-width: max-content; /* Force table to be as wide as content */
+}
+
+/* Footer - no scroll, takes natural height */
+.dt2-footer-container {
+    overflow: hidden;
+    min-width: max-content; /* Force table to be as wide as content */
+}
+
+/* Custom scrollbars container - overlaid on table */
+.dt2-scrollbars {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none; /* Let clicks pass through */
+    z-index: 10;
+}
+
+/* Scrollbar wrappers - clickable/draggable */
+.dt2-scrollbars-vertical-wrapper,
+.dt2-scrollbars-horizontal-wrapper {
+    position: absolute;
+    background-color: var(--color-base-200);
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+    pointer-events: auto; /* Enable interaction */
+}
+
+/* Vertical scrollbar wrapper - right side, full table height */
+.dt2-scrollbars-vertical-wrapper {
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+}
+
+/* Extra row reserved when horizontal scrollbar is visible */
+.dt2-table.dt2-has-hscroll {
+    grid-template-rows: auto minmax(auto, 1fr) auto 8px; /* header, body, footer, scrollbar */
+}
+
+/* Horizontal scrollbar wrapper - bottom, full width minus vertical scrollbar */
+.dt2-scrollbars-horizontal-wrapper {
+    left: 0;
+    right: 8px; /* Leave space for vertical scrollbar */
+    bottom: 0;
+    height: 8px;
+}
+
+/* Scrollbar thumbs */
+.dt2-scrollbars-vertical,
+.dt2-scrollbars-horizontal {
+    background-color: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+    border-radius: 3px;
+    position: absolute;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+/* Vertical scrollbar thumb */
+.dt2-scrollbars-vertical {
+    left: 0;
+    right: 0;
+    top: 0;
+    width: 100%;
+}
+
+/* Horizontal scrollbar thumb */
+.dt2-scrollbars-horizontal {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+}
+
+/* Hover and dragging states */
+.dt2-scrollbars-vertical:hover,
+.dt2-scrollbars-horizontal:hover,
+.dt2-scrollbars-vertical.dt2-dragging,
+.dt2-scrollbars-horizontal.dt2-dragging {
+    background-color: color-mix(in oklab, var(--color-base-content) 30%, #0000);
+}
+
+/* *********************************************** */
+/* ******** DataGrid Column Drag & Drop ********** */
+/* *********************************************** */
+
+/* Column being dragged - visual feedback */
+.dt2-dragging {
+    opacity: 0.5;
+}
+
+/* Column animation during swap */
+.dt2-moving {
+    transition: transform 300ms ease;
+}
+
+/* *********************************************** */
+/* ******** DataGrid Column Manager ********** */
+/* *********************************************** */
+.dt2-column-manager-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    border-radius: 0.375rem;
+    transition: background-color 0.15s ease;
+}
+
+.dt2-column-manager-label:hover {
+    background-color: var(--color-base-300);
+}

src/myfasthtml/assets/datagrid/datagrid.js

@@ -0,0 +1,808 @@
+function initDataGrid(gridId) {
+  initDataGridScrollbars(gridId);
+  initDataGridMouseOver(gridId);
+  makeDatagridColumnsResizable(gridId);
+  makeDatagridColumnsMovable(gridId);
+  updateDatagridSelection(gridId)
+}
+
+
+/**
+ * Initialize DataGrid hover effects using event delegation.
+ *
+ * Optimizations:
+ * - Event delegation: 1 listener instead of N×2 (where N = number of cells)
+ * - Row mode: O(1) via class toggle on parent row
+ * - Column mode: RAF batching + cached cells for efficient class removal
+ * - Works with HTMX swaps: listener on stable parent, querySelectorAll finds new cells
+ * - No mouseout: hover selection stays visible when leaving the table
+ *
+ * @param {string} gridId - The DataGrid instance ID
+ */
+function initDataGridMouseOver(gridId) {
+  const table = document.getElementById(`t_${gridId}`);
+  if (!table) {
+    console.error(`Table with id "t_${gridId}" not found.`);
+    return;
+  }
+
+  const wrapper = document.getElementById(`tw_${gridId}`);
+
+  // Track hover state
+  let currentHoverRow = null;
+  let currentHoverColId = null;
+  let currentHoverColCells = null;
+
+  table.addEventListener('mouseover', (e) => {
+    // Skip hover during scrolling
+    if (wrapper?.hasAttribute('mf-no-hover')) return;
+
+    const cell = e.target.closest('.dt2-cell');
+    if (!cell) return;
+
+    const selectionModeDiv = document.getElementById(`tsm_${gridId}`);
+    const selectionMode = selectionModeDiv?.getAttribute('selection-mode');
+
+    if (selectionMode === 'row') {
+      const rowElement = cell.parentElement;
+      if (rowElement !== currentHoverRow) {
+        if (currentHoverRow) {
+          currentHoverRow.classList.remove('dt2-hover-row');
+        }
+        rowElement.classList.add('dt2-hover-row');
+        currentHoverRow = rowElement;
+      }
+    } else if (selectionMode === 'column') {
+      const colId = cell.dataset.col;
+
+      // Skip if same column
+      if (colId === currentHoverColId) return;
+
+      requestAnimationFrame(() => {
+        // Remove old column highlight
+        if (currentHoverColCells) {
+          currentHoverColCells.forEach(c => c.classList.remove('dt2-hover-column'));
+        }
+
+        // Query and add new column highlight
+        currentHoverColCells = table.querySelectorAll(`.dt2-cell[data-col="${colId}"]`);
+        currentHoverColCells.forEach(c => c.classList.add('dt2-hover-column'));
+
+        currentHoverColId = colId;
+      });
+    }
+  });
+
+  // Clean up when leaving the table entirely
+  table.addEventListener('mouseout', (e) => {
+    if (!table.contains(e.relatedTarget)) {
+      if (currentHoverRow) {
+        currentHoverRow.classList.remove('dt2-hover-row');
+        currentHoverRow = null;
+      }
+      if (currentHoverColCells) {
+        currentHoverColCells.forEach(c => c.classList.remove('dt2-hover-column'));
+        currentHoverColCells = null;
+        currentHoverColId = null;
+      }
+    }
+  });
+}
+
+/**
+ * Initialize DataGrid with CSS Grid layout + Custom Scrollbars
+ *
+ * Adapted from previous custom scrollbar implementation to work with CSS Grid.
+ * - Grid handles layout (no height calculations needed)
+ * - Custom scrollbars for visual consistency and positioning control
+ * - Vertical scroll: on body container (.dt2-body-container)
+ * - Horizontal scroll: on table (.dt2-table) to scroll header, body, footer together
+ *
+ * @param {string} gridId - The ID of the DataGrid instance
+ */
+function initDataGridScrollbars(gridId) {
+  const wrapper = document.getElementById(`tw_${gridId}`);
+
+  if (!wrapper) {
+    console.error(`DataGrid wrapper "tw_${gridId}" not found.`);
+    return;
+  }
+
+  // Cleanup previous listeners if any
+  if (wrapper._scrollbarAbortController) {
+    wrapper._scrollbarAbortController.abort();
+  }
+  wrapper._scrollbarAbortController = new AbortController();
+  const signal = wrapper._scrollbarAbortController.signal;
+
+
+  const verticalScrollbar = wrapper.querySelector(".dt2-scrollbars-vertical");
+  const verticalWrapper = wrapper.querySelector(".dt2-scrollbars-vertical-wrapper");
+  const horizontalScrollbar = wrapper.querySelector(".dt2-scrollbars-horizontal");
+  const horizontalWrapper = wrapper.querySelector(".dt2-scrollbars-horizontal-wrapper");
+  const bodyContainer = wrapper.querySelector(".dt2-body-container");
+  const table = wrapper.querySelector(".dt2-table");
+
+  if (!verticalScrollbar || !verticalWrapper || !horizontalScrollbar || !horizontalWrapper || !bodyContainer || !table) {
+    console.error("Essential scrollbar or content elements are missing in the datagrid.");
+    return;
+  }
+
+  // OPTIMIZATION: Cache element references to avoid repeated querySelector calls
+  const header = table.querySelector(".dt2-header");
+  const body = table.querySelector(".dt2-body");
+
+  // OPTIMIZATION: RequestAnimationFrame flags to throttle visual updates
+  let rafScheduledVertical = false;
+  let rafScheduledHorizontal = false;
+  let rafScheduledUpdate = false;
+
+  // OPTIMIZATION: Pre-calculated scroll ratios (updated in updateScrollbars)
+  // Allows instant mousedown with zero DOM reads
+  let cachedVerticalScrollRatio = 0;
+  let cachedHorizontalScrollRatio = 0;
+
+  // OPTIMIZATION: Cached scroll positions to avoid DOM reads in mousedown
+  // Initialized once at setup, updated in RAF handlers after each scroll change
+  let cachedBodyScrollTop = bodyContainer.scrollTop;
+  let cachedTableScrollLeft = table.scrollLeft;
+
+  /**
+   * OPTIMIZED: Batched update function
+   * Phase 1: Read all DOM properties (no writes)
+   * Phase 2: Calculate all values
+   * Phase 3: Write all DOM properties in single RAF
+   */
+  const updateScrollbars = () => {
+    if (rafScheduledUpdate) return;
+
+    rafScheduledUpdate = true;
+
+    requestAnimationFrame(() => {
+      rafScheduledUpdate = false;
+
+      // PHASE 1: Read all DOM properties
+      const metrics = {
+        bodyScrollHeight: bodyContainer.scrollHeight,
+        bodyClientHeight: bodyContainer.clientHeight,
+        bodyScrollTop: bodyContainer.scrollTop,
+        tableClientWidth: table.clientWidth,
+        tableScrollLeft: table.scrollLeft,
+        verticalWrapperHeight: verticalWrapper.offsetHeight,
+        horizontalWrapperWidth: horizontalWrapper.offsetWidth,
+        headerScrollWidth: header ? header.scrollWidth : 0,
+        bodyScrollWidth: body ? body.scrollWidth : 0
+      };
+
+      // PHASE 2: Calculate all values
+      const contentWidth = Math.max(metrics.headerScrollWidth, metrics.bodyScrollWidth);
+
+      // Visibility
+      const isVerticalRequired = metrics.bodyScrollHeight > metrics.bodyClientHeight;
+      const isHorizontalRequired = contentWidth > metrics.tableClientWidth;
+
+      // Scrollbar sizes
+      let scrollbarHeight = 0;
+      if (metrics.bodyScrollHeight > 0) {
+        scrollbarHeight = (metrics.bodyClientHeight / metrics.bodyScrollHeight) * metrics.verticalWrapperHeight;
+      }
+
+      let scrollbarWidth = 0;
+      if (contentWidth > 0) {
+        scrollbarWidth = (metrics.tableClientWidth / contentWidth) * metrics.horizontalWrapperWidth;
+      }
+
+      // Scrollbar positions
+      const maxScrollTop = metrics.bodyScrollHeight - metrics.bodyClientHeight;
+      let verticalTop = 0;
+      if (maxScrollTop > 0) {
+        const scrollRatio = metrics.verticalWrapperHeight / metrics.bodyScrollHeight;
+        verticalTop = metrics.bodyScrollTop * scrollRatio;
+      }
+
+      const maxScrollLeft = contentWidth - metrics.tableClientWidth;
+      let horizontalLeft = 0;
+      if (maxScrollLeft > 0 && contentWidth > 0) {
+        const scrollRatio = metrics.horizontalWrapperWidth / contentWidth;
+        horizontalLeft = metrics.tableScrollLeft * scrollRatio;
+      }
+
+      // OPTIMIZATION: Pre-calculate and cache scroll ratios for instant mousedown
+      // Vertical scroll ratio
+      if (maxScrollTop > 0 && scrollbarHeight > 0) {
+        cachedVerticalScrollRatio = maxScrollTop / (metrics.verticalWrapperHeight - scrollbarHeight);
+      } else {
+        cachedVerticalScrollRatio = 0;
+      }
+
+      // Horizontal scroll ratio
+      if (maxScrollLeft > 0 && scrollbarWidth > 0) {
+        cachedHorizontalScrollRatio = maxScrollLeft / (metrics.horizontalWrapperWidth - scrollbarWidth);
+      } else {
+        cachedHorizontalScrollRatio = 0;
+      }
+
+      // PHASE 3: Write all DOM properties (already in RAF)
+      verticalWrapper.style.display = isVerticalRequired ? "block" : "none";
+      horizontalWrapper.style.display = isHorizontalRequired ? "block" : "none";
+      table.classList.toggle("dt2-has-hscroll", isHorizontalRequired && isVerticalRequired);
+      verticalScrollbar.style.height = `${scrollbarHeight}px`;
+      horizontalScrollbar.style.width = `${scrollbarWidth}px`;
+      verticalScrollbar.style.top = `${verticalTop}px`;
+      horizontalScrollbar.style.left = `${horizontalLeft}px`;
+    });
+  };
+
+  // Consolidated drag management
+  let isDraggingVertical = false;
+  let isDraggingHorizontal = false;
+  let dragStartY = 0;
+  let dragStartX = 0;
+  let dragStartScrollTop = 0;
+  let dragStartScrollLeft = 0;
+
+  // Vertical scrollbar mousedown
+  verticalScrollbar.addEventListener("mousedown", (e) => {
+    isDraggingVertical = true;
+    dragStartY = e.clientY;
+    dragStartScrollTop = cachedBodyScrollTop;
+    wrapper.setAttribute("mf-no-tooltip", "");
+    wrapper.setAttribute("mf-no-hover", "");
+  }, {signal});
+
+  // Horizontal scrollbar mousedown
+  horizontalScrollbar.addEventListener("mousedown", (e) => {
+    isDraggingHorizontal = true;
+    dragStartX = e.clientX;
+    dragStartScrollLeft = cachedTableScrollLeft;
+    wrapper.setAttribute("mf-no-tooltip", "");
+    wrapper.setAttribute("mf-no-hover", "");
+  }, {signal});
+
+  // Consolidated mousemove listener
+  document.addEventListener("mousemove", (e) => {
+    if (isDraggingVertical) {
+      const deltaY = e.clientY - dragStartY;
+
+      if (!rafScheduledVertical) {
+        rafScheduledVertical = true;
+        requestAnimationFrame(() => {
+          rafScheduledVertical = false;
+          const scrollDelta = deltaY * cachedVerticalScrollRatio;
+          bodyContainer.scrollTop = dragStartScrollTop + scrollDelta;
+          cachedBodyScrollTop = bodyContainer.scrollTop;
+          updateScrollbars();
+        });
+      }
+    } else if (isDraggingHorizontal) {
+      const deltaX = e.clientX - dragStartX;
+
+      if (!rafScheduledHorizontal) {
+        rafScheduledHorizontal = true;
+        requestAnimationFrame(() => {
+          rafScheduledHorizontal = false;
+          const scrollDelta = deltaX * cachedHorizontalScrollRatio;
+          table.scrollLeft = dragStartScrollLeft + scrollDelta;
+          cachedTableScrollLeft = table.scrollLeft;
+          updateScrollbars();
+        });
+      }
+    }
+  }, {signal});
+
+  // Consolidated mouseup listener
+  document.addEventListener("mouseup", () => {
+    if (isDraggingVertical) {
+      isDraggingVertical = false;
+      wrapper.removeAttribute("mf-no-tooltip");
+      wrapper.removeAttribute("mf-no-hover");
+    } else if (isDraggingHorizontal) {
+      isDraggingHorizontal = false;
+      wrapper.removeAttribute("mf-no-tooltip");
+      wrapper.removeAttribute("mf-no-hover");
+    }
+  }, {signal});
+
+  // Wheel scrolling - OPTIMIZED with RAF throttling
+  let rafScheduledWheel = false;
+  let pendingWheelDeltaX = 0;
+  let pendingWheelDeltaY = 0;
+  let wheelEndTimeout = null;
+
+  const handleWheelScrolling = (event) => {
+    // Disable hover and tooltip during wheel scroll
+    wrapper.setAttribute("mf-no-hover", "");
+    wrapper.setAttribute("mf-no-tooltip", "");
+
+    // Clear previous timeout and re-enable after 150ms of no wheel events
+    if (wheelEndTimeout) clearTimeout(wheelEndTimeout);
+    wheelEndTimeout = setTimeout(() => {
+      wrapper.removeAttribute("mf-no-hover");
+      wrapper.removeAttribute("mf-no-tooltip");
+    }, 150);
+
+    // Accumulate wheel deltas
+    pendingWheelDeltaX += event.deltaX;
+    pendingWheelDeltaY += event.deltaY;
+
+    // Schedule update in next animation frame (throttle)
+    if (!rafScheduledWheel) {
+      rafScheduledWheel = true;
+      requestAnimationFrame(() => {
+        rafScheduledWheel = false;
+
+        // Apply accumulated scroll
+        bodyContainer.scrollTop += pendingWheelDeltaY;
+        table.scrollLeft += pendingWheelDeltaX;
+
+        // Update caches with clamped values (read back from DOM in RAF - OK)
+        cachedBodyScrollTop = bodyContainer.scrollTop;
+        cachedTableScrollLeft = table.scrollLeft;
+
+        // Reset pending deltas
+        pendingWheelDeltaX = 0;
+        pendingWheelDeltaY = 0;
+
+        // Update all scrollbars in a single batched operation
+        updateScrollbars();
+      });
+    }
+
+    event.preventDefault();
+  };
+
+  wrapper.addEventListener("wheel", handleWheelScrolling, {passive: false, signal});
+
+  // Initialize scrollbars with single batched update
+  updateScrollbars();
+
+  // Recompute on window resize with RAF throttling
+  let resizeScheduled = false;
+  window.addEventListener("resize", () => {
+    if (!resizeScheduled) {
+      resizeScheduled = true;
+      requestAnimationFrame(() => {
+        resizeScheduled = false;
+        updateScrollbars();
+      });
+    }
+  }, {signal});
+}
+
+function makeDatagridColumnsResizable(datagridId) {
+  //console.debug("makeResizable on element " + datagridId);
+
+  const tableId = 't_' + datagridId;
+  const table = document.getElementById(tableId);
+  const resizeHandles = table.querySelectorAll('.dt2-resize-handle');
+  const MIN_WIDTH = 30; // Prevent columns from becoming too narrow
+
+  // Attach event listeners using delegation
+  resizeHandles.forEach(handle => {
+    handle.addEventListener('mousedown', onStartResize);
+    handle.addEventListener('touchstart', onStartResize, {passive: false});
+    handle.addEventListener('dblclick', onDoubleClick); // Reset column width
+  });
+
+  let resizingState = null; // Maintain resizing state information
+
+  function onStartResize(event) {
+    event.preventDefault(); // Prevent unintended selections
+
+    const isTouch = event.type === 'touchstart';
+    const startX = isTouch ? event.touches[0].pageX : event.pageX;
+    const handle = event.target;
+    const cell = handle.parentElement;
+    const colIndex = cell.getAttribute('data-col');
+    const commandId = handle.dataset.commandId;
+    const cells = table.querySelectorAll(`.dt2-cell[data-col="${colIndex}"]`);
+
+    // Store initial state
+    const startWidth = cell.offsetWidth + 8;
+    resizingState = {startX, startWidth, colIndex, commandId, cells};
+
+    // Attach event listeners for resizing
+    document.addEventListener(isTouch ? 'touchmove' : 'mousemove', onResize);
+    document.addEventListener(isTouch ? 'touchend' : 'mouseup', onStopResize);
+  }
+
+  function onResize(event) {
+    if (!resizingState) {
+      return;
+    }
+
+    const isTouch = event.type === 'touchmove';
+    const currentX = isTouch ? event.touches[0].pageX : event.pageX;
+    const {startX, startWidth, cells} = resizingState;
+
+    // Calculate new width and apply constraints
+    const newWidth = Math.max(MIN_WIDTH, startWidth + (currentX - startX));
+    cells.forEach(cell => {
+      cell.style.width = `${newWidth}px`;
+    });
+  }
+
+  function onStopResize(event) {
+    if (!resizingState) {
+      return;
+    }
+
+    const {colIndex, commandId, cells} = resizingState;
+
+    const finalWidth = cells[0].offsetWidth;
+
+    // Send width update to server via HTMX
+    if (commandId) {
+      htmx.ajax('POST', '/myfasthtml/commands', {
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded"
+        },
+        swap: 'none',
+        values: {
+          c_id: commandId,
+          col_id: colIndex,
+          width: finalWidth
+        }
+      });
+    }
+
+    // Clean up
+    resizingState = null;
+    document.removeEventListener('mousemove', onResize);
+    document.removeEventListener('mouseup', onStopResize);
+    document.removeEventListener('touchmove', onResize);
+    document.removeEventListener('touchend', onStopResize);
+  }
+
+  function onDoubleClick(event) {
+    const handle = event.target;
+    const cell = handle.parentElement;
+    const colIndex = cell.getAttribute('data-col');
+    const cells = table.querySelectorAll(`.dt2-cell[data-col="${colIndex}"]`);
+
+    // Reset column width
+    cells.forEach(cell => {
+      cell.style.width = ''; // Use CSS default width
+    });
+
+    // Emit reset event
+    const resetEvent = new CustomEvent('columnReset', {detail: {colIndex}});
+    table.dispatchEvent(resetEvent);
+  }
+}
+
+/**
+ * Enable column reordering via drag and drop on a DataGrid.
+ * Columns can be dragged to new positions with animated transitions.
+ * @param {string} gridId - The DataGrid instance ID
+ */
+function makeDatagridColumnsMovable(gridId) {
+  const table = document.getElementById(`t_${gridId}`);
+  const headerRow = document.getElementById(`th_${gridId}`);
+
+  if (!table || !headerRow) {
+    console.error(`DataGrid elements not found for ${gridId}`);
+    return;
+  }
+
+  const moveCommandId = headerRow.dataset.moveCommandId;
+  const headerCells = headerRow.querySelectorAll('.dt2-cell:not(.dt2-col-hidden)');
+
+  let sourceColumn = null;      // Column being dragged (original position)
+  let lastMoveTarget = null;    // Last column we moved to (for persistence)
+  let hoverColumn = null;       // Current hover target (for delayed move check)
+
+  headerCells.forEach(cell => {
+    cell.setAttribute('draggable', 'true');
+
+    // Prevent drag when clicking resize handle
+    const resizeHandle = cell.querySelector('.dt2-resize-handle');
+    if (resizeHandle) {
+      resizeHandle.addEventListener('mousedown', () => cell.setAttribute('draggable', 'false'));
+      resizeHandle.addEventListener('mouseup', () => cell.setAttribute('draggable', 'true'));
+    }
+
+    cell.addEventListener('dragstart', (e) => {
+      sourceColumn = cell.getAttribute('data-col');
+      lastMoveTarget = null;
+      hoverColumn = null;
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', sourceColumn);
+      cell.classList.add('dt2-dragging');
+    });
+
+    cell.addEventListener('dragenter', (e) => {
+      e.preventDefault();
+      const targetColumn = cell.getAttribute('data-col');
+      hoverColumn = targetColumn;
+
+      if (sourceColumn && sourceColumn !== targetColumn) {
+        // Delay to skip columns when dragging fast
+        setTimeout(() => {
+          if (hoverColumn === targetColumn) {
+            moveColumn(table, sourceColumn, targetColumn);
+            lastMoveTarget = targetColumn;
+          }
+        }, 50);
+      }
+    });
+
+    cell.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'move';
+    });
+
+    cell.addEventListener('drop', (e) => {
+      e.preventDefault();
+      // Persist to server
+      if (moveCommandId && sourceColumn && lastMoveTarget) {
+        htmx.ajax('POST', '/myfasthtml/commands', {
+          headers: {"Content-Type": "application/x-www-form-urlencoded"},
+          swap: 'none',
+          values: {
+            c_id: moveCommandId,
+            source_col_id: sourceColumn,
+            target_col_id: lastMoveTarget
+          }
+        });
+      }
+    });
+
+    cell.addEventListener('dragend', () => {
+      headerCells.forEach(c => c.classList.remove('dt2-dragging'));
+      sourceColumn = null;
+      lastMoveTarget = null;
+      hoverColumn = null;
+    });
+  });
+}
+
+/**
+ * Move a column to a new position with animation.
+ * All columns between source and target shift to fill the gap.
+ * @param {HTMLElement} table - The table element
+ * @param {string} sourceColId - Column ID to move
+ * @param {string} targetColId - Column ID to move next to
+ */
+function moveColumn(table, sourceColId, targetColId) {
+  const ANIMATION_DURATION = 300;  // Must match CSS transition duration
+
+  const sourceHeader = table.querySelector(`.dt2-cell[data-col="${sourceColId}"]`);
+  const targetHeader = table.querySelector(`.dt2-cell[data-col="${targetColId}"]`);
+
+  if (!sourceHeader || !targetHeader) return;
+  if (sourceHeader.classList.contains('dt2-moving')) return;  // Animation in progress
+
+  const headerCells = Array.from(sourceHeader.parentNode.children);
+  const sourceIdx = headerCells.indexOf(sourceHeader);
+  const targetIdx = headerCells.indexOf(targetHeader);
+
+  if (sourceIdx === targetIdx) return;
+
+  const movingRight = sourceIdx < targetIdx;
+  const sourceCells = table.querySelectorAll(`.dt2-cell[data-col="${sourceColId}"]`);
+
+  // Collect cells that need to shift (between source and target)
+  const cellsToShift = [];
+  let shiftWidth = 0;
+  const [startIdx, endIdx] = movingRight
+    ? [sourceIdx + 1, targetIdx]
+    : [targetIdx, sourceIdx - 1];
+
+  for (let i = startIdx; i <= endIdx; i++) {
+    const colId = headerCells[i].getAttribute('data-col');
+    cellsToShift.push(...table.querySelectorAll(`.dt2-cell[data-col="${colId}"]`));
+    shiftWidth += headerCells[i].offsetWidth;
+  }
+
+  // Calculate animation distances
+  const sourceWidth = sourceHeader.offsetWidth;
+  const sourceDistance = movingRight ? shiftWidth : -shiftWidth;
+  const shiftDistance = movingRight ? -sourceWidth : sourceWidth;
+
+  // Animate source column
+  sourceCells.forEach(cell => {
+    cell.classList.add('dt2-moving');
+    cell.style.transform = `translateX(${sourceDistance}px)`;
+  });
+
+  // Animate shifted columns
+  cellsToShift.forEach(cell => {
+    cell.classList.add('dt2-moving');
+    cell.style.transform = `translateX(${shiftDistance}px)`;
+  });
+
+  // After animation: reset transforms and update DOM
+  setTimeout(() => {
+    [...sourceCells, ...cellsToShift].forEach(cell => {
+      cell.classList.remove('dt2-moving');
+      cell.style.transform = '';
+    });
+
+    // Move source column in DOM
+    table.querySelectorAll('.dt2-row').forEach(row => {
+      const sourceCell = row.querySelector(`[data-col="${sourceColId}"]`);
+      const targetCell = row.querySelector(`[data-col="${targetColId}"]`);
+      if (sourceCell && targetCell) {
+        movingRight ? targetCell.after(sourceCell) : targetCell.before(sourceCell);
+      }
+    });
+  }, ANIMATION_DURATION);
+}
+
+function updateDatagridSelection(datagridId) {
+  const selectionManager = document.getElementById(`tsm_${datagridId}`);
+  if (!selectionManager) {
+    console.warn(`DataGrid selection manager not found for ${datagridId}`);
+    return;
+  }
+
+  // Re-enable tooltips after drag
+  const wrapper = document.getElementById(`tw_${datagridId}`);
+  if (wrapper) wrapper.removeAttribute('mf-no-tooltip');
+
+  // Clear browser text selection to prevent stale ranges from reappearing
+  // But skip if an input/textarea/contenteditable has focus (would clear text cursor)
+  if (!document.activeElement?.closest('input, textarea, [contenteditable]')) {
+    window.getSelection()?.removeAllRanges();
+  }
+
+  // OPTIMIZATION: scope to table instead of scanning the entire document
+  const table = document.getElementById(`t_${datagridId}`);
+  const searchRoot = table ?? document;
+
+  // Clear previous selections and drag preview
+  searchRoot.querySelectorAll('.dt2-selected-focus, .dt2-selected-cell, .dt2-selected-row, .dt2-selected-column, .dt2-drag-preview, .dt2-selection-border-top, .dt2-selection-border-bottom, .dt2-selection-border-left, .dt2-selection-border-right').forEach((element) => {
+    element.classList.remove('dt2-selected-focus', 'dt2-selected-cell', 'dt2-selected-row', 'dt2-selected-column', 'dt2-drag-preview', 'dt2-selection-border-top', 'dt2-selection-border-bottom', 'dt2-selection-border-left', 'dt2-selection-border-right');
+    element.style.userSelect = '';
+  });
+
+  // Loop through the children of the selection manager
+  Array.from(selectionManager.children).forEach((selection) => {
+    const selectionType = selection.getAttribute('selection-type');
+    const elementId = selection.getAttribute('element-id');
+
+    if (selectionType === 'focus') {
+      const cellElement = document.getElementById(`${elementId}`);
+      if (cellElement) {
+        cellElement.classList.add('dt2-selected-focus');
+        cellElement.style.userSelect = 'text';
+      }
+    } else if (selectionType === 'cell') {
+      const cellElement = document.getElementById(`${elementId}`);
+      if (cellElement) {
+        cellElement.classList.add('dt2-selected-cell');
+      }
+    } else if (selectionType === 'row') {
+      const rowElement = document.getElementById(`${elementId}`);
+      if (rowElement) {
+        rowElement.classList.add('dt2-selected-row');
+      }
+    } else if (selectionType === 'column') {
+      // Select all elements in the specified column
+      searchRoot.querySelectorAll(`[data-col="${elementId}"]`).forEach((columnElement) => {
+        columnElement.classList.add('dt2-selected-column');
+      });
+    } else if (selectionType === 'range') {
+      // Parse range tuple string: "(min_col,min_row,max_col,max_row)"
+      // Remove parentheses and split
+      const cleanedId = elementId.replace(/[()]/g, '');
+      const parts = cleanedId.split(',');
+      if (parts.length === 4) {
+        const [minCol, minRow, maxCol, maxRow] = parts;
+
+        // Convert to integers
+        const minColNum = parseInt(minCol);
+        const maxColNum = parseInt(maxCol);
+        const minRowNum = parseInt(minRow);
+        const maxRowNum = parseInt(maxRow);
+
+        // Iterate through range and select cells by reconstructed ID
+        for (let col = minColNum; col <= maxColNum; col++) {
+          for (let row = minRowNum; row <= maxRowNum; row++) {
+            const cellId = `tcell_${datagridId}-${col}-${row}`;
+            const cell = document.getElementById(cellId);
+            if (cell) {
+              cell.classList.add('dt2-selected-cell');
+              if (row === minRowNum) cell.classList.add('dt2-selection-border-top');
+              if (row === maxRowNum) cell.classList.add('dt2-selection-border-bottom');
+              if (col === minColNum) cell.classList.add('dt2-selection-border-left');
+              if (col === maxColNum) cell.classList.add('dt2-selection-border-right');
+            }
+          }
+        }
+      }
+    }
+  });
+}
+
+/**
+ * Find the parent element with .dt2-cell class and return its id.
+ * Used with hx-vals="js:getCellId()" for DataGrid cell identification.
+ *
+ * @param {MouseEvent} event - The mouse event
+ * @returns {Object} Object with cell_id property, or empty object if not found
+ */
+function getCellId(event) {
+  const cell = event.target.closest('.dt2-cell');
+  if (cell && cell.id) {
+    return {cell_id: cell.id};
+  }
+  return {cell_id: null};
+}
+
+// OPTIMIZATION: Cache of highlighted cells per grid to avoid querySelectorAll on every animation frame
+const _dragHighlightCache = new Map();
+
+/**
+ * Highlight the drag selection range in real time during a mousedown>mouseup drag.
+ * Called by mouse.js on each animation frame while dragging.
+ * Applies .dt2-drag-preview to all cells in the rectangle between the start and
+ * current cell. The preview is cleared by updateDatagridSelection() when the server
+ * responds with the final selection.
+ *
+ * @param {MouseEvent} event - The current mousemove event
+ * @param {string} combination - The active mouse combination (e.g. "mousedown>mouseup")
+ * @param {Object|null} mousedownResult - Result of getCellId() at mousedown, or null
+ */
+function highlightDatagridDragRange(event, combination, mousedownResult) {
+  if (!mousedownResult || !mousedownResult.cell_id) return;
+
+  const currentCell = event.target.closest('.dt2-cell');
+  if (!currentCell || !currentCell.id) return;
+
+  const startCellId = mousedownResult.cell_id;
+  const endCellId = currentCell.id;
+
+  // Find the table from the start cell to scope the query
+  const startCell = document.getElementById(startCellId);
+  if (!startCell) return;
+  const table = startCell.closest('.dt2-table');
+  if (!table) return;
+
+  // Extract grid ID from table id: "t_{gridId}" -> "{gridId}"
+  const gridId = table.id.substring(2);
+
+  // Disable tooltips during drag
+  const wrapper = document.getElementById(`tw_${gridId}`);
+  if (wrapper) wrapper.setAttribute('mf-no-tooltip', '');
+
+  // Parse col/row by splitting on "-" and taking the last two numeric parts
+  const startParts = startCellId.split('-');
+  const startCol = parseInt(startParts[startParts.length - 2]);
+  const startRow = parseInt(startParts[startParts.length - 1]);
+
+  const endParts = endCellId.split('-');
+  const endCol = parseInt(endParts[endParts.length - 2]);
+  const endRow = parseInt(endParts[endParts.length - 1]);
+
+  if (isNaN(startCol) || isNaN(startRow) || isNaN(endCol) || isNaN(endRow)) return;
+
+  // OPTIMIZATION: Clear only previously highlighted cells instead of querySelectorAll on all table cells
+  const prevHighlighted = _dragHighlightCache.get(gridId);
+  if (prevHighlighted) {
+    prevHighlighted.forEach(c => c.classList.remove('dt2-drag-preview', 'dt2-selected-cell', 'dt2-selected-row', 'dt2-selected-column', 'dt2-selected-focus', 'dt2-selection-border-top', 'dt2-selection-border-bottom', 'dt2-selection-border-left', 'dt2-selection-border-right'));
+  }
+
+  // Apply preview to all cells in the rectangular range and track them
+  const minCol = Math.min(startCol, endCol);
+  const maxCol = Math.max(startCol, endCol);
+  const minRow = Math.min(startRow, endRow);
+  const maxRow = Math.max(startRow, endRow);
+
+  const newHighlighted = [];
+  for (let col = minCol; col <= maxCol; col++) {
+    for (let row = minRow; row <= maxRow; row++) {
+      const cell = document.getElementById(`tcell_${gridId}-${col}-${row}`);
+      if (cell) {
+        cell.classList.add('dt2-drag-preview');
+        if (row === minRow) cell.classList.add('dt2-selection-border-top');
+        if (row === maxRow) cell.classList.add('dt2-selection-border-bottom');
+        if (col === minCol) cell.classList.add('dt2-selection-border-left');
+        if (col === maxCol) cell.classList.add('dt2-selection-border-right');
+        newHighlighted.push(cell);
+      }
+    }
+  }
+  _dragHighlightCache.set(gridId, newHighlighted);
+}

src/myfasthtml/assets/vis/visnetwork.css

@@ -0,0 +1,4 @@
+.mf-vis {
+    width: 100%;
+    height: 100%;
+}

src/myfasthtml/auth/utils.py

@@ -26,8 +26,7 @@ DEFAULT_SKIP_PATTERNS = [
     r'/static/.*',
     r'.*\.css',
     r'.*\.js',
-    r'/myfasthtml/.*\.css',
-    r'/myfasthtml/.*\.js',
+    r'/myfasthtml/assets/.*',
     '/login',
     '/register',
     '/logout',

src/myfasthtml/controls/Boundaries.py

@@ -1,7 +1,6 @@
 from fasthtml.xtend import Script
 
 from myfasthtml.controls.BaseCommands import BaseCommands
-from myfasthtml.controls.helpers import Ids
 from myfasthtml.core.commands import Command
 from myfasthtml.core.instances import SingleInstance
 
@@ -17,6 +16,7 @@ class Commands(BaseCommands):
   def update_boundaries(self):
     return Command(f"{self._prefix}UpdateBoundaries",
                    "Update component boundaries",
+                   self._owner,
                    self._owner.update_boundaries).htmx(target=f"{self._owner.get_id()}")
 
 

src/myfasthtml/controls/CommandsDebugger.py

@@ -1,26 +1,26 @@
 from myfasthtml.controls.VisNetwork import VisNetwork
 from myfasthtml.core.commands import CommandsManager
-from myfasthtml.core.instances import SingleInstance
-from myfasthtml.core.network_utils import from_parent_child_list
+from myfasthtml.core.instances import SingleInstance, InstancesManager
+from myfasthtml.core.vis_network_utils import from_parent_child_list
 
 
 class CommandsDebugger(SingleInstance):
+  """
+  Represents a debugger designed for visualizing and managing commands in a parent-child
+  hierarchical structure.
+  """
+  
   def __init__(self, parent, _id=None):
     super().__init__(parent, _id=_id)
   
   def render(self):
-    commands = self._get_commands()
-    nodes, edges = from_parent_child_list(commands,
-                                          id_getter=lambda x: str(x.id),
-                                          label_getter=lambda x: x.name,
-                                          parent_getter=lambda x: str(self.get_command_parent(x))
-                                          )
+    nodes, edges = self._get_nodes_and_edges()
     
     vis_network = VisNetwork(self, nodes=nodes, edges=edges)
     return vis_network
   
   @staticmethod
-  def get_command_parent(command):
+  def get_command_parent_from_ft(command):
     if (ft := command.get_ft()) is None:
       return None
     if hasattr(ft, "get_id") and callable(ft.get_id):
@@ -32,6 +32,30 @@ class CommandsDebugger(SingleInstance):
     
     return None
   
+  @staticmethod
+  def get_command_parent_from_instance(command):
+    if command.owner is None:
+      return None
+    
+    return command.owner.get_full_id()
+  
+  def _get_nodes_and_edges(self):
+    commands = self._get_commands()
+    nodes, edges = from_parent_child_list(commands,
+                                          id_getter=lambda x: str(x.id),
+                                          label_getter=lambda x: x.name,
+                                          parent_getter=lambda x: str(self.get_command_parent_from_instance(x)),
+                                          ghost_label_getter=lambda x: InstancesManager.get(*x.split("#")).get_id()
+                                          )
+    for edge in edges:
+      edge["color"] = "blue"
+      edge["arrows"] = {"to": {"enabled": False, "type": "circle"}}
+    
+    for node in nodes:
+      node["shape"] = "box"
+    
+    return nodes, edges
+  
   def _get_commands(self):
     return list(CommandsManager.commands.values())
   

src/myfasthtml/controls/CycleStateControl.py

@@ -0,0 +1,56 @@
+import logging
+
+from fasthtml.components import Div
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.dbmanager import DbObject
+from myfasthtml.core.instances import MultipleInstance
+
+logger = logging.getLogger("CycleStateControl")
+
+class CycleState(DbObject):
+  def __init__(self, owner, save_state):
+    with self.initializing():
+      super().__init__(owner, save_state=save_state)
+      self.state = None
+
+
+class Commands(BaseCommands):
+  def cycle_state(self):
+    return Command("CycleState",
+                   "Cycle state",
+                   self._owner,
+                   self._owner.cycle_state).htmx(target=f"#{self._id}")
+
+
+class CycleStateControl(MultipleInstance):
+  def __init__(self, parent, controls: dict, _id=None, save_state=True):
+    super().__init__(parent, _id=_id)
+    self._state = CycleState(self, save_state)
+    self.controls_by_states = controls
+    self.commands = Commands(self)
+    
+    # init the state if required
+    if self._state.state is None and controls:
+      self._state.state = next(iter(controls.keys()))
+  
+  def cycle_state(self):
+    logger.debug(f"cycle_state datagrid={self._parent.get_table_name()}")
+    keys = list(self.controls_by_states.keys())
+    current_idx = keys.index(self._state.state)
+    self._state.state = keys[(current_idx + 1) % len(keys)]
+    return self
+  
+  def get_state(self):
+    return self._state.state
+  
+  def render(self):
+    return mk.mk(
+      Div(self.controls_by_states[self._state.state], id=self._id),
+      command=self.commands.cycle_state()
+    )
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/DataGridColumnsManager.py

@@ -0,0 +1,278 @@
+import logging
+
+from fasthtml.components import *
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.DataGridFormulaEditor import DataGridFormulaEditor
+from myfasthtml.controls.DslEditor import DslEditorConf
+from myfasthtml.controls.IconsHelper import IconsHelper
+from myfasthtml.controls.Search import Search
+from myfasthtml.controls.datagrid_objects import DataGridColumnState
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.constants import ColumnType
+from myfasthtml.core.dsls import DslsManager
+from myfasthtml.core.formula.dsl.completion.FormulaCompletionEngine import FormulaCompletionEngine
+from myfasthtml.core.formula.dsl.parser import FormulaParser
+from myfasthtml.core.instances import MultipleInstance
+from myfasthtml.icons.fluent_p1 import chevron_right20_regular, chevron_left20_regular
+
+logger = logging.getLogger("DataGridColumnsManager")
+
+
+class Commands(BaseCommands):
+  def toggle_column(self, col_id):
+    return Command(f"ToggleColumn",
+                   f"Toggle column {col_id}",
+                   self._owner,
+                   self._owner.toggle_column,
+                   kwargs={"col_id": col_id}).htmx(swap="outerHTML", target=f"#tcolman_{self._id}-{col_id}")
+  
+  def show_column_details(self, col_id):
+    return Command(f"ShowColumnDetails",
+                   f"Show column details {col_id}",
+                   self._owner,
+                   self._owner.show_column_details,
+                   kwargs={"col_id": col_id}).htmx(target=f"#{self._id}", swap="innerHTML")
+  
+  def show_all_columns(self):
+    return Command(f"ShowAllColumns",
+                   f"Show all columns",
+                   self._owner,
+                   self._owner.show_all_columns).htmx(target=f"#{self._id}", swap="innerHTML")
+  
+  def save_column_details(self, col_id):
+    return Command(f"SaveColumnDetails",
+                   f"Save column {col_id}",
+                   self._owner,
+                   self._owner.save_column_details,
+                   kwargs={"col_id": col_id}
+                   ).htmx(target=f"#{self._id}", swap="innerHTML")
+  
+  def on_new_column(self):
+    return Command(f"OnNewColumn",
+                   f"New column",
+                   self._owner,
+                   self._owner.on_new_column).htmx(target=f"#{self._id}", swap="innerHTML")
+  
+  def on_column_type_changed(self):
+    return Command(f"OnColumnTypeChanged",
+                   f"Column Type changed",
+                   self._owner,
+                   self._owner.on_column_type_changed).htmx(target=f"#{self._id}", swap="innerHTML", trigger="change")
+
+
+class DataGridColumnsManager(MultipleInstance):
+  def __init__(self, parent, _id=None):
+    super().__init__(parent, _id=_id)
+    self.commands = Commands(self)
+    self._new_column = False
+    
+    completion_engine = FormulaCompletionEngine(
+      self._parent._parent,
+      self._parent.get_table_name(),
+    )
+    conf = DslEditorConf(name="formula", save_button=False, line_numbers=False, engine_id=completion_engine.get_id())
+    self._formula_editor = DataGridFormulaEditor(self, conf=conf, _id=f"{self._id}-formula-editor")
+    DslsManager.register(completion_engine, FormulaParser())
+  
+  @property
+  def columns(self):
+    return self._parent.get_state().columns
+  
+  def _get_col_def_from_col_id(self, col_id, copy=True):
+    """
+    """
+    cols_defs = [c for c in self.columns if c.col_id == col_id]
+    if not cols_defs:
+      return None
+    
+    return cols_defs[0].copy() if copy else cols_defs[0]
+  
+  def _get_updated_col_def_from_col_id(self, col_id, updates=None, copy=True):
+    col_def = self._get_col_def_from_col_id(col_id, copy=copy)
+    if col_def is None:
+      col_def = DataGridColumnState(col_id, -1)
+    
+    if updates is not None:
+      updates["visible"] = "visible" in updates and updates["visible"] == "on"
+      for k, v in [(k, v) for k, v in updates.items() if hasattr(col_def, k)]:
+        if k == "type":
+          col_def.type = ColumnType(v)
+        elif k == "width":
+          col_def.width = int(v)
+        elif k == "formula":
+          col_def.formula = v or ""
+          # self._register_formula(col_def), Will be done in save_column_details()
+        else:
+          setattr(col_def, k, v)
+    
+    return col_def
+  
+  def toggle_column(self, col_id):
+    logger.debug(f"toggle_column {col_id=}")
+    col_def = self._get_col_def_from_col_id(col_id, copy=False)
+    if col_def is None:
+      logger.debug(f"  column '{col_id}' is not found.")
+      return Div(f"Column '{col_id}' not found")
+    
+    col_def.visible = not col_def.visible
+    self._parent.save_state()
+    return self.mk_column_label(col_def)
+  
+  def show_column_details(self, col_id):
+    logger.debug(f"show_column_details {col_id=}")
+    col_def = self._get_updated_col_def_from_col_id(col_id)
+    if col_def is None:
+      logger.debug(f"  column '{col_id}' is not found.")
+      return Div(f"Column '{col_id}' not found")
+    
+    return self.mk_column_details(col_def)
+  
+  def show_all_columns(self):
+    return self._mk_inner_content()
+  
+  def save_column_details(self, col_id, client_response):
+    logger.debug(f"save_column_details {col_id=}, {client_response=}")
+    col_def = self._get_updated_col_def_from_col_id(col_id, client_response, copy=False)
+    if col_def.col_id == "__new__":
+      self._parent.add_new_column(col_def)  # sets the correct col_id before _register_formula
+    self._register_formula(col_def)
+    self._parent.save_state()
+    
+    return self._mk_inner_content()
+  
+  def on_new_column(self):
+    self._new_column = True
+    col_def = self._get_updated_col_def_from_col_id("__new__")
+    return self.mk_column_details(col_def)
+  
+  def on_column_type_changed(self, col_id, client_response):
+    logger.debug(f"on_column_type_changed {col_id=}, {client_response=}")
+    col_def = self._get_updated_col_def_from_col_id(col_id, client_response)
+    return self.mk_column_details(col_def)
+  
+  def _register_formula(self, col_def) -> None:
+    """Register or remove a formula column with the FormulaEngine.
+
+    Registers only when col_def.type is Formula and the formula text is
+    non-empty.  Removes the formula in all other cases so the engine stays
+    consistent with the column definition.
+    """
+    engine = self._parent.get_formula_engine()
+    if engine is None:
+      return
+    table = self._parent.get_table_name()
+    if col_def.type == ColumnType.Formula and col_def.formula:
+      try:
+        engine.set_formula(table, col_def.col_id, col_def.formula)
+        logger.debug("Registered formula for %s.%s", table, col_def.col_id)
+      except Exception as e:
+        logger.warning("Formula error for %s.%s: %s", table, col_def.col_id, e)
+    else:
+      engine.remove_formula(table, col_def.col_id)
+  
+  def mk_column_label(self, col_def: DataGridColumnState):
+    return Div(
+      mk.mk(
+        Input(type="checkbox", cls="checkbox checkbox-sm", checked=col_def.visible),
+        command=self.commands.toggle_column(col_def.col_id)
+      ),
+      mk.mk(
+        Div(
+          Div(mk.label(col_def.col_id, icon=IconsHelper.get(col_def.type), cls="ml-2")),
+          Div(mk.icon(chevron_right20_regular), cls="mr-2"),
+          cls="dt2-column-manager-label"
+        ),
+        command=self.commands.show_column_details(col_def.col_id)
+      ),
+      cls="flex mb-1 items-center",
+      id=f"tcolman_{self._id}-{col_def.col_id}"
+    )
+  
+  def mk_column_details(self, col_def: DataGridColumnState):
+    size = "sm"
+    return Div(
+      mk.label("Back", icon=chevron_left20_regular, command=self.commands.show_all_columns()),
+      Form(
+        Fieldset(
+          Label("Column Id"),
+          Input(name="col_id",
+                cls=f"input input-{size}",
+                value=col_def.col_id,
+                readonly=True),
+          
+          Label("Title"),
+          Input(name="title",
+                cls=f"input input-{size}",
+                value=col_def.title),
+          
+          Label("type"),
+          mk.mk(
+            Select(
+              *[Option(option.value, value=option.value, selected=option == col_def.type) for option in ColumnType],
+              name="type",
+              cls=f"select select-{size}",
+              value=col_def.title,
+            ), command=self.commands.on_column_type_changed()
+          ),
+          
+          *([
+                Label("Formula"),
+                self._formula_editor,
+            ] if col_def.type == ColumnType.Formula else []),
+          
+          Div(
+            Div(
+              Label("Visible"),
+              Input(name="visible",
+                    type="checkbox",
+                    cls=f"checkbox checkbox-{size}",
+                    checked="true" if col_def.visible else None),
+            ),
+            Div(
+              Label("Width"),
+              Input(name="width",
+                    type="number",
+                    cls=f"input input-{size}",
+                    value=col_def.width),
+            ),
+            cls="flex",
+          ),
+          
+          legend="Column details",
+          cls="fieldset border-base-300 rounded-box"
+        ),
+        mk.dialog_buttons(on_ok=self.commands.save_column_details(col_def.col_id),
+                          on_cancel=self.commands.show_all_columns()),
+        cls="mb-1",
+      ),
+    )
+  
+  def mk_all_columns(self):
+    return Search(self,
+                  items_names="Columns",
+                  items=self.columns,
+                  get_attr=lambda x: x.col_id,
+                  template=self.mk_column_label,
+                  max_height=None
+                  )
+  
+  def mk_new_column(self):
+    return Div(
+      mk.button("New Column", command=self.commands.on_new_column()),
+      cls="mb-1",
+    )
+  
+  def _mk_inner_content(self):
+    return (self.mk_all_columns(),
+            self.mk_new_column())
+  
+  def render(self):
+    return Div(
+      *self._mk_inner_content(),
+      id=self._id,
+    )
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/DataGridFormattingEditor.py

@@ -0,0 +1,137 @@
+import logging
+from collections import defaultdict
+
+from myfasthtml.controls.DslEditor import DslEditor
+from myfasthtml.controls.datagrid_objects import DataGridRowState
+from myfasthtml.core.formatting.dsl import parse_dsl, DSLSyntaxError, ColumnScope, RowScope, CellScope, TableScope, TablesScope
+from myfasthtml.core.instances import InstancesManager
+
+logger = logging.getLogger("DataGridFormattingEditor")
+
+
+class DataGridFormattingEditor(DslEditor):
+  
+  def _find_column_by_name(self, name: str):
+    """
+    Find a column by name, searching col_id first, then title.
+
+    Returns:
+        tuple (col_pos, col_def) if found, (None, None) otherwise
+    """
+    # First pass: match by col_id
+    for col_pos, col_def in enumerate(self._parent.get_state().columns):
+      if col_def.col_id == name:
+        return col_pos, col_def
+    
+    # Second pass: match by title
+    for col_pos, col_def in enumerate(self._parent.get_state().columns):
+      if col_def.title == name:
+        return col_pos, col_def
+    
+    return None, None
+  
+  def _get_cell_id(self, scope: CellScope):
+    """
+    Get cell_id from CellScope.
+
+    If scope has cell_id, use it directly.
+    Otherwise, resolve coordinates (column, row) to cell_id.
+
+    Returns:
+        cell_id string or None if column not found
+    """
+    if scope.cell_id:
+      return scope.cell_id
+    
+    col_pos, _ = self._find_column_by_name(scope.column)
+    if col_pos is None:
+      logger.warning(f"Column '{scope.column}' not found for CellScope")
+      return None
+    
+    return self._parent._get_element_id_from_pos("cell", (col_pos, scope.row))
+  
+  def on_content_changed(self):
+    dsl = self.get_content()
+    
+    # Step 1: Parse DSL
+    try:
+      scoped_rules = parse_dsl(dsl)
+    except DSLSyntaxError as e:
+      logger.debug(f"DSL syntax error, keeping old formatting: {e}")
+      return
+    
+    # Step 2: Group rules by scope
+    columns_rules = defaultdict(list)  # key = column name
+    rows_rules = defaultdict(list)  # key = row index
+    cells_rules = defaultdict(list)  # key = cell_id
+    table_rules = []  # rules for this table
+    tables_rules = []  # global rules for all tables
+
+    for scoped_rule in scoped_rules:
+      scope = scoped_rule.scope
+      rule = scoped_rule.rule
+
+      if isinstance(scope, ColumnScope):
+        columns_rules[scope.column].append(rule)
+      elif isinstance(scope, RowScope):
+        rows_rules[scope.row].append(rule)
+      elif isinstance(scope, CellScope):
+        cell_id = self._get_cell_id(scope)
+        if cell_id:
+          cells_rules[cell_id].append(rule)
+      elif isinstance(scope, TableScope):
+        # Validate table name matches current grid
+        if scope.table == self._parent.get_table_name():
+          table_rules.append(rule)
+        else:
+          logger.warning(f"Table name '{scope.table}' does not match grid name '{self._parent.get_table_name()}', skipping rules")
+      elif isinstance(scope, TablesScope):
+        tables_rules.append(rule)
+    
+    # Step 3: Copy state for atomic update
+    state = self._parent.get_state().copy()
+    
+    # Step 4: Clear existing formats on the copy
+    for col in state.columns:
+      col.format = None
+    for row in state.rows:
+      row.format = None
+    state.cell_formats.clear()
+    state.table_format = []
+    
+    # Step 5: Apply grouped rules on the copy
+    for column_name, rules in columns_rules.items():
+      col_pos, col_def = self._find_column_by_name(column_name)
+      if col_def:
+        # Find the column in the copied state
+        state.columns[col_pos].format = rules
+      else:
+        logger.warning(f"Column '{column_name}' not found, skipping rules")
+    
+    for row_index, rules in rows_rules.items():
+      row_state = next((r for r in state.rows if r.row_id == row_index), None)
+      if row_state is None:
+        row_state = DataGridRowState(row_id=row_index)
+        state.rows.append(row_state)
+      row_state.format = rules
+    
+    for cell_id, rules in cells_rules.items():
+      state.cell_formats[cell_id] = rules
+
+    # Apply table-level rules
+    if table_rules:
+      state.table_format = table_rules
+
+    # Apply global tables-level rules to manager
+    if tables_rules:
+      from myfasthtml.controls.DataGridsManager import DataGridsManager
+      manager = InstancesManager.get_by_type(self._session, DataGridsManager)
+      if manager:
+        manager.all_tables_formats = tables_rules
+
+    # Step 6: Update state atomically
+    self._parent.get_state().update(state)
+
+    # Step 7: Refresh the DataGrid
+    logger.debug(f"Formatting applied: {len(columns_rules)} columns, {len(rows_rules)} rows, {len(cells_rules)} cells, table: {len(table_rules)}, tables: {len(tables_rules)}")
+    return self._parent.render_partial("body")

src/myfasthtml/controls/DataGridFormulaEditor.py

@@ -0,0 +1,66 @@
+"""
+DataGridFormulaEditor — DslEditor for formula column expressions.
+
+Extends DslEditor with formula-specific behavior:
+- Parses the formula on content change
+- Registers the formula with FormulaEngine
+- Triggers a body re-render on the parent DataGrid
+"""
+import logging
+
+from myfasthtml.controls.DslEditor import DslEditor
+from myfasthtml.core.formula.dsl.definition import FormulaDSL
+
+logger = logging.getLogger("DataGridFormulaEditor")
+
+
+class DataGridFormulaEditor(DslEditor):
+  """
+  Formula editor for a specific DataGrid column.
+
+  Args:
+      parent: The parent DataGrid instance.
+      col_def: The DataGridColumnState for the formula column.
+      conf: DslEditorConf for CodeMirror configuration.
+      _id: Optional instance ID.
+  """
+  
+  def __init__(self, parent, conf=None, _id=None):
+    super().__init__(parent, FormulaDSL(), conf=conf, _id=_id)
+  
+  # def on_content_changed(self):
+  #   """
+  #   Called when the formula text is changed in the editor.
+  #
+  #   1. Updates col_def.formula with the new text.
+  #   2. Registers the formula with the FormulaEngine.
+  #   3. Triggers a body re-render of the parent DataGrid.
+  #   """
+  #   formula_text = self.get_content()
+  #
+  #   # Update the column definition
+  #   self._col_def.formula = formula_text or ""
+  #
+  #   # Register with the FormulaEngine
+  #   engine = self._parent.get_formula_engine()
+  #   if engine is not None:
+  #     table = self._parent.get_table_name()
+  #     try:
+  #       engine.set_formula(table, self._col_def.col_id, formula_text)
+  #       logger.debug(
+  #         "Formula updated for %s.%s: %s",
+  #         table, self._col_def.col_id, formula_text,
+  #       )
+  #     except FormulaSyntaxError as e:
+  #       logger.debug("Formula syntax error, keeping old formula: %s", e)
+  #       return
+  #     except FormulaCycleError as e:
+  #       logger.warning("Formula cycle detected for %s.%s: %s", table, self._col_def.col_id, e)
+  #       return
+  #     except Exception as e:
+  #       logger.warning("Formula engine error for %s.%s: %s", table, self._col_def.col_id, e)
+  #       return
+  #
+  #   # Save state and re-render the grid body
+  #   self._parent.save_state()
+  #   return self._parent.render_partial("body")

src/myfasthtml/controls/DataGridQuery.py

@@ -0,0 +1,97 @@
+import logging
+from typing import Optional
+
+from fasthtml.components import *
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+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 import brain_circuit20_regular
+from myfasthtml.icons.fluent_p1 import filter20_regular, search20_regular
+from myfasthtml.icons.fluent_p2 import dismiss_circle20_regular
+
+logger = logging.getLogger("DataGridQuery")
+
+DG_QUERY_FILTER = "filter"
+DG_QUERY_SEARCH = "search"
+DG_QUERY_AI = "ai"
+
+query_type = {
+    DG_QUERY_FILTER: filter20_regular,
+    DG_QUERY_SEARCH: search20_regular,
+    DG_QUERY_AI: brain_circuit20_regular
+}
+
+
+class DataGridFilterState(DbObject):
+  def __init__(self, owner):
+    with self.initializing():
+      super().__init__(owner)
+      self.filter_type: str = "filter"
+      self.query: Optional[str] = None
+
+
+class Commands(BaseCommands):
+  def change_filter_type(self):
+    return Command("ChangeFilterType",
+                   "Change filter type",
+                   self._owner,
+                   self._owner.change_query_type).htmx(target=f"#{self._id}")
+  
+  def on_filter_changed(self):
+    return Command("QueryChanged",
+                   "Query changed",
+                   self._owner,
+                   self._owner.query_changed).htmx(target=None)
+  
+  def on_cancel_query(self):
+    return Command("CancelQuery",
+                   "Cancel query",
+                   self._owner,
+                   self._owner.query_changed,
+                   kwargs={"query": ""}
+                   ).htmx(target=f"#{self._id}")
+
+
+class DataGridQuery(MultipleInstance):
+  def __init__(self, parent, _id=None):
+    super().__init__(parent, _id=_id)
+    self.commands = Commands(self)
+    self._state = DataGridFilterState(self)
+  
+  def get_query(self):
+    return self._state.query
+  
+  def get_query_type(self):
+    return self._state.filter_type
+  
+  def change_query_type(self):
+    keys = list(query_type.keys())  # ["filter", "search", "ai"]
+    current_idx = keys.index(self._state.filter_type)
+    self._state.filter_type = keys[(current_idx + 1) % len(keys)]
+    return self
+  
+  def query_changed(self, query):
+    logger.debug(f"query_changed {query=}")
+    self._state.query = query.strip() if query is not None else None
+    return self
+  
+  def render(self):
+    return Div(
+      mk.label(
+        Input(name="query",
+              value=self._state.query if self._state.query is not None else "",
+              placeholder="Search...",
+              **self.commands.on_filter_changed().get_htmx_params(values_encode="json")),
+        icon=mk.icon(query_type[self._state.filter_type], command=self.commands.change_filter_type()),
+        cls="input input-xs flex gap-3"
+      ),
+      mk.icon(dismiss_circle20_regular, size=24, command=self.commands.on_cancel_query()),
+      cls="flex",
+      id=self._id
+    )
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/DataGridsManager.py

@@ -0,0 +1,444 @@
+import uuid
+from dataclasses import dataclass
+from io import BytesIO
+
+import pandas as pd
+from fasthtml.components import Div
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.DataGrid import DataGrid, DatagridConf
+from myfasthtml.controls.FileUpload import FileUpload
+from myfasthtml.controls.TabsManager import TabsManager
+from myfasthtml.controls.TreeView import TreeView, TreeNode, TreeViewConf
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.DataGridsRegistry import DataGridsRegistry
+from myfasthtml.core.commands import Command
+from myfasthtml.core.dbmanager import DbObject
+from myfasthtml.core.formatting.dsl.completion.provider import DatagridMetadataProvider
+from myfasthtml.core.formatting.presets import DEFAULT_STYLE_PRESETS, DEFAULT_FORMATTER_PRESETS
+from myfasthtml.core.formula.engine import FormulaEngine
+from myfasthtml.core.instances import InstancesManager, SingleInstance
+from myfasthtml.icons.fluent_p1 import table_add20_regular
+from myfasthtml.icons.fluent_p3 import folder_open20_regular
+
+
+@dataclass
+class DocumentDefinition:
+  document_id: str
+  namespace: str
+  name: str
+  type: str  # table, card,
+  tab_id: str
+  datagrid_id: str
+
+
+class DataGridsState(DbObject):
+  def __init__(self, owner, name=None):
+    super().__init__(owner, name=name)
+    with self.initializing():
+      self.elements: list[DocumentDefinition] = []
+
+
+class Commands(BaseCommands):
+  def upload_from_source(self):
+    return Command("UploadFromSource",
+                   "Upload from source",
+                   self._owner,
+                   self._owner.upload_from_source).htmx(target=None)
+  
+  def new_grid(self):
+    return Command("NewGrid",
+                   "New grid",
+                   self._owner,
+                   self._owner.new_grid).htmx(target=f"#{self._owner._tree.get_id()}")
+  
+  def open_from_excel(self, tab_id, file_upload):
+    return Command("OpenFromExcel",
+                   "Open from Excel",
+                   self._owner,
+                   self._owner.open_from_excel,
+                   args=[tab_id,
+                         file_upload]).htmx(target=f"#{self._owner._tree.get_id()}")
+  
+  def clear_tree(self):
+    return Command("ClearTree",
+                   "Clear tree",
+                   self._owner,
+                   self._owner.clear_tree).htmx(target=f"#{self._owner._tree.get_id()}")
+  
+  def show_document(self):
+    return Command("ShowDocument",
+                   "Show document",
+                   self._owner,
+                   self._owner.select_document,
+                   key="SelectNode")
+  
+  def delete_grid(self):
+    return Command("DeleteGrid",
+                   "Delete grid",
+                   self._owner,
+                   self._owner.delete_grid,
+                   key="DeleteNode")
+
+
+class DataGridsManager(SingleInstance, DatagridMetadataProvider):
+  
+  def __init__(self, parent, _id=None):
+    if not getattr(self, "_is_new_instance", False):
+      # Skip __init__ if instance already existed
+      return
+    super().__init__(parent, _id=_id)
+    self.commands = Commands(self)
+    self._state = DataGridsState(self)
+    self._tree = self._mk_tree()
+    self._tree.bind_command("SelectNode", self.commands.show_document())
+    self._tree.bind_command("DeleteNode", self.commands.delete_grid(), when="before")
+    self._tabs_manager = InstancesManager.get_by_type(self._session, TabsManager, None)
+    self._registry = DataGridsRegistry(parent)
+    
+    # Global presets shared across all DataGrids
+    self.style_presets: dict = DEFAULT_STYLE_PRESETS.copy()
+    self.formatter_presets: dict = DEFAULT_FORMATTER_PRESETS.copy()
+    self.all_tables_formats: list = []
+    
+    # Formula engine shared across all DataGrids in this session
+    self._formula_engine = FormulaEngine(
+      registry_resolver=self._resolve_store_for_table
+    )
+  
+  def upload_from_source(self):
+    file_upload = FileUpload(self)
+    tab_id = self._tabs_manager.create_tab("Upload Datagrid", file_upload)
+    file_upload.set_on_ok(self.commands.open_from_excel(tab_id, file_upload))
+    return self._tabs_manager.show_tab(tab_id)
+  
+  def _create_and_register_grid(self, namespace: str, name: str, df: pd.DataFrame) -> DataGrid:
+    """
+    Create and register a DataGrid.
+
+    Args:
+        namespace: Grid namespace
+        name: Grid name
+        df: DataFrame to initialize the grid with
+
+    Returns:
+        Created DataGrid instance
+    """
+    dg_conf = DatagridConf(namespace=namespace, name=name)
+    dg = DataGrid(self, conf=dg_conf, save_state=True)
+    dg.init_from_dataframe(df)
+    self._registry.put(namespace, name, dg.get_id())
+    return dg
+  
+  def _create_document(self, namespace: str, name: str, datagrid: DataGrid, tab_id: str = None) -> tuple[
+    str, DocumentDefinition]:
+    """
+    Create a DocumentDefinition and its associated tab.
+
+    Args:
+        namespace: Document namespace
+        name: Document name
+        datagrid: Associated DataGrid instance
+        tab_id: Optional existing tab ID. If None, creates a new tab
+
+    Returns:
+        Tuple of (tab_id, document)
+    """
+    if tab_id is None:
+      tab_id = self._tabs_manager.create_tab(name, datagrid)
+    
+    document = DocumentDefinition(
+      document_id=str(uuid.uuid4()),
+      namespace=namespace,
+      name=name,
+      type="excel",
+      tab_id=tab_id,
+      datagrid_id=datagrid.get_id()
+    )
+    self._state.elements = self._state.elements + [document]
+    return tab_id, document
+  
+  def _add_document_to_tree(self, document: DocumentDefinition, parent_id: str) -> TreeNode:
+    """
+    Add a document to the tree view.
+
+    Args:
+        document: Document to add
+        parent_id: Parent node ID in the tree
+
+    Returns:
+        Created TreeNode
+    """
+    tree_node = TreeNode(
+      id=document.document_id,
+      label=document.name,
+      type=document.type,
+      parent=parent_id,
+      bag=document.document_id
+    )
+    self._tree.add_node(tree_node, parent_id=parent_id)
+    return tree_node
+  
+  def new_grid(self):
+    # Determine parent folder
+    selected_id = self._tree.get_selected_id()
+    if selected_id is None:
+      parent_id = self._tree.ensure_path("Untitled")
+    else:
+      node = self._tree._state.items[selected_id]
+      if node.type == "folder":
+        parent_id = selected_id
+      else:  # leaf
+        parent_id = node.parent
+    
+    # Get namespace and generate unique name
+    namespace = self._tree._state.items[parent_id].label
+    name = self._generate_unique_sheet_name(parent_id)
+    
+    # Create and register DataGrid
+    dg = self._create_and_register_grid(namespace, name, pd.DataFrame())
+    
+    # Create document and tab
+    tab_id, document = self._create_document(namespace, name, dg)
+    
+    # Add to tree
+    self._add_document_to_tree(document, parent_id)
+    
+    # UI-specific handling: open parent, select node, start rename
+    if parent_id not in self._tree._state.opened:
+      self._tree._state.opened.append(parent_id)
+    self._tree._state.selected = document.document_id
+    self._tree._start_rename(document.document_id)
+    
+    return self._tree, self._tabs_manager.show_tab(tab_id)
+  
+  def _generate_unique_sheet_name(self, parent_id: str) -> str:
+    children = self._tree._state.items[parent_id].children
+    existing_labels = {self._tree._state.items[c].label for c in children}
+    n = 1
+    while f"Sheet{n}" in existing_labels:
+      n += 1
+    return f"Sheet{n}"
+  
+  def open_from_excel(self, tab_id, file_upload: FileUpload):
+    # Read Excel data
+    excel_content = file_upload.get_content()
+    df = pd.read_excel(BytesIO(excel_content), file_upload.get_sheet_name())
+    namespace = file_upload.get_file_basename()
+    name = file_upload.get_sheet_name()
+    
+    # Create and register DataGrid
+    dg = self._create_and_register_grid(namespace, name, df)
+    
+    # Create document with existing tab
+    tab_id, document = self._create_document(namespace, name, dg, tab_id=tab_id)
+    
+    # Add to tree
+    parent_id = self._tree.ensure_path(document.namespace)
+    self._add_document_to_tree(document, parent_id)
+    
+    return self._mk_tree(), self._tabs_manager.change_tab_content(tab_id, document.name, dg)
+  
+  def select_document(self, node_id):
+    document_id = self._tree.get_bag(node_id)
+    try:
+      document = next(filter(lambda x: x.document_id == document_id, self._state.elements))
+      dg = DataGrid(self, _id=document.datagrid_id)  # reload the state & settings
+      return self._tabs_manager.show_or_create_tab(document.tab_id, document.name, dg)
+    except StopIteration:
+      # the selected node is not a document (it's a folder)
+      return None
+  
+  def delete_grid(self, node_id):
+    """
+    Delete a grid and all its associated resources.
+
+    This method is called BEFORE TreeView._delete_node() to ensure we can
+    access the node's bag to retrieve the document_id.
+
+    Args:
+        node_id: ID of the TreeView node to delete
+
+    Returns:
+        None (TreeView will handle the node removal)
+    """
+    document_id = self._tree.get_bag(node_id)
+    if document_id is None:
+      # Node is a folder, not a document - nothing to clean up
+      return None
+    
+    res = []
+    try:
+      # Find the document
+      document = next(filter(lambda x: x.document_id == document_id, self._state.elements))
+      
+      # Get the DataGrid instance
+      dg = DataGrid(self, _id=document.datagrid_id)
+      
+      # Close the tab
+      close_tab_res = self._tabs_manager.close_tab(document.tab_id)
+      res.append(close_tab_res)
+      
+      # Remove from registry
+      self._registry.remove(document.datagrid_id)
+      
+      # Clean up DataGrid (delete DBEngine entries)
+      dg.delete()
+      
+      # Remove from InstancesManager
+      InstancesManager.remove(self._session, document.datagrid_id)
+      
+      # Remove DocumentDefinition from state
+      self._state.elements = [d for d in self._state.elements if d.document_id != document_id]
+      self._state.save()
+    
+    except StopIteration:
+      # Document not found - already deleted or invalid state
+      pass
+    
+    return res
+  
+  def create_tab_content(self, tab_id):
+    """
+    Recreate the content for a tab managed by this DataGridsManager.
+    Called by TabsManager when the content is not in cache (e.g., after restart).
+
+    Args:
+        tab_id: ID of the tab to recreate content for
+
+    Returns:
+        The recreated component (Panel with DataGrid)
+    """
+    # Find the document associated with this tab
+    document = next((d for d in self._state.elements if d.tab_id == tab_id), None)
+    
+    if document is None:
+      raise ValueError(f"No document found for tab {tab_id}")
+    
+    # Recreate the DataGrid with its saved state
+    dg = DataGrid(self, _id=document.datagrid_id)  # reload the state & settings
+    return dg
+  
+  def clear_tree(self):
+    self._state.elements = []
+    self._tree.clear()
+    return self._tree
+  
+  # === DatagridMetadataProvider ===
+  
+  def list_tables(self):
+    return self._registry.get_all_tables()
+  
+  def list_columns(self, table_name):
+    return self._registry.get_columns(table_name)
+  
+  def list_column_values(self, table_name, column_name):
+    return self._registry.get_column_values(table_name, column_name)
+  
+  def get_row_count(self, table_name):
+    return self._registry.get_row_count(table_name)
+  
+  def get_column_type(self, table_name, column_name):
+    return self._registry.get_column_type(table_name, column_name)
+  
+  def list_style_presets(self) -> list[str]:
+    return list(self.style_presets.keys())
+  
+  def list_format_presets(self) -> list[str]:
+    return list(self.formatter_presets.keys())
+  
+  def _resolve_store_for_table(self, table_name: str):
+    """
+    Resolve the DatagridStore for a given table name.
+
+    Used by FormulaEngine as the registry_resolver callback.
+
+    Args:
+        table_name: Full table name in ``"namespace.name"`` format.
+
+    Returns:
+        DatagridStore instance or None if not found.
+    """
+    try:
+      as_fullname_dict = self._registry._get_entries_as_full_name_dict()
+      grid_id = as_fullname_dict.get(table_name)
+      if grid_id is None:
+        return None
+      datagrid = InstancesManager.get(self._session, grid_id, None)
+      if datagrid is None:
+        return None
+      return datagrid._df_store
+    except Exception:
+      return None
+  
+  def get_style_presets(self) -> dict:
+    """Get the global style presets."""
+    return self.style_presets
+  
+  def get_formatter_presets(self) -> dict:
+    """Get the global formatter presets."""
+    return self.formatter_presets
+  
+  def get_formula_engine(self) -> FormulaEngine:
+    """The FormulaEngine shared across all DataGrids in this session."""
+    return self._formula_engine
+  
+  def add_style_preset(self, name: str, preset: dict):
+    """
+    Add or update a style preset.
+
+    Args:
+        name: Preset name (e.g., "custom_highlight")
+        preset: Dict with CSS properties (e.g., {"background-color": "yellow", "color": "black"})
+    """
+    self.style_presets[name] = preset
+  
+  def add_formatter_preset(self, name: str, preset: dict):
+    """
+    Add or update a formatter preset.
+
+    Args:
+        name: Preset name (e.g., "custom_currency")
+        preset: Dict with formatter config (e.g., {"type": "number", "prefix": "CHF ", "precision": 2})
+    """
+    self.formatter_presets[name] = preset
+  
+  def remove_style_preset(self, name: str):
+    """Remove a style preset."""
+    if name in self.style_presets:
+      del self.style_presets[name]
+  
+  def remove_formatter_preset(self, name: str):
+    """Remove a formatter preset."""
+    if name in self.formatter_presets:
+      del self.formatter_presets[name]
+  
+  # === UI ===
+  
+  def mk_main_icons(self):
+    return Div(
+      mk.icon(folder_open20_regular, tooltip="Upload from source", command=self.commands.upload_from_source()),
+      mk.icon(table_add20_regular, tooltip="New grid", command=self.commands.new_grid()),
+      cls="flex"
+    )
+  
+  def _mk_tree(self):
+    conf = TreeViewConf(add_leaf=False, icons={"folder": "database20_regular", "excel": "table20_regular"})
+    tree = TreeView(self, conf=conf, _id="-treeview")
+    for element in self._state.elements:
+      parent_id = tree.ensure_path(element.namespace, node_type="folder")
+      tree.add_node(TreeNode(id=element.document_id,
+                             label=element.name,
+                             type=element.type,
+                             parent=parent_id,
+                             bag=element.document_id))
+    return tree
+  
+  def render(self):
+    return Div(
+      self._tree,
+      id=self._id,
+    )
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/Dropdown.py

@@ -10,10 +10,16 @@ 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")
+    return Command("Close",
+                   "Close Dropdown",
+                   self._owner,
+                   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")
+    return Command("Click",
+                   "Click on Dropdown",
+                   self._owner,
+                   self._owner.on_click).htmx(target=f"#{self._owner.get_id()}-content")
 
 
 class DropdownState:
@@ -22,13 +28,44 @@ class DropdownState:
 
 
 class Dropdown(MultipleInstance):
-  def __init__(self, parent, content=None, button=None, _id=None):
+  """
+  Interactive dropdown component that toggles open/closed on button click.
+
+  Provides automatic close behavior when clicking outside or pressing ESC.
+  Supports configurable positioning relative to the trigger button.
+
+  Args:
+      parent: Parent instance (required).
+      content: Content to display in the dropdown panel.
+      button: Trigger element that toggles the dropdown.
+      _id: Custom ID for the instance.
+      position: Vertical position relative to button.
+          - "below" (default): Dropdown appears below the button.
+          - "above": Dropdown appears above the button.
+      align: Horizontal alignment relative to button.
+          - "left" (default): Aligns to the left edge of the button.
+          - "right": Aligns to the right edge of the button.
+          - "center": Centers relative to the button.
+
+  Example:
+      dropdown = Dropdown(
+          parent=root,
+          button=Button("Menu"),
+          content=Ul(Li("Option 1"), Li("Option 2")),
+          position="below",
+          align="right"
+      )
+  """
+
+  def __init__(self, parent, content=None, button=None, _id=None,
+               position="below", align="left"):
     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()
-    self._toggle_command = self.commands.toggle()
+    self._position = position
+    self._align = align
   
   def toggle(self):
     self._state.opened = not self._state.opened
@@ -38,57 +75,32 @@ class Dropdown(MultipleInstance):
     self._state.opened = False
     return self._mk_content()
   
-  def on_click(self, combination, is_inside: bool):
+  def on_click(self, combination, is_inside: bool, is_button: bool = False):
     if combination == "click":
-      self._state.opened = is_inside
+      if is_button:
+        self._state.opened = not self._state.opened
+      else:
+        self._state.opened = is_inside
     return self._mk_content()
   
   def _mk_content(self):
+    position_cls = f"mf-dropdown-{self._position}"
+    align_cls = f"mf-dropdown-{self._align}"
     return Div(self.content,
-               cls=f"mf-dropdown {'is-visible' if self._state.opened else ''}",
+               cls=f"mf-dropdown {position_cls} {align_cls} {'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"),
+        Div(self.button if self.button else "None", cls="mf-dropdown-btn"),
         self._mk_content(),
         cls="mf-dropdown-wrapper"
       ),
-      Keyboard(self, "-keyboard").add("esc", self.commands.close()),
-      Mouse(self, "-mouse").add("click", self.commands.click()),
+      Keyboard(self, _id="-keyboard").add("esc", self.commands.close(), require_inside=True),
+      Mouse(self, "-mouse").add("click", self.commands.click(), hx_vals="js:getDropdownExtra()"),
       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/DslEditor.py

@@ -0,0 +1,222 @@
+"""
+DslEditor control - A CodeMirror wrapper for DSL editing.
+
+Provides syntax highlighting, line numbers, and autocompletion
+for domain-specific languages defined with Lark grammars.
+"""
+
+import json
+import logging
+from dataclasses import dataclass
+from typing import Optional
+
+from fasthtml.common import Script
+from fasthtml.components import *
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.core.dbmanager import DbObject
+from myfasthtml.core.dsl.base import DSLDefinition
+from myfasthtml.core.instances import MultipleInstance
+
+logger = logging.getLogger("DslEditor")
+
+
+@dataclass
+class DslEditorConf:
+  """Configuration for DslEditor."""
+  name: str = None
+  line_numbers: bool = True
+  autocompletion: bool = True
+  linting: bool = True
+  placeholder: str = ""
+  readonly: bool = False
+  engine_id: str = None  # id of the DSL engine to use for autocompletion
+  save_button: bool = True
+
+
+class DslEditorState(DbObject):
+  """Non-persisted state for DslEditor."""
+  
+  def __init__(self, owner, name, save_state):
+    with self.initializing():
+      super().__init__(owner, name=name, save_state=save_state)
+      self.content: str = ""
+      self.auto_save: bool = True
+
+
+class Commands(BaseCommands):
+  """Commands for DslEditor interactions."""
+  
+  def update_content(self):
+    """Command to update content from CodeMirror."""
+    return Command(
+      "UpdateContent",
+      "Update editor content",
+      self._owner,
+      self._owner.update_content,
+    ).htmx(target=f"#{self._id}", swap="none")
+  
+  def toggle_auto_save(self):
+    return Command("ToggleAutoSave",
+                   "Toggle auto save",
+                   self._owner,
+                   self._owner.toggle_auto_save).htmx(target=f"#as_{self._id}", trigger="click")
+  
+  def save_content(self):
+    return Command("SaveContent",
+                   "Save content",
+                   self._owner,
+                   self._owner.save_content
+                   ).htmx(target=None)
+
+
+class DslEditor(MultipleInstance):
+  """
+  CodeMirror wrapper for editing DSL code.
+
+  Provides:
+  - Syntax highlighting based on DSL grammar
+  - Line numbers
+  - Autocompletion from grammar keywords/operators
+
+  Args:
+      parent: Parent instance.
+      dsl: DSL definition providing grammar and completions.
+      conf: Editor configuration.
+      _id: Optional custom ID.
+  """
+  
+  def __init__(
+      self,
+      parent,
+      dsl: DSLDefinition,
+      conf: Optional[DslEditorConf] = None,
+      save_state: bool = True,
+      _id: Optional[str] = None,
+  ):
+    super().__init__(parent, _id=_id)
+    
+    self._dsl = dsl
+    self.conf = conf or DslEditorConf()
+    self._state = DslEditorState(self, name=self.conf.name, save_state=save_state)
+    self.commands = Commands(self)
+    
+    logger.debug(f"DslEditor created with id={self._id}, dsl={dsl.name}")
+  
+  def set_content(self, content: str):
+    """Set the editor content programmatically."""
+    self._state.content = content
+    return self
+  
+  def get_content(self) -> str:
+    """Get the current editor content."""
+    return self._state.content
+  
+  def update_content(self, content: str = ""):
+    """Handler for content update from CodeMirror."""
+    self._state.content = content
+    logger.debug(f"Content updated: {len(content)} chars")
+    
+    if self._state.auto_save:
+      return None, self.on_content_changed()  # on_content_changed must be second to benefit from oob swap
+    
+    return None
+  
+  def save_content(self):
+    logger.debug("save_content")
+    return None, self.on_content_changed()  # on_content_changed must be second to benefit from oob swap
+  
+  def toggle_auto_save(self):
+    logger.debug("toggle_auto_save")
+    self._state.auto_save = not self._state.auto_save
+    logger.debug(f"  auto_save={self._state.auto_save}")
+    return self._mk_auto_save()
+  
+  def on_content_changed(self) -> None:
+    pass
+  
+  def _get_editor_config(self) -> dict:
+    """Build the JavaScript configuration object."""
+    # Get Simple Mode config if available
+    simple_mode_config = None
+    if hasattr(self._dsl, 'simple_mode_config'):
+      simple_mode_config = self._dsl.simple_mode_config
+    
+    config = {
+        "elementId": str(self._id),
+        "textareaId": f"ta_{self._id}",
+        "lineNumbers": self.conf.line_numbers,
+        "autocompletion": self.conf.autocompletion,
+        "linting": self.conf.linting,
+        "placeholder": self.conf.placeholder,
+        "readonly": self.conf.readonly,
+        "updateCommandId": str(self.commands.update_content().id),
+        "dslId": self.conf.engine_id,
+        "dsl": {
+            "name": self._dsl.name,
+            "completions": self._dsl.completions,
+            "simpleModeConfig": simple_mode_config,
+        },
+    }
+    return config
+  
+  def _mk_textarea(self):
+    """Create the hidden textarea for form submission."""
+    return Textarea(
+      self._state.content,
+      id=f"ta_{self._id}",
+      name=self.conf.name if (self.conf and self.conf.name) else f"ta_{self._id}",
+      cls="hidden",
+    )
+  
+  def _mk_editor_container(self):
+    """Create the container where CodeMirror will be mounted."""
+    return Div(
+      id=f"cm_{self._id}",
+      cls="mf-dsl-editor",
+    )
+  
+  def _mk_init_script(self):
+    """Create the initialization script."""
+    config = self._get_editor_config()
+    config_json = json.dumps(config)
+    return Script(f"initDslEditor({config_json});")
+  
+  def _mk_auto_save(self):
+    if not self.conf.save_button:
+      return None
+    return Div(
+      Label(
+        mk.mk(
+          Input(type="checkbox",
+                checked="on" if self._state.auto_save else None,
+                cls="toggle toggle-xs"),
+          command=self.commands.toggle_auto_save()
+        ),
+        "Auto Save",
+        cls="text-xs",
+      ),
+      mk.button("Save",
+                cls="btn btn-xs btn-primary",
+                disabled="disabled" if self._state.auto_save else None,
+                command=self.commands.save_content()),
+      cls="flex justify-between items-center p-2",
+      id=f"as_{self._id}",
+    ),
+  
+  def render(self):
+    """Render the DslEditor component."""
+    return Div(
+      self._mk_auto_save(),
+      self._mk_textarea(),
+      self._mk_editor_container(),
+      self._mk_init_script(),
+      id=self._id,
+      cls="mf-dsl-editor-wrapper",
+    )
+  
+  def __ft__(self):
+    """FastHTML magic method for rendering."""
+    return self.render()

src/myfasthtml/controls/FileUpload.py

@@ -6,7 +6,7 @@ from fastapi import UploadFile
 from fasthtml.components import *
 
 from myfasthtml.controls.BaseCommands import BaseCommands
-from myfasthtml.controls.helpers import Ids, mk
+from myfasthtml.controls.helpers import mk
 from myfasthtml.core.commands import Command
 from myfasthtml.core.dbmanager import DbObject
 from myfasthtml.core.instances import MultipleInstance
@@ -24,32 +24,62 @@ class FileUploadState(DbObject):
       self.ns_file_name: str | None = None
       self.ns_sheets_names: list | None = None
       self.ns_selected_sheet_name: str | None = None
+      self.ns_file_content: bytes | None = None
+      self.ns_on_ok = None
+      self.ns_on_cancel = None
 
 
 class Commands(BaseCommands):
   def __init__(self, owner):
     super().__init__(owner)
   
-  def upload_file(self):
-    return Command("UploadFile", "Upload file", self._owner.upload_file).htmx(target=f"#sn_{self._id}")
+  def on_file_uploaded(self):
+    return Command("UploadFile",
+                   "Upload file",
+                   self._owner,
+                   self._owner.upload_file).htmx(target=f"#sn_{self._id}")
+  
+  def on_sheet_selected(self):
+    return Command("SheetSelected",
+                   "Sheet selected",
+                   self._owner,
+                   self._owner.select_sheet).htmx(target=f"#sn_{self._id}")
 
 
 class FileUpload(MultipleInstance):
+  """
+  Represents a file upload component.
+
+  This class provides functionality to handle the uploading process of a file,
+  extract sheet names from an Excel file, and enables users to select a specific
+  sheet for further processing. It integrates commands and state management
+  to ensure smooth operation within a parent application.
+  """
   
-  def __init__(self, parent, _id=None):
-    super().__init__(parent, _id=_id)
+  def __init__(self, parent, _id=None, **kwargs):
+    super().__init__(parent, _id=_id, **kwargs)
     self.commands = Commands(self)
     self._state = FileUploadState(self)
+    self._state.ns_on_ok = None
+  
+  def set_on_ok(self, callback):
+    self._state.ns_on_ok = callback
   
   def upload_file(self, file: UploadFile):
     logger.debug(f"upload_file: {file=}")
     if file:
-      file_content = file.file.read()
-      self._state.ns_sheets_names = self.get_sheets_names(file_content)
+      self._state.ns_file_content = file.file.read()
+      self._state.ns_file_name = file.filename
+      self._state.ns_sheets_names = self.get_sheets_names(self._state.ns_file_content)
       self._state.ns_selected_sheet_name = self._state.ns_sheets_names[0] if len(self._state.ns_sheets_names) > 0 else 0
     
     return self.mk_sheet_selector()
   
+  def select_sheet(self, sheet_name: str):
+    logger.debug(f"select_sheet: {sheet_name=}")
+    self._state.ns_selected_sheet_name = sheet_name
+    return self.mk_sheet_selector()
+  
   def mk_sheet_selector(self):
     options = [Option("Choose a file...", selected=True, disabled=True)] if self._state.ns_sheets_names is None else \
       [Option(
@@ -57,12 +87,27 @@ class FileUpload(MultipleInstance):
         selected=True if name == self._state.ns_selected_sheet_name else None,
       ) for name in self._state.ns_sheets_names]
     
-    return Select(
+    return mk.mk(Select(
       *options,
       name="sheet_name",
       id=f"sn_{self._id}",  # sn stands for 'sheet name'
       cls="select select-bordered select-sm w-full ml-2"
-    )
+    ), command=self.commands.on_sheet_selected())
+  
+  def get_content(self):
+    return self._state.ns_file_content
+  
+  def get_file_name(self):
+    return self._state.ns_file_name
+  
+  def get_file_basename(self):
+    if self._state.ns_file_name is None:
+      return None
+    
+    return self._state.ns_file_name.split(".")[0]
+  
+  def get_sheet_name(self):
+    return self._state.ns_selected_sheet_name
   
   @staticmethod
   def get_sheets_names(file_content):
@@ -86,12 +131,12 @@ class FileUpload(MultipleInstance):
                     hx_encoding='multipart/form-data',
                     cls="file-input file-input-bordered file-input-sm w-full",
                     ),
-              command=self.commands.upload_file()
+              command=self.commands.on_file_uploaded()
               ),
         self.mk_sheet_selector(),
         cls="flex"
       ),
-      mk.dialog_buttons(),
+      mk.dialog_buttons(on_ok=self._state.ns_on_ok, on_cancel=self._state.ns_on_cancel),
     )
   
   def __ft__(self):

src/myfasthtml/controls/HierarchicalCanvasGraph.py

@@ -0,0 +1,345 @@
+import json
+import logging
+from dataclasses import dataclass
+from typing import Optional
+
+from fasthtml.components import Div
+from fasthtml.xtend import Script
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+from myfasthtml.controls.Query import Query, QueryConf
+from myfasthtml.core.commands import Command
+from myfasthtml.core.dbmanager import DbObject
+from myfasthtml.core.instances import MultipleInstance
+
+logger = logging.getLogger("HierarchicalCanvasGraph")
+
+
+@dataclass
+class HierarchicalCanvasGraphConf:
+  """Configuration for HierarchicalCanvasGraph control.
+
+  Attributes:
+      nodes: List of node dictionaries with keys: id, label, type, kind
+      edges: List of edge dictionaries with keys: from, to
+      events_handlers: Optional dict mapping event names to Command objects
+                      Supported events: 'select_node', 'toggle_node'
+  """
+  nodes: list[dict]
+  edges: list[dict]
+  events_handlers: Optional[dict] = None
+
+
+class HierarchicalCanvasGraphState(DbObject):
+  """Persistent state for HierarchicalCanvasGraph.
+
+  Persists collapsed nodes, view transform (zoom/pan), and layout orientation.
+  """
+  
+  def __init__(self, owner, save_state=True):
+    super().__init__(owner, save_state=save_state)
+    with self.initializing():
+      # Persisted: set of collapsed node IDs (stored as list for JSON serialization)
+      self.collapsed: list = []
+      
+      # Persisted: zoom/pan transform
+      self.transform: dict = {"x": 0, "y": 0, "scale": 1}
+      
+      # Persisted: layout orientation ('horizontal' or 'vertical')
+      self.layout_mode: str = 'horizontal'
+      
+      # Persisted: filter state
+      self.filter_text: Optional[str] = None  # Text search filter
+      self.filter_type: Optional[str] = None  # Type filter (badge click)
+      self.filter_kind: Optional[str] = None  # Kind filter (border click)
+      
+      # Not persisted: current selection (ephemeral)
+      self.ns_selected_id: Optional[str] = None
+
+
+class Commands(BaseCommands):
+  """Commands for HierarchicalCanvasGraph internal state management."""
+  
+  def update_view_state(self):
+    """Update view transform and layout mode.
+
+    This command is called internally by the JS to persist view state changes.
+    """
+    return Command(
+      "UpdateViewState",
+      "Update view transform and layout mode",
+      self._owner,
+      self._owner._handle_update_view_state
+    ).htmx(target=f"#{self._id}", swap='none')
+  
+  def apply_filter(self):
+    """Apply current filter and update the graph display.
+
+    This command is called when the filter changes (search text, type, or kind).
+    """
+    return Command(
+      "ApplyFilter",
+      "Apply filter to graph",
+      self._owner,
+      self._owner._handle_apply_filter,
+      key="#{id}-apply-filter",
+    ).htmx(target=f"#{self._id}")
+
+
+class HierarchicalCanvasGraph(MultipleInstance):
+  """A canvas-based hierarchical graph visualization control.
+
+  Displays nodes and edges in a tree layout with expand/collapse functionality.
+  Uses HTML5 Canvas for rendering with stable zoom/pan and search filtering.
+
+  Features:
+  - Reingold-Tilford hierarchical layout
+  - Expand/collapse nodes with children
+  - Zoom and pan with mouse wheel and drag
+  - Search/filter nodes by label or kind
+  - Click to select nodes
+  - Dot grid background
+  - Stable zoom on container resize
+
+  Events:
+  - select_node: Fired when a node is clicked (not on toggle button)
+  - toggle_node: Fired when a node's expand/collapse button is clicked
+  """
+  
+  def __init__(self, parent, conf: HierarchicalCanvasGraphConf, _id=None):
+    """Initialize the HierarchicalCanvasGraph control.
+
+    Args:
+        parent: Parent instance
+        conf: Configuration object with nodes, edges, and event handlers
+        _id: Optional custom ID (auto-generated if not provided)
+    """
+    super().__init__(parent, _id=_id)
+    self.conf = conf
+    self._state = HierarchicalCanvasGraphState(self)
+    self.commands = Commands(self)
+    
+    # Add Query component for filtering
+    self._query = Query(self, QueryConf(placeholder="Filter instances..."), _id="-query")
+    self._query.bind_command("QueryChanged", self.commands.apply_filter())
+    self._query.bind_command("CancelQuery", self.commands.apply_filter())
+    
+    logger.debug(f"HierarchicalCanvasGraph created with id={self._id}, "
+                 f"nodes={len(conf.nodes)}, edges={len(conf.edges)}")
+  
+  def get_state(self):
+    """Get the control's persistent state.
+
+    Returns:
+        HierarchicalCanvasGraphState: The state object
+    """
+    return self._state
+  
+  def get_selected_id(self) -> Optional[str]:
+    """Get the currently selected node ID.
+
+    Returns:
+        str or None: The selected node ID, or None if no selection
+    """
+    return self._state.ns_selected_id
+  
+  def set_collapsed(self, node_ids: set):
+    """Set the collapsed state of nodes.
+
+    Args:
+        node_ids: Set of node IDs to mark as collapsed
+    """
+    self._state.collapsed = list(node_ids)
+    logger.debug(f"set_collapsed: {len(node_ids)} nodes collapsed")
+  
+  def toggle_node(self, node_id: str):
+    """Toggle the collapsed state of a node.
+
+    Args:
+        node_id: The ID of the node to toggle
+
+    Returns:
+        self: For chaining
+    """
+    collapsed_set = set(self._state.collapsed)
+    if node_id in collapsed_set:
+      collapsed_set.remove(node_id)
+      logger.debug(f"toggle_node: expanded {node_id}")
+    else:
+      collapsed_set.add(node_id)
+      logger.debug(f"toggle_node: collapsed {node_id}")
+    
+    self._state.collapsed = list(collapsed_set)
+    return self
+  
+  def _handle_update_view_state(self, transform=None, layout_mode=None):
+    """Internal handler to update view state from client.
+
+    Args:
+        transform: Optional dict with zoom/pan transform state
+        layout_mode: Optional string with layout orientation
+
+    Returns:
+        str: Empty string (no UI update needed)
+    """
+    if transform is not None:
+      self._state.transform = transform
+      logger.debug(f"Transform updated: {self._state.transform}")
+    
+    if layout_mode is not None:
+      self._state.layout_mode = layout_mode
+      logger.debug(f"Layout mode updated: {self._state.layout_mode}")
+    
+    return ""
+  
+  def _handle_apply_filter(self, query_param="text", value=None):
+    """Internal handler to apply filter and re-render the graph.
+
+    Args:
+        query_param: Type of filter - "text", "type", or "kind"
+        value: The filter value (type name or kind name). Toggles off if same value clicked again.
+
+    Returns:
+        self: For HTMX to render the updated graph
+    """
+    # Save old values to detect toggle
+    old_filter_type = self._state.filter_type
+    old_filter_kind = self._state.filter_kind
+    
+    # Reset all filters
+    self._state.filter_text = None
+    self._state.filter_type = None
+    self._state.filter_kind = None
+    
+    # Apply the requested filter
+    if query_param == "text":
+      # Text filter from Query component
+      self._state.filter_text = self._query.get_query()
+    
+    elif query_param == "type":
+      # Type filter from badge click - toggle if same type clicked again
+      if old_filter_type != value:
+        self._state.filter_type = value
+    
+    elif query_param == "kind":
+      # Kind filter from border click - toggle if same kind clicked again
+      if old_filter_kind != value:
+        self._state.filter_kind = value
+    
+    logger.debug(f"Applying filter: query_param={query_param}, value={value}, "
+                 f"text={self._state.filter_text}, type={self._state.filter_type}, kind={self._state.filter_kind}")
+    
+    return self
+  
+  def _calculate_filtered_nodes(self) -> Optional[list[str]]:
+    """Calculate which node IDs match the current filter criteria.
+
+    Returns:
+        Optional[list[str]]:
+            - None: No filter is active (all nodes visible, nothing dimmed)
+            - []: Filter active but no matches (all nodes dimmed)
+            - [ids]: Filter active with matches (only these nodes visible)
+    """
+    # If no filters are active, return None (no filtering)
+    if not self._state.filter_text and not self._state.filter_type and not self._state.filter_kind:
+      return None
+    
+    filtered_ids = []
+    for node in self.conf.nodes:
+      matches = True
+      
+      # Check text filter (searches in id, label, type, kind)
+      if self._state.filter_text:
+        search_text = self._state.filter_text.lower()
+        searchable = f"{node.get('id', '')} {node.get('label', '')} {node.get('type', '')} {node.get('kind', '')}".lower()
+        if search_text not in searchable:
+          matches = False
+      
+      # Check type filter
+      if self._state.filter_type and node.get('type') != self._state.filter_type:
+        matches = False
+      
+      # Check kind filter
+      if self._state.filter_kind and node.get('kind') != self._state.filter_kind:
+        matches = False
+      
+      if matches:
+        filtered_ids.append(node['id'])
+    
+    return filtered_ids
+  
+  def _prepare_options(self) -> dict:
+    """Prepare JavaScript options object.
+
+    Returns:
+        dict: Options to pass to the JS initialization function
+    """
+    # Convert event handlers to HTMX options
+    events = {}
+    
+    # Add internal handler for view state persistence
+    events['_internal_update_state'] = self.commands.update_view_state().ajax_htmx_options()
+    
+    # Add internal handlers for filtering by type and kind (badge/border clicks)
+    events['_internal_filter_by_type'] = self.commands.apply_filter().ajax_htmx_options()
+    events['_internal_filter_by_kind'] = self.commands.apply_filter().ajax_htmx_options()
+    
+    # Add user-provided event handlers
+    if self.conf.events_handlers:
+      for event_name, command in self.conf.events_handlers.items():
+        events[event_name] = command.ajax_htmx_options()
+    
+    # Calculate filtered nodes
+    filtered_nodes = self._calculate_filtered_nodes()
+    
+    return {
+        "nodes": self.conf.nodes,
+        "edges": self.conf.edges,
+        "collapsed": self._state.collapsed,
+        "transform": self._state.transform,
+        "layout_mode": self._state.layout_mode,
+        "filtered_nodes": filtered_nodes,
+        "events": events
+    }
+  
+  def render(self):
+    """Render the HierarchicalCanvasGraph control.
+
+    Returns:
+        Div: The rendered control with canvas and initialization script
+    """
+    options = self._prepare_options()
+    options_json = json.dumps(options, indent=2)
+    
+    return Div(
+      # Query filter bar
+      self._query,
+      
+      # Canvas element (sized by JS to fill container)
+      Div(
+        id=f"{self._id}_container",
+        cls="mf-hcg-container"
+      ),
+      
+      # Initialization script
+      Script(f"""
+        (function() {{
+          if (typeof initHierarchicalCanvasGraph === 'function') {{
+            initHierarchicalCanvasGraph('{self._id}_container', {options_json});
+          }} else {{
+            console.error('initHierarchicalCanvasGraph function not found');
+          }}
+        }})();
+      """),
+      
+      id=self._id,
+      cls="mf-hierarchical-canvas-graph"
+    )
+  
+  def __ft__(self):
+    """FastHTML magic method for rendering.
+
+    Returns:
+        Div: The rendered control
+    """
+    return self.render()

src/myfasthtml/controls/IconsHelper.py

@@ -0,0 +1,77 @@
+from myfasthtml.core.constants import ColumnType
+from myfasthtml.icons.fluent import question20_regular, brain_circuit20_regular, number_symbol20_regular, \
+  number_row20_regular
+from myfasthtml.icons.fluent_p1 import checkbox_checked20_regular, checkbox_unchecked20_regular, \
+  checkbox_checked20_filled, math_formula16_regular, folder20_regular, document20_regular
+from myfasthtml.icons.fluent_p2 import text_field20_regular, text_bullet_list_square20_regular
+from myfasthtml.icons.fluent_p3 import calendar_ltr20_regular
+
+default_icons = {
+    # default type icons
+    None: question20_regular,
+    True: checkbox_checked20_regular,
+    False: checkbox_unchecked20_regular,
+    
+    "Brain": brain_circuit20_regular,
+    
+    # TreeView icons
+    "TreeViewFolder": folder20_regular,
+    "TreeViewFile": document20_regular,
+    
+    # Datagrid column icons
+    ColumnType.RowIndex: number_symbol20_regular,
+    ColumnType.Text: text_field20_regular,
+    ColumnType.Number: number_row20_regular,
+    ColumnType.Datetime: calendar_ltr20_regular,
+    ColumnType.Bool: checkbox_checked20_filled,
+    ColumnType.Enum: text_bullet_list_square20_regular,
+    ColumnType.Formula: math_formula16_regular,
+}
+
+
+class IconsHelper:
+  _icons = default_icons.copy()
+  
+  @staticmethod
+  def get(name, package=None):
+    """
+    Fetches and returns an icon resource based on the provided name and optional package. If the icon is not already
+    cached, it will attempt to dynamically load the icon from the available modules under the `myfasthtml.icons` package.
+    This method uses an internal caching mechanism to store previously fetched icons for future quick lookups.
+
+    :param name: The name of the requested icon.
+    :param package: The optional sub-package to limit the search for the requested icon. If not provided, the method will
+        iterate through all available modules within the `myfasthtml.icons` package.
+    :return: The requested icon resource if found; otherwise, returns None.
+    :rtype: object or None
+    """
+    if name in IconsHelper._icons:
+      return IconsHelper._icons[name]
+    
+    import importlib
+    import pkgutil
+    import myfasthtml.icons as icons_pkg
+    
+    _UTILITY_MODULES = {'manage_icons', 'update_icons'}
+    
+    if package:
+      module = importlib.import_module(f"myfasthtml.icons.{package}")
+      icon = getattr(module, name, None)
+      if icon is not None:
+        IconsHelper._icons[name] = icon
+      return icon
+    
+    for _, modname, _ in pkgutil.iter_modules(icons_pkg.__path__):
+      if modname in _UTILITY_MODULES:
+        continue
+      module = importlib.import_module(f"myfasthtml.icons.{modname}")
+      icon = getattr(module, name, None)
+      if icon is not None:
+        IconsHelper._icons[name] = icon
+        return icon
+    
+    return None
+  
+  @staticmethod
+  def reset():
+    IconsHelper._icons = default_icons.copy()

src/myfasthtml/controls/InstancesDebugger.py

@@ -1,31 +1,182 @@
-from myfasthtml.controls.VisNetwork import VisNetwork
-from myfasthtml.core.instances import SingleInstance, InstancesManager
-from myfasthtml.core.network_utils import from_parent_child_list
+from dataclasses import dataclass
+
+from myfasthtml.controls.HierarchicalCanvasGraph import HierarchicalCanvasGraph, HierarchicalCanvasGraphConf
+from myfasthtml.controls.Panel import Panel
+from myfasthtml.controls.Properties import Properties
+from myfasthtml.core.commands import Command
+from myfasthtml.core.instances import SingleInstance, UniqueInstance, MultipleInstance, InstancesManager
+
+
+@dataclass
+class InstancesDebuggerConf:
+  """Configuration for InstancesDebugger control.
+
+  Attributes:
+      group_siblings_by_type: If True, sibling nodes (same parent) are grouped
+                             by their type for easier visual identification.
+                             Useful for detecting memory leaks. Default: True.
+  """
+  group_siblings_by_type: bool = True
 
 
 class InstancesDebugger(SingleInstance):
-  def __init__(self, parent, _id=None):
+  def __init__(self, parent, conf: InstancesDebuggerConf = None, _id=None):
     super().__init__(parent, _id=_id)
+    self.conf = conf if conf is not None else InstancesDebuggerConf()
+    self._panel = Panel(self, _id="-panel")
+    self._select_command = Command("ShowInstance",
+                                   "Display selected Instance",
+                                   self,
+                                   self.on_select_node).htmx(target=f"#{self._panel.get_ids().right}")
   
   def render(self):
-    s_name = InstancesManager.get_session_user_name
-    instances = self._get_instances()
-    nodes, edges = from_parent_child_list(
-      instances,
-      id_getter=lambda x: x.get_full_id(),
-      label_getter=lambda x: f"{x.get_id()}",
-      parent_getter=lambda x: x.get_full_parent_id()
+    nodes, edges = self._get_nodes_and_edges()
+    graph_conf = HierarchicalCanvasGraphConf(
+      nodes=nodes,
+      edges=edges,
+      events_handlers={
+          "select_node": self._select_command
+      }
     )
+    canvas_graph = HierarchicalCanvasGraph(self, conf=graph_conf, _id="-canvas-graph")
+    return self._panel.set_main(canvas_graph)
+  
+  def on_select_node(self, event_data: dict):
+    """Handle node selection event from canvas graph.
+
+    Args:
+        event_data: dict with keys: node_id, label, kind, type
+    """
+    node_id = event_data.get("node_id")
+    if not node_id:
+      return None
+    
+    # Parse full ID (session#instance_id)
+    parts = node_id.split("#")
+    session = parts[0]
+    instance_id = "#".join(parts[1:])
+    
+    properties_def = {
+        "Main": {"Id": "_id", "Parent Id": "_parent._id"},
+        "State": {"_name": "_state._name", "*": "_state"},
+        "Commands": {"*": "commands"},
+    }
+    
+    return self._panel.set_right(Properties(self,
+                                            InstancesManager.get(session, instance_id),
+                                            properties_def,
+                                            _id="-properties"))
+  
+  def _get_instance_kind(self, instance) -> str:
+    """Determine the instance kind for visualization.
+
+    Args:
+        instance: The instance object
+
+    Returns:
+        str: One of 'root', 'single', 'unique', 'multiple'
+    """
+    # Check if it's the RootInstance (special singleton)
+    if instance.get_parent() is None and instance.get_id() == "mf":
+      return 'root'
+    elif isinstance(instance, SingleInstance):
+      return 'single'
+    elif isinstance(instance, UniqueInstance):
+      return 'unique'
+    elif isinstance(instance, MultipleInstance):
+      return 'multiple'
+    else:
+      return 'multiple'  # Default
+  
+  def _get_nodes_and_edges(self):
+    """Build nodes and edges from current instances.
+
+    Returns:
+        tuple: (nodes, edges) where nodes include id, label, kind, type
+    """
+    instances = self._get_instances()
+    
+    nodes = []
+    edges = []
+    existing_ids = set()
+    
+    # Create nodes with kind (instance kind) and type (class name)
+    for instance in instances:
+      node_id = instance.get_full_id()
+      existing_ids.add(node_id)
+      
+      nodes.append({
+          "id": node_id,
+          "label": instance.get_id(),
+          "kind": self._get_instance_kind(instance),
+          "type": instance.__class__.__name__,
+          "description": instance.get_description()
+      })
+    
+    # Track nodes with parents
+    nodes_with_parent = set()
+    
+    # Create edges
+    for instance in instances:
+      node_id = instance.get_full_id()
+      parent_id = instance.get_parent_full_id()
+      
+      if parent_id is None or parent_id == "":
+        continue
+      
+      nodes_with_parent.add(node_id)
+      
+      edges.append({
+          "from": parent_id,
+          "to": node_id
+      })
+      
+      # Create ghost node if parent not in existing instances
+      if parent_id not in existing_ids:
+        nodes.append({
+            "id": parent_id,
+            "label": f"Ghost: {parent_id}",
+            "kind": "multiple",  # Default kind for ghost nodes
+            "type": "Ghost"
+        })
+        existing_ids.add(parent_id)
+    
+    # Group siblings by type if configured
+    if self.conf.group_siblings_by_type:
+      edges = self._sort_edges_by_sibling_type(nodes, edges)
+    
+    return nodes, edges
+  
+  def _sort_edges_by_sibling_type(self, nodes, edges):
+    """Sort edges so that siblings (same parent) are grouped by type.
+
+    Args:
+        nodes: List of node dictionaries
+        edges: List of edge dictionaries
+
+    Returns:
+        list: Sorted edges with siblings grouped by type
+    """
+    from collections import defaultdict
+    
+    # Create mapping node_id -> type for quick lookup
+    node_types = {node["id"]: node["type"] for node in nodes}
+    
+    # Group edges by parent
+    edges_by_parent = defaultdict(list)
     for edge in edges:
-      edge["color"] = "green"
-      edge["arrows"] = {"to": {"enabled": False, "type": "circle"}}
+      edges_by_parent[edge["from"]].append(edge)
     
-    for node in nodes:
-      node["shape"] = "box"
+    # Sort each parent's children by type and rebuild edges list
+    sorted_edges = []
+    for parent_id in edges_by_parent:
+      parent_edges = sorted(
+        edges_by_parent[parent_id],
+        key=lambda e: node_types.get(e["to"], "")
+      )
+      sorted_edges.extend(parent_edges)
     
-    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 sorted_edges
   
   def _get_instances(self):
     return list(InstancesManager.instances.values())

src/myfasthtml/controls/Keyboard.py

@@ -2,21 +2,31 @@ import json
 
 from fasthtml.xtend import Script
 
-from myfasthtml.core.commands import BaseCommand
+from myfasthtml.core.commands import Command
 from myfasthtml.core.instances import MultipleInstance
 
 
 class Keyboard(MultipleInstance):
-  def __init__(self, parent, _id=None, combinations=None):
+  """
+  Represents a keyboard with customizable key combinations support.
+
+  The Keyboard class allows managing key combinations and their corresponding
+  actions for a given parent object.
+  """
+  def __init__(self, parent, combinations=None, _id=None):
     super().__init__(parent, _id=_id)
     self.combinations = combinations or {}
   
-  def add(self, sequence: str, command: BaseCommand):
-    self.combinations[sequence] = command
+  def add(self, sequence: str, command: Command, require_inside: bool = True):
+    self.combinations[sequence] = {"command": command, "require_inside": require_inside}
     return self
-  
+
   def render(self):
-    str_combinations = {sequence: command.get_htmx_params() for sequence, command in self.combinations.items()}
+    str_combinations = {}
+    for sequence, value in self.combinations.items():
+      params = value["command"].get_htmx_params()
+      params["require_inside"] = value.get("require_inside", True)
+      str_combinations[sequence] = params
     return Script(f"add_keyboard_support('{self._parent.get_id()}', '{json.dumps(str_combinations)}')")
   
   def __ft__(self):

src/myfasthtml/controls/Layout.py

@@ -17,15 +17,17 @@ from myfasthtml.core.commands import Command
 from myfasthtml.core.dbmanager import DbObject
 from myfasthtml.core.instances import SingleInstance
 from myfasthtml.core.utils import get_id
-from myfasthtml.icons.fluent import panel_left_expand20_regular as left_drawer_icon
-from myfasthtml.icons.fluent_p2 import panel_right_expand20_regular as right_drawer_icon
+from myfasthtml.icons.fluent import panel_left_contract20_regular as left_drawer_contract
+from myfasthtml.icons.fluent import panel_left_expand20_regular as left_drawer_expand
+from myfasthtml.icons.fluent_p1 import panel_right_contract20_regular as right_drawer_contract
+from myfasthtml.icons.fluent_p2 import panel_right_expand20_regular as right_drawer_expand
 
 logger = logging.getLogger("LayoutControl")
 
 
 class LayoutState(DbObject):
-  def __init__(self, owner):
-    super().__init__(owner)
+  def __init__(self, owner, name=None):
+    super().__init__(owner, name=name)
     with self.initializing():
       self.left_drawer_open: bool = True
       self.right_drawer_open: bool = True
@@ -35,24 +37,28 @@ class LayoutState(DbObject):
 
 class Commands(BaseCommands):
   def toggle_drawer(self, side: Literal["left", "right"]):
-    return Command("ToggleDrawer", f"Toggle {side} layout drawer", self._owner.toggle_drawer, side)
+    return Command("ToggleDrawer",
+                   f"Toggle {side} layout drawer",
+                   self._owner,
+                   self._owner.toggle_drawer,
+                   args=[side])
   
-  def update_drawer_width(self, side: Literal["left", "right"]):
+  def update_drawer_width(self, side: Literal["left", "right"], width: int = None):
     """
     Create a command to update drawer width.
     
     Args:
         side: Which drawer to update ("left" or "right")
+        width: New width in pixels. Given by the HTMX request
     
     Returns:
         Command: Command object for updating drawer width
     """
-    return Command(
-      f"UpdateDrawerWidth_{side}",
-      f"Update {side} drawer width",
-      self._owner.update_drawer_width,
-      side
-    )
+    return Command(f"UpdateDrawerWidth_{side}",
+                   f"Update {side} drawer width",
+                   self._owner,
+                   self._owner.update_drawer_width,
+                   args=[side])
 
 
 class Layout(SingleInstance):
@@ -114,7 +120,7 @@ class Layout(SingleInstance):
     
     # Content storage
     self._main_content = None
-    self._state = LayoutState(self)
+    self._state = LayoutState(self, "default_layout")
     self._boundaries = Boundaries(self)
     self.commands = Commands(self)
     self.left_drawer = self.Content(self)
@@ -124,15 +130,6 @@ class Layout(SingleInstance):
     self.footer_left = self.Content(self)
     self.footer_right = self.Content(self)
   
-  def set_footer(self, content):
-    """
-    Set the footer content.
-
-    Args:
-        content: FastHTML component(s) or content for the footer
-    """
-    self._footer_content = content
-  
   def set_main(self, content):
     """
     Set the main content area.
@@ -141,8 +138,21 @@ 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"]):
+    """
+    Toggle the state of a drawer (open or close) based on the specified side. This
+    method also generates the corresponding icon and drawer elements for the
+    selected side.
+
+    :param side: The side of the drawer to toggle. Must be either "left" or "right".
+    :type side: Literal["left", "right"]
+    :return: A tuple containing the updated drawer icon and drawer elements for
+             the specified side.
+    :rtype: Tuple[Any, Any]
+    :raises ValueError: If the provided `side` is not "left" or "right".
+    """
     logger.debug(f"Toggle drawer: {side=}, {self._state.left_drawer_open=}")
     if side == "left":
       self._state.left_drawer_open = not self._state.left_drawer_open
@@ -188,15 +198,17 @@ class Layout(SingleInstance):
     return Header(
       Div(  # left
         self._mk_left_drawer_icon(),
-        *self.header_left.get_content(),
-        cls="flex gap-1"
+        *self._mk_content_wrapper(self.header_left, horizontal=True, show_group_name=False).children,
+        cls="flex gap-1",
+        id=f"{self._id}_hl"
       ),
       Div(  # right
-        *self.header_right.get_content()[None],
+        *self._mk_content_wrapper(self.header_right, horizontal=True, show_group_name=False).children,
         UserProfile(self),
-        cls="flex gap-1"
+        cls="flex gap-1",
+        id=f"{self._id}_hr"
       ),
-      cls="mf-layout-header"
+      cls="mf-layout-header",
     )
   
   def _mk_footer(self):
@@ -206,9 +218,17 @@ class Layout(SingleInstance):
     Returns:
         Footer: FastHTML Footer component
     """
-    footer_content = self._footer_content if self._footer_content else ""
     return Footer(
-      footer_content,
+      Div(  # left
+        *self._mk_content_wrapper(self.footer_left, horizontal=True, show_group_name=False).children,
+        cls="flex gap-1",
+        id=f"{self._id}_fl"
+      ),
+      Div(  # right
+        *self._mk_content_wrapper(self.footer_right, horizontal=True, show_group_name=False).children,
+        cls="flex gap-1",
+        id=f"{self._id}_fr"
+      ),
       cls="mf-layout-footer footer sm:footer-horizontal"
     )
   
@@ -233,7 +253,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,15 +286,23 @@ 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"
     )
     
     # Wrap content in scrollable container
     content_wrapper = Div(
-      *self.right_drawer.get_content(),
+      *[
+          (
+              Div(cls="divider") if index > 0 else None,
+              group_ft,
+              *[item for item in self.right_drawer.get_content()[group_name]]
+          )
+          for index, (group_name, group_ft) in enumerate(self.right_drawer.get_groups())
+      ],
       cls="mf-layout-drawer-content"
     )
     
@@ -287,15 +315,29 @@ class Layout(SingleInstance):
     )
   
   def _mk_left_drawer_icon(self):
-    return mk.icon(right_drawer_icon if self._state.left_drawer_open else left_drawer_icon,
+    return mk.icon(left_drawer_contract if self._state.left_drawer_open else left_drawer_expand,
                    id=f"{self._id}_ldi",
                    command=self.commands.toggle_drawer("left"))
   
   def _mk_right_drawer_icon(self):
-    return mk.icon(right_drawer_icon if self._state.left_drawer_open else left_drawer_icon,
+    return mk.icon(right_drawer_contract if self._state.right_drawer_open else right_drawer_expand,
                    id=f"{self._id}_rdi",
                    command=self.commands.toggle_drawer("right"))
   
+  @staticmethod
+  def _mk_content_wrapper(content: Content, show_group_name: bool = True, horizontal: bool = False):
+    return Div(
+      *[
+          (
+              Div(cls=f"divider {'divider-horizontal' if horizontal else ''}") if index > 0 else None,
+              group_ft if show_group_name else None,
+              *[item for item in content.get_content()[group_name]]
+          )
+          for index, (group_name, group_ft) in enumerate(content.get_groups())
+      ],
+      cls="mf-layout-drawer-content"
+    )
+  
   def render(self):
     """
     Render the complete layout.
@@ -306,12 +348,13 @@ class Layout(SingleInstance):
     
     # Wrap everything in a container div
     return Div(
+      Div(id=f"tt_{self._id}", cls="mf-tooltip-container"),  # container for the tooltips
       self._mk_header(),
       self._mk_left_drawer(),
       self._mk_main(),
       self._mk_right_drawer(),
       self._mk_footer(),
-      Script(f"initLayoutResizer('{self._id}');"),
+      Script(f"initLayout('{self._id}');"),
       id=self._id,
       cls="mf-layout",
     )

src/myfasthtml/controls/Mouse.py

@@ -2,21 +2,199 @@ import json
 
 from fasthtml.xtend import Script
 
-from myfasthtml.core.commands import BaseCommand
+from myfasthtml.core.commands import Command
 from myfasthtml.core.instances import MultipleInstance
 
 
 class Mouse(MultipleInstance):
+  """
+  Represents a mechanism to manage mouse event combinations and their associated commands.
+
+  This class is used to add, manage, and render mouse event sequences with corresponding
+  commands, providing a flexible way to handle mouse interactions programmatically.
+
+  Combinations can be defined with:
+  - A Command object: mouse.add("click", command)
+  - HTMX parameters: mouse.add("click", hx_post="/url", hx_vals={...})
+  - Both (named params override command): mouse.add("click", command, hx_target="#other")
+
+  For dynamic hx_vals, use "js:functionName()" to call a client-side function.
+
+  Supported base actions:
+  - ``click`` - Left mouse click (detected globally)
+  - ``right_click`` (or alias ``rclick``) - Right mouse click (detected on element only)
+  - ``mousedown>mouseup`` - Left mouse press-and-release (captures data at both phases)
+  - ``rmousedown>mouseup`` - Right mouse press-and-release
+
+  Modifiers can be combined with ``+``: ``ctrl+click``, ``shift+mousedown>mouseup``.
+  Sequences use space separation: ``click right_click``, ``click mousedown>mouseup``.
+
+  For ``mousedown>mouseup`` actions with ``hx_vals="js:functionName()"``, the JS function
+  is called at both mousedown and mouseup. Results are suffixed: ``key_mousedown`` and
+  ``key_mouseup`` in the server request.
+  """
+
+  VALID_ACTIONS = {
+    'click', 'right_click', 'rclick',
+    'mousedown>mouseup', 'rmousedown>mouseup'
+  }
+  VALID_MODIFIERS = {'ctrl', 'shift', 'alt'}
   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
+
+  def _validate_sequence(self, sequence: str):
+    """
+    Validate a mouse event sequence string.
+
+    Checks that all elements in the sequence use valid action names and modifiers.
+
+    Args:
+        sequence: Mouse event sequence string (e.g., "click", "ctrl+mousedown>mouseup")
+
+    Raises:
+        ValueError: If any action or modifier is invalid.
+    """
+    elements = sequence.strip().split()
+    for element in elements:
+      parts = element.split('+')
+      # Last part should be the action, others are modifiers
+      action = parts[-1].lower()
+      modifiers = [p.lower() for p in parts[:-1]]
+
+      if action not in self.VALID_ACTIONS:
+        raise ValueError(
+          f"Invalid action '{action}' in sequence '{sequence}'. "
+          f"Valid actions: {', '.join(sorted(self.VALID_ACTIONS))}"
+        )
+
+      for mod in modifiers:
+        if mod not in self.VALID_MODIFIERS:
+          raise ValueError(
+            f"Invalid modifier '{mod}' in sequence '{sequence}'. "
+            f"Valid modifiers: {', '.join(sorted(self.VALID_MODIFIERS))}"
+          )
+
+  def add(self, sequence: str, command: Command = None, *,
+          hx_post: str = None, hx_get: str = None, hx_put: str = None,
+          hx_delete: str = None, hx_patch: str = None,
+          hx_target: str = None, hx_swap: str = None, hx_vals=None,
+          on_move: str = None):
+    """
+    Add a mouse combination with optional command and HTMX parameters.
+
+    Args:
+        sequence: Mouse event sequence string. Supports:
+            - Simple actions: ``"click"``, ``"right_click"``, ``"mousedown>mouseup"``
+            - Modifiers: ``"ctrl+click"``, ``"shift+mousedown>mouseup"``
+            - Sequences: ``"click right_click"``, ``"click mousedown>mouseup"``
+            - Aliases: ``"rclick"`` for ``"right_click"``
+        command: Optional Command object for server-side action
+        hx_post: HTMX post URL (overrides command)
+        hx_get: HTMX get URL (overrides command)
+        hx_put: HTMX put URL (overrides command)
+        hx_delete: HTMX delete URL (overrides command)
+        hx_patch: HTMX patch URL (overrides command)
+        hx_target: HTMX target selector (overrides command)
+        hx_swap: HTMX swap strategy (overrides command)
+        hx_vals: HTMX values dict or "js:functionName()" for dynamic values.
+            For mousedown>mouseup actions, the JS function is called at both
+            mousedown and mouseup, with results suffixed ``_mousedown`` and ``_mouseup``.
+        on_move: Client-side JS function called on each animation frame during a drag,
+            using ``"js:functionName()"`` format. Only valid with ``mousedown>mouseup``
+            sequences. The function receives ``(event, combination, mousedown_result)``
+            where ``mousedown_result`` is the raw result of ``hx_vals`` at mousedown,
+            or ``None`` if ``hx_vals`` is not set. Return value is ignored.
+
+    Returns:
+        self for method chaining
+
+    Raises:
+        ValueError: If the sequence contains invalid actions or modifiers.
+    """
+    self._validate_sequence(sequence)
+    self.combinations[sequence] = {
+      "command": command,
+      "hx_post": hx_post,
+      "hx_get": hx_get,
+      "hx_put": hx_put,
+      "hx_delete": hx_delete,
+      "hx_patch": hx_patch,
+      "hx_target": hx_target,
+      "hx_swap": hx_swap,
+      "hx_vals": hx_vals,
+      "on_move": on_move,
+    }
     return self
-  
+
+  def _build_htmx_params(self, combination_data: dict) -> dict:
+    """
+    Build HTMX parameters by merging command params with named overrides.
+
+    Named parameters take precedence over command parameters.
+    hx_vals is handled separately via hx-vals-extra to preserve command's hx-vals.
+    """
+    command = combination_data.get("command")
+
+    # Start with command params if available
+    if command is not None:
+      params = command.get_htmx_params().copy()
+    else:
+      params = {}
+
+    # Override with named parameters (only if explicitly set)
+    # Note: hx_vals is handled separately below
+    param_mapping = {
+      "hx_post": "hx-post",
+      "hx_get": "hx-get",
+      "hx_put": "hx-put",
+      "hx_delete": "hx-delete",
+      "hx_patch": "hx-patch",
+      "hx_target": "hx-target",
+      "hx_swap": "hx-swap",
+    }
+
+    for py_name, htmx_name in param_mapping.items():
+      value = combination_data.get(py_name)
+      if value is not None:
+        params[htmx_name] = value
+
+    # Handle hx_vals separately - store in hx-vals-extra to not overwrite command's hx-vals
+    hx_vals = combination_data.get("hx_vals")
+    if hx_vals is not None:
+      if isinstance(hx_vals, str) and hx_vals.startswith("js:"):
+        # Dynamic values: extract function name
+        func_name = hx_vals[3:].rstrip("()")
+        params["hx-vals-extra"] = {"js": func_name}
+      elif isinstance(hx_vals, dict):
+        # Static dict values
+        params["hx-vals-extra"] = {"dict": hx_vals}
+      else:
+        # Other string values - try to parse as JSON
+        try:
+          parsed = json.loads(hx_vals)
+          if not isinstance(parsed, dict):
+            raise ValueError(f"hx_vals must be a dict, got {type(parsed).__name__}")
+          params["hx-vals-extra"] = {"dict": parsed}
+        except json.JSONDecodeError as e:
+          raise ValueError(f"hx_vals must be a dict or 'js:functionName()', got invalid JSON: {e}")
+
+    # Handle on_move - client-side function for real-time drag feedback
+    on_move = combination_data.get("on_move")
+    if on_move is not None:
+      if isinstance(on_move, str) and on_move.startswith("js:"):
+        func_name = on_move[3:].rstrip("()")
+        params["on-move"] = func_name
+      else:
+        raise ValueError(f"on_move must be 'js:functionName()', got: {on_move!r}")
+
+    return params
+
   def render(self):
-    str_combinations = {sequence: command.get_htmx_params() for sequence, command in self.combinations.items()}
+    str_combinations = {
+      sequence: self._build_htmx_params(data)
+      for sequence, data in self.combinations.items()
+    }
     return Script(f"add_mouse_support('{self._parent.get_id()}', '{json.dumps(str_combinations)}')")
   
   def __ft__(self):

src/myfasthtml/controls/Panel.py

@@ -0,0 +1,286 @@
+import logging
+from dataclasses import dataclass
+from typing import Literal, Optional
+
+from fasthtml.components import Div
+from fasthtml.xtend import Script
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+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 more_horizontal20_regular
+from myfasthtml.icons.fluent_p2 import subtract20_regular
+
+logger = logging.getLogger("Panel")
+
+class PanelIds:
+  def __init__(self, owner):
+    self._owner = owner
+  
+  @property
+  def main(self):
+    return f"{self._owner.get_id()}_m"
+  
+  @property
+  def right(self):
+    """ Right panel's content"""
+    return f"{self._owner.get_id()}_cr"
+  
+  @property
+  def left(self):
+    """ Left panel's content"""
+    return f"{self._owner.get_id()}_cl"
+  
+  def panel(self, side: Literal["left", "right"]):
+    return f"{self._owner.get_id()}_pl" if side == "left" else f"{self._owner.get_id()}_pr"
+  
+  def content(self, side: Literal["left", "right"]):
+    return self.left if side == "left" else self.right
+
+
+@dataclass
+class PanelConf:
+  left: bool = False
+  right: bool = True
+  left_title: str = "Left"
+  right_title: str = "Right"
+  show_left_title: bool = True
+  show_right_title: bool = True
+  show_display_left: bool = True
+  show_display_right: bool = True
+
+
+class PanelState(DbObject):
+  def __init__(self, owner, name=None):
+    super().__init__(owner, name=name)
+    with self.initializing():
+      self.left_visible: bool = True
+      self.right_visible: bool = True
+      self.left_width: int = 250
+      self.right_width: int = 250
+
+
+class Commands(BaseCommands):
+  def set_side_visible(self, side: Literal["left", "right"], visible: bool = None):
+    return Command("TogglePanelSide",
+                   f"Toggle {side} side panel",
+                   self._owner,
+                   self._owner.set_side_visible,
+                   args=[side, visible]).htmx(target=f"#{self._owner.get_ids().panel(side)}")
+  
+  def toggle_side(self, side: Literal["left", "right"]):
+    return Command("TogglePanelSide",
+                   f"Toggle {side} side panel",
+                   self._owner,
+                   self._owner.toggle_side,
+                   args=[side]).htmx(target=f"#{self._owner.get_ids().panel(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,
+                   self._owner.update_side_width,
+                   args=[side]).htmx(target=f"#{self._owner.get_ids().panel(side)}")
+
+
+class Panel(MultipleInstance):
+  """
+  Represents a user interface panel that supports customizable left, main, and right components.
+
+  The `Panel` class is used to create and manage a panel layout with optional left, main,
+  and right sections. It provides functionality to set the components of the panel, toggle
+  sides, and adjust the width of the sides dynamically. The class also handles rendering
+  the panel with appropriate HTML elements and JavaScript for interactivity.
+  """
+  
+  def __init__(self, parent, conf: Optional[PanelConf] = None, _id=None):
+    super().__init__(parent, _id=_id)
+    self.conf = conf or PanelConf()
+    self.commands = Commands(self)
+    self._state = PanelState(self)
+    self._main = None
+    self._right = None
+    self._left = None
+    self._ids = PanelIds(self)
+  
+  def get_ids(self):
+    return self._ids
+  
+  def update_side_width(self, side, width):
+    logger.debug(f"update_side_width {side=} {width=}")
+    if side == "left":
+      self._state.left_width = width
+    else:
+      self._state.right_width = width
+    
+    return self._mk_panel(side)
+  
+  def set_side_visible(self, side, visible):
+    if side == "left":
+      self._state.left_visible = visible
+    else:
+      self._state.right_visible = visible
+    
+    return self._mk_panel(side), self._mk_show_icon(side)
+  
+  def toggle_side(self, side):
+    current_visible = self._state.left_visible if side == "left" else self._state.right_visible
+    return self.set_side_visible(side, not current_visible)
+  
+  def set_main(self, main):
+    self._main = main
+    return self
+  
+  def set_right(self, right):
+    self._right = right
+    return Div(self._right, id=self._ids.right)
+  
+  def set_left(self, left):
+    self._left = left
+    return Div(self._left, id=self._ids.left)
+  
+  def set_title(self, side, title):
+    if side == "left":
+      self.conf.left_title = title
+    else:
+      self.conf.right_title = title
+    
+    return self._mk_panel(side)
+  
+  def _mk_panel(self, side: Literal["left", "right"]):
+    enabled = self.conf.left if side == "left" else self.conf.right
+    if not enabled:
+      return None
+    
+    visible = self._state.left_visible if side == "left" else self._state.right_visible
+    content = self._right if side == "right" else self._left
+    show_title = self.conf.show_left_title if side == "left" else self.conf.show_right_title
+    title = self.conf.left_title if side == "left" else self.conf.right_title
+    
+    resizer = Div(
+      cls=f"mf-resizer mf-resizer-{side}",
+      data_command_id=self.commands.update_side_width(side).id,
+      data_side=side
+    )
+    
+    hide_icon = mk.icon(
+      subtract20_regular,
+      size=20,
+      command=self.commands.set_side_visible(side, False),
+      cls="mf-panel-hide-icon"
+    )
+    
+    panel_cls = f"mf-panel-{side}"
+    if not visible:
+      panel_cls += " mf-hidden"
+    if show_title:
+      panel_cls += " mf-panel-with-title"
+    
+    # Left panel: content then resizer (resizer on the right)
+    # Right panel: resizer then content (resizer on the left)
+    if show_title:
+      header = Div(
+        Div(title),
+        hide_icon,
+        cls="mf-panel-header"
+      )
+      body = Div(
+        header,
+        Div(content, id=self._ids.content(side), cls="mf-panel-content"),
+        cls="mf-panel-body"
+      )
+      if side == "left":
+        return Div(
+          body,
+          resizer,
+          cls=panel_cls,
+          style=f"width: {self._state.left_width}px;",
+          id=self._ids.panel(side)
+        )
+      else:
+        return Div(
+          resizer,
+          body,
+          cls=panel_cls,
+          style=f"width: {self._state.right_width}px;",
+          id=self._ids.panel(side)
+        )
+    else:
+      if side == "left":
+        return Div(
+          hide_icon,
+          Div(content, id=self._ids.content(side)),
+          resizer,
+          cls=panel_cls,
+          style=f"width: {self._state.left_width}px;",
+          id=self._ids.panel(side)
+        )
+      else:
+        return Div(
+          resizer,
+          hide_icon,
+          Div(content, id=self._ids.content(side)),
+          cls=panel_cls,
+          style=f"width: {self._state.left_width}px;",
+          id=self._ids.panel(side)
+        )
+  
+  def _mk_main(self):
+    return Div(
+      self._mk_show_icon("left"),
+      Div(self._main, id=self._ids.main, cls="mf-panel-main"),
+      self._mk_show_icon("right"),
+      cls="mf-panel-main"
+    ),
+  
+  def _mk_show_icon(self, side: Literal["left", "right"]):
+    """
+    Create show icon for a panel side if it's hidden.
+
+    Args:
+        side: Which panel side ("left" or "right")
+
+    Returns:
+        Div with icon if panel is hidden, None otherwise
+    """
+    enabled = self.conf.left if side == "left" else self.conf.right
+    if not enabled:
+      return None
+    
+    show_display = self.conf.show_display_left if side == "left" else self.conf.show_display_right
+    if not show_display:
+      return None
+    
+    is_visible = self._state.left_visible if side == "left" else self._state.right_visible
+    icon_cls = "hidden" if is_visible else f"mf-panel-show-icon mf-panel-show-icon-{side}"
+    
+    return mk.icon(
+      more_horizontal20_regular,
+      command=self.commands.set_side_visible(side, True),
+      cls=icon_cls,
+      id=f"{self._id}_show_{side}"
+    )
+  
+  def render(self):
+    return Div(
+      self._mk_panel("left"),
+      self._mk_main(),
+      self._mk_panel("right"),
+      Script(f"initResizer('{self._id}');"),
+      cls="mf-panel",
+      id=self._id,
+    )
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/Properties.py

@@ -0,0 +1,67 @@
+from fasthtml.components import Div
+from myutils.ProxyObject import ProxyObject
+
+from myfasthtml.core.instances import MultipleInstance
+
+
+class Properties(MultipleInstance):
+  def __init__(self, parent, obj=None, groups: dict = None, _id=None):
+    super().__init__(parent, _id=_id)
+    self.obj = obj
+    self.groups = groups
+    self.properties_by_group = self._create_properties_by_group()
+  
+  def set_obj(self, obj, groups: dict = None):
+    self.obj = obj
+    self.groups = groups
+    self.properties_by_group = self._create_properties_by_group()
+  
+  def _mk_group_content(self, properties: dict):
+    return Div(
+      *[
+          Div(
+            Div(k, cls="mf-properties-key", data_tooltip=f"{k}"),
+            self._mk_property_value(v),
+            cls="mf-properties-row"
+          )
+          for k, v in properties.items()
+      ],
+      cls="mf-properties-group-content"
+    )
+  
+  def _mk_property_value(self, value):
+    if isinstance(value, dict):
+      return self._mk_group_content(value)
+    
+    if isinstance(value, (list, tuple)):
+      return self._mk_group_content({i: item for i, item in enumerate(value)})
+    
+    return Div(str(value),
+               cls="mf-properties-value",
+               title=str(value))
+  
+  def render(self):
+    return Div(
+      *[
+          Div(
+            Div(
+              Div(group_name if group_name is not None else "", cls="mf-properties-group-header"),
+              self._mk_group_content(proxy.as_dict()),
+              cls="mf-properties-group-container"
+            ),
+            cls="mf-properties-group-card"
+          )
+          for group_name, proxy in self.properties_by_group.items()
+      ],
+      id=self._id,
+      cls="mf-properties"
+    )
+  
+  def _create_properties_by_group(self):
+    if self.groups is None:
+      return {None: ProxyObject(self.obj, {"*": ""})}
+    
+    return {k: ProxyObject(self.obj, v) for k, v in self.groups.items()}
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/Query.py

@@ -0,0 +1,109 @@
+import logging
+from dataclasses import dataclass
+from typing import Optional
+
+from fasthtml.components import *
+
+from myfasthtml.controls.BaseCommands import BaseCommands
+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 import brain_circuit20_regular
+from myfasthtml.icons.fluent_p1 import filter20_regular, search20_regular
+from myfasthtml.icons.fluent_p2 import dismiss_circle20_regular
+
+logger = logging.getLogger("Query")
+
+QUERY_FILTER = "filter"
+QUERY_SEARCH = "search"
+QUERY_AI = "ai"
+
+query_type = {
+    QUERY_FILTER: filter20_regular,
+    QUERY_SEARCH: search20_regular,
+    QUERY_AI: brain_circuit20_regular
+}
+
+
+@dataclass
+class QueryConf:
+  """Configuration for Query control.
+
+  Attributes:
+      placeholder: Placeholder text for the search input
+  """
+  placeholder: str = "Search..."
+
+
+class QueryState(DbObject):
+  def __init__(self, owner):
+    with self.initializing():
+      super().__init__(owner)
+      self.filter_type: str = "filter"
+      self.query: Optional[str] = None
+
+
+class Commands(BaseCommands):
+  def change_filter_type(self):
+    return Command("ChangeFilterType",
+                   "Change filter type",
+                   self._owner,
+                   self._owner.change_query_type).htmx(target=f"#{self._id}")
+  
+  def on_filter_changed(self):
+    return Command("QueryChanged",
+                   "Query changed",
+                   self._owner,
+                   self._owner.query_changed).htmx(target=None)  # prevent focus loss when typing
+  
+  def on_cancel_query(self):
+    return Command("CancelQuery",
+                   "Cancel query",
+                   self._owner,
+                   self._owner.query_changed,
+                   kwargs={"query": ""}
+                   ).htmx(target=f"#{self._id}")
+
+
+class Query(MultipleInstance):
+  def __init__(self, parent, conf: Optional[QueryConf] = None, _id=None):
+    super().__init__(parent, _id=_id)
+    self.conf = conf or QueryConf()
+    self.commands = Commands(self)
+    self._state = QueryState(self)
+  
+  def get_query(self):
+    return self._state.query
+  
+  def get_query_type(self):
+    return self._state.filter_type
+  
+  def change_query_type(self):
+    keys = list(query_type.keys())  # ["filter", "search", "ai"]
+    current_idx = keys.index(self._state.filter_type)
+    self._state.filter_type = keys[(current_idx + 1) % len(keys)]
+    return self
+  
+  def query_changed(self, query):
+    logger.debug(f"query_changed {query=}")
+    self._state.query = query.strip() if query is not None else None
+    return self  # needed anyway to allow oob swap
+  
+  def render(self):
+    return Div(
+      mk.label(
+        Input(name="query",
+              value=self._state.query if self._state.query is not None else "",
+              placeholder=self.conf.placeholder,
+              **self.commands.on_filter_changed().get_htmx_params(values_encode="json")),
+        icon=mk.icon(query_type[self._state.filter_type], command=self.commands.change_filter_type()),
+        cls="input input-xs flex gap-3"
+      ),
+      mk.icon(dismiss_circle20_regular, size=24, command=self.commands.on_cancel_query()),
+      cls="flex",
+      id=self._id
+    )
+  
+  def __ft__(self):
+    return self.render()

src/myfasthtml/controls/Search.py

@@ -14,20 +14,39 @@ logger = logging.getLogger("Search")
 
 class Commands(BaseCommands):
   def search(self):
-    return (Command("Search", f"Search {self._owner.items_names}", self._owner.on_search).
-            htmx(target=f"#{self._owner.get_id()}-results",
-                 trigger="keyup changed delay:300ms",
-                 swap="innerHTML"))
+    return (Command("Search",
+                    f"Search {self._owner.items_names}",
+                    self._owner,
+                    self._owner.on_search).htmx(target=f"#{self._owner.get_id()}-results",
+                                                trigger="keyup changed delay:300ms",
+                                                swap="innerHTML"))
 
 
 class Search(MultipleInstance):
+  """
+  Represents a component for managing and filtering a list of items.
+  It uses fuzzy matching and subsequence matching to filter items.
+
+  :ivar items_names: The name of the items used to filter.
+  :type items_names: str
+  :ivar items: The first set of items to filter.
+  :type items: list
+  :ivar filtered: A copy of the `items` list, representing the filtered items after a search operation.
+  :type filtered: list
+  :ivar get_attr: Callable function to extract string values from items for filtering.
+  :type get_attr: Callable[[Any], str]
+  :ivar template: Callable function to define how filtered items are rendered.
+  :type template: Callable[[Any], Any]
+  """
+  
   def __init__(self,
                parent: BaseInstance,
                _id=None,
                items_names=None,  # what is the name of the items to filter
                items=None,  # first set of items to filter
                get_attr: Callable[[Any], str] = None,  # items is  a list of objects: how to  get the str to filter
-               template: Callable[[Any], Any] = None):  # once filtered, what to render ?
+               template: Callable[[Any], Any] = None,  # once filtered, what to render ?
+               max_height: int = 400):
     """
     Represents a component for managing and filtering a list of items based on specific criteria.
 
@@ -46,14 +65,21 @@ class Search(MultipleInstance):
     self.items = items or []
     self.filtered = self.items.copy()
     self.get_attr = get_attr or (lambda x: x)
-    self.template = template or Div
+    self.template = template or (lambda x: Div(self.get_attr(x)))
     self.commands = Commands(self)
+    self.max_height = max_height
   
   def set_items(self, items):
     self.items = items
     self.filtered = self.items.copy()
     return self
   
+  def get_items(self):
+    return self.items
+  
+  def get_filtered(self):
+    return self.filtered
+  
   def on_search(self, query):
     logger.debug(f"on_search {query=}")
     self.search(query)
@@ -82,6 +108,7 @@ class Search(MultipleInstance):
         *self._mk_search_results(),
         id=f"{self._id}-results",
         cls="mf-search-results",
+        style="max-height: 400px;" if self.max_height else None
       ),
       id=f"{self._id}",
     )

src/myfasthtml/controls/TabsManager.py

@@ -52,32 +52,47 @@ class TabsManagerState(DbObject):
       self.active_tab: str | None = None
       
       # must not be persisted in DB
-      self._tabs_content: dict[str, Any] = {}
+      self.ns_tabs_content: dict[str, Any] = {}  # Cache: always stores raw content (not wrapped)
+      self.ns_tabs_sent_to_client: set = set()  # for tabs created, but not yet displayed
 
 
 class Commands(BaseCommands):
   def show_tab(self, tab_id):
-    return Command(f"{self._prefix}ShowTab",
+    return Command(f"ShowTab",
                    "Activate or show a specific tab",
-                   self._owner.show_tab, tab_id).htmx(target=f"#{self._id}-controller", swap="outerHTML")
+                   self._owner,
+                   self._owner.show_tab,
+                   args=[tab_id,
+                         True,
+                         False],
+                   key=f"{self._owner.get_full_id()}-ShowTab-{tab_id}",
+                   ).htmx(target=f"#{self._id}-controller", swap="outerHTML")
   
   def close_tab(self, tab_id):
-    return Command(f"{self._prefix}CloseTab",
+    return Command(f"CloseTab",
                    "Close a specific tab",
-                   self._owner.close_tab, tab_id).htmx(target=f"#{self._id}", swap="outerHTML")
+                   self._owner,
+                   self._owner.close_tab,
+                   kwargs={"tab_id": tab_id},
+                   ).htmx(target=f"#{self._id}-controller", swap="outerHTML")
   
   def add_tab(self, label: str, component: Any, auto_increment=False):
-    return (Command(f"{self._prefix}AddTab",
-                    "Add a new tab",
-                    self._owner.on_new_tab, label, component, auto_increment).
-            htmx(target=f"#{self._id}-controller"))
+    return Command(f"AddTab",
+                   "Add a new tab",
+                   self._owner,
+                   self._owner.on_new_tab,
+                   args=[label,
+                         component,
+                         auto_increment],
+                   key="#{id-name-args}",
+                   ).htmx(target=f"#{self._id}-controller", swap="outerHTML")
 
 
 class TabsManager(MultipleInstance):
-  _tab_count = 0
   
   def __init__(self, parent, _id=None):
     super().__init__(parent, _id=_id)
+    self._tab_count = 0
     self._state = TabsManagerState(self)
     self.commands = Commands(self)
     self._boundaries = Boundaries()
@@ -86,6 +101,7 @@ class TabsManager(MultipleInstance):
                           get_attr=lambda x: x["label"],
                           template=self._mk_tab_button,
                           _id="-search")
+    
     logger.debug(f"TabsManager created with id: {self._id}")
     logger.debug(f"  tabs       : {self._get_ordered_tabs()}")
     logger.debug(f"  active tab : {self._state.active_tab}")
@@ -96,18 +112,64 @@ class TabsManager(MultipleInstance):
   def _get_ordered_tabs(self):
     return {tab_id: self._state.tabs.get(tab_id, None) for tab_id in self._state.tabs_order}
   
-  def _get_tab_content(self, tab_id):
+  def _dynamic_get_content(self, tab_id):
     if tab_id not in self._state.tabs:
-      return None
+      return Div("Tab not found.")
+
     tab_config = self._state.tabs[tab_id]
-    if tab_config["component_type"] is None:
-      return None
-    return InstancesManager.get(self._session,  tab_config["component_id"])
+    if tab_config["component"] is None:
+      return Div("Tab content does not support serialization.")
+
+    # 1. Try to get existing component instance
+    res = InstancesManager.get(self._session, tab_config["component"][1], None)
+    if res is not None:
+      logger.debug(f"Component {tab_config['component'][1]} already exists")
+      return res
+
+    # 2. Get or create parent
+    if tab_config["component_parent"] is None:
+      logger.error(f"No parent defined for tab {tab_id}")
+      return Div("Failed to retrieve tab content (no parent).")
+
+    parent = InstancesManager.get(self._session, tab_config["component_parent"][1], None)
+    if parent is None:
+      logger.error(f"Parent {tab_config['component_parent'][1]} not found for tab {tab_id}")
+      return Div("Parent component not available")
+
+    # 3. If parent supports create_tab_content, use it
+    if hasattr(parent, 'create_tab_content'):
+      try:
+        logger.debug(f"Asking parent {tab_config['component_parent'][1]} to create tab content for {tab_id}")
+        content = parent.create_tab_content(tab_id)
+        # Store in cache
+        self._state.ns_tabs_content[tab_id] = content
+        return content
+      except Exception as e:
+        logger.error(f"Error while parent creating tab content: {e}")
+        return Div("Failed to retrieve tab content (cannot create).")
+    else:
+      # Parent doesn't support create_tab_content, fallback to error
+      logger.error(f"Parent {tab_config['component_parent'][1]} doesn't support create_tab_content")
+      return Div("Failed to retrieve tab content (create tab not supported).")
   
-  @staticmethod
-  def _get_tab_count():
-    res = TabsManager._tab_count
-    TabsManager._tab_count += 1
+  def _get_or_create_tab_content(self, tab_id):
+    """
+    Get tab content from cache or create it.
+    This method ensures content is always stored in raw form (not wrapped).
+
+    Args:
+        tab_id: ID of the tab
+
+    Returns:
+        Raw content component (not wrapped in Div)
+    """
+    if tab_id not in self._state.ns_tabs_content:
+      self._state.ns_tabs_content[tab_id] = self._dynamic_get_content(tab_id)
+    return self._state.ns_tabs_content[tab_id]
+  
+  def _get_tab_count(self):
+    res = self._tab_count
+    self._tab_count += 1
     return res
   
   def on_new_tab(self, label: str, component: Any, auto_increment=False):
@@ -116,20 +178,20 @@ class TabsManager(MultipleInstance):
       label = f"{label}_{self._get_tab_count()}"
     component = component or VisNetwork(self, nodes=vis_nodes, edges=vis_edges)
     
-    tab_id = self._tab_already_exists(label, component)
-    if tab_id:
-      return self.show_tab(tab_id)
-    
-    tab_id = self.add_tab(label, component)
-    return (
-        self._mk_tabs_controller(),
-        self._wrap_tab_content(self._mk_tab_content(tab_id, component)),
-        self._mk_tabs_header_wrapper(True),
-    )
+    tab_id = self.create_tab(label, component)
+    return self.show_tab(tab_id, oob=False)
   
-  def add_tab(self, label: str, component: Any, activate: bool = True) -> str:
+  def show_or_create_tab(self, tab_id, label, component, activate=True):
+    logger.debug(f"show_or_create_tab {tab_id=}, {label=}, {component=}, {activate=}")
+    if tab_id not in self._state.tabs:
+      self._add_or_update_tab(tab_id, label, component, activate)
+    
+    return self.show_tab(tab_id, activate=activate, oob=True)
+  
+  def create_tab(self, label: str, component: Any, activate: bool = True) -> str:
     """
     Add a new tab or update an existing one with the same component type, ID and label.
+    The tab is not yet sent to the client.
 
     Args:
         label: Display label for the tab
@@ -140,68 +202,55 @@ class TabsManager(MultipleInstance):
         tab_id: The UUID of the tab (new or existing)
     """
     logger.debug(f"add_tab {label=}, component={component}, activate={activate}")
-    # copy the state to avoid multiple database call
-    state = self._state.copy()
-    
-    # Extract component ID if the component has a get_id() method
-    component_type, component_id = None, None
-    if isinstance(component, BaseInstance):
-      component_type = component.get_prefix() if isinstance(component, BaseInstance) else type(component).__name__
-      component_id = component.get_id()
-    
-    # Check if a tab with the same component_type, component_id AND label already exists
-    existing_tab_id = self._tab_already_exists(label, component)
-    
-    if existing_tab_id:
-      # Update existing tab (only the component instance in memory)
-      tab_id = existing_tab_id
-      state._tabs_content[tab_id] = component
-    else:
-      # Create new tab
-      tab_id = str(uuid.uuid4())
-      
-      # Add tab metadata to state
-      state.tabs[tab_id] = {
-          'id': tab_id,
-          'label': label,
-          'component_type': component_type,
-          'component_id': component_id
-      }
-      
-      # Add tab to order
-      state.tabs_order.append(tab_id)
-      
-      # Store component in memory
-      state._tabs_content[tab_id] = component
-    
-    # Activate tab if requested
-    if activate:
-      state.active_tab = tab_id
-    
-    # finally, update the state
-    self._state.update(state)
-    self._search.set_items(self._get_tab_list())
     
+    tab_id = self._tab_already_exists(label, component) or str(uuid.uuid4())
+    self._add_or_update_tab(tab_id, label, component, activate)
     return tab_id
   
-  def show_tab(self, tab_id):
+  def show_tab(self, tab_id, activate: bool = True, oob=True, is_new=True):
+    """
+    Send the tab to the client if needed.
+    If the tab was already sent, just update the active tab.
+    :param tab_id:
+    :param activate:
+    :param oob: default=True so other control will not care of the target
+    :param is_new: is it a new tab or an existing one?
+    :return:
+    """
     logger.debug(f"show_tab {tab_id=}")
     if tab_id not in self._state.tabs:
       logger.debug(f"  Tab not found.")
       return None
     
     logger.debug(f"  Tab label is: {self._state.tabs[tab_id]['label']}")
-    self._state.active_tab = tab_id
     
-    if tab_id not in self._state._tabs_content:
-      logger.debug(f"  Content does not exist. Creating it.")
-      content = self._get_tab_content(tab_id)
+    if activate:
+      self._state.active_tab = tab_id
+    
+    # Get or create content (always stored in raw form)
+    content = self._get_or_create_tab_content(tab_id)
+    
+    if tab_id not in self._state.ns_tabs_sent_to_client:
+      logger.debug(f"  Content not in client memory. Sending it.")
+      self._state.ns_tabs_sent_to_client.add(tab_id)
       tab_content = self._mk_tab_content(tab_id, content)
-      self._state._tabs_content[tab_id] = tab_content
-      return self._mk_tabs_controller(), self._wrap_tab_content(tab_content)
+      return (self._mk_tabs_controller(oob),
+              self._mk_tabs_header_wrapper(oob),
+              self._wrap_tab_content(tab_content, is_new))
     else:
-      logger.debug(f"  Content already exists. Just switch.")
-      return self._mk_tabs_controller()
+      logger.debug(f"  Content already in client memory. Just switch.")
+      return self._mk_tabs_controller(oob)  # no new tab_id => header is already up to date
+  
+  def change_tab_content(self, tab_id, label, component, activate=True):
+    logger.debug(f"switch_tab {label=}, component={component}, activate={activate}")
+    
+    if tab_id not in self._state.tabs:
+      logger.error(f"  Tab {tab_id} not found. Cannot change its content.")
+      return None
+    
+    self._add_or_update_tab(tab_id, label, component, activate)
+    self._state.ns_tabs_sent_to_client.discard(tab_id)  # to make sure that the new content will be sent to the client
+    return self.show_tab(tab_id, activate=activate, oob=True, is_new=False)
   
   def close_tab(self, tab_id: str):
     """
@@ -211,10 +260,12 @@ class TabsManager(MultipleInstance):
         tab_id: ID of the tab to close
 
     Returns:
-        Self for chaining
+        tuple: (controller, header_wrapper, content_to_remove) for HTMX swapping,
+              or self if tab not found
     """
     logger.debug(f"close_tab {tab_id=}")
     if tab_id not in self._state.tabs:
+      logger.debug(f"  Tab not found.")
       return self
     
     # Copy state
@@ -225,8 +276,12 @@ class TabsManager(MultipleInstance):
     state.tabs_order.remove(tab_id)
     
     # Remove from content
-    if tab_id in state._tabs_content:
-      del state._tabs_content[tab_id]
+    if tab_id in state.ns_tabs_content:
+      del state.ns_tabs_content[tab_id]
+    
+    # Remove from content sent
+    if tab_id in state.ns_tabs_sent_to_client:
+      state.ns_tabs_sent_to_client.remove(tab_id)
     
     # If closing active tab, activate another one
     if state.active_tab == tab_id:
@@ -240,7 +295,8 @@ class TabsManager(MultipleInstance):
     self._state.update(state)
     self._search.set_items(self._get_tab_list())
     
-    return self
+    content_to_remove = Div(id=f"{self._id}-{tab_id}-content", hx_swap_oob=f"delete")
+    return self._mk_tabs_controller(), self._mk_tabs_header_wrapper(), content_to_remove
   
   def add_tab_btn(self):
     return mk.icon(tab_add24_regular,
@@ -250,11 +306,12 @@ class TabsManager(MultipleInstance):
                                                  None,
                                                  True))
   
-  def _mk_tabs_controller(self):
-    return Div(
-      Div(id=f"{self._id}-controller", data_active_tab=f"{self._state.active_tab}"),
-      Script(f'updateTabs("{self._id}-controller");'),
-    )
+  def _mk_tabs_controller(self, oob=False):
+    return Div(id=f"{self._id}-controller",
+               data_active_tab=f"{self._state.active_tab}",
+               hx_on__after_settle=f'updateTabs("{self._id}-controller");',
+               hx_swap_oob="true" if oob else None,
+               )
   
   def _mk_tabs_header_wrapper(self, oob=False):
     # Create visible tab buttons
@@ -264,24 +321,20 @@ class TabsManager(MultipleInstance):
         if tab_id in self._state.tabs
     ]
     
-    header_content = [*visible_tab_buttons]
-    
     return Div(
-      Div(*header_content, cls="mf-tabs-header", id=f"{self._id}-header"),
+      Div(*visible_tab_buttons, cls="mf-tabs-header", id=f"{self._id}-header"),
       self._mk_show_tabs_menu(),
       id=f"{self._id}-header-wrapper",
       cls="mf-tabs-header-wrapper",
       hx_swap_oob="true" if oob else None
     )
   
-  def _mk_tab_button(self, tab_data: dict, in_dropdown: bool = False):
+  def _mk_tab_button(self, tab_data: dict):
     """
     Create a single tab button with its label and close button.
 
     Args:
-        tab_id: Unique identifier for the tab
         tab_data: Dictionary containing tab information (label, component_type, etc.)
-        in_dropdown: Whether this tab is rendered in the dropdown menu
 
     Returns:
         Button element representing the tab
@@ -299,12 +352,10 @@ class TabsManager(MultipleInstance):
       command=self.commands.show_tab(tab_id)
     )
     
-    extra_cls = "mf-tab-in-dropdown" if in_dropdown else ""
-    
     return Div(
       tab_label,
       close_btn,
-      cls=f"mf-tab-button {extra_cls} {'mf-tab-active' if is_active else ''}",
+      cls=f"mf-tab-button {'mf-tab-active' if is_active else ''}",
       data_tab_id=tab_id,
       data_manager_id=self._id
     )
@@ -316,15 +367,9 @@ class TabsManager(MultipleInstance):
     Returns:
         Div element containing the active tab content or empty container
     """
-    
     if self._state.active_tab:
-      active_tab = self._state.active_tab
-      if active_tab in self._state._tabs_content:
-        tab_content = self._state._tabs_content[active_tab]
-      else:
-        content = self._get_tab_content(active_tab)
-        tab_content = self._mk_tab_content(active_tab, content)
-        self._state._tabs_content[active_tab] = tab_content
+      content = self._get_or_create_tab_content(self._state.active_tab)
+      tab_content = self._mk_tab_content(self._state.active_tab, content)
     else:
       tab_content = self._mk_tab_content(None, None)
     
@@ -335,10 +380,13 @@ class TabsManager(MultipleInstance):
     )
   
   def _mk_tab_content(self, tab_id: str, content):
+    if tab_id is None:
+      return Div("No Content", cls="mf-empty-content mf-tab-content hidden")
+    
     is_active = tab_id == self._state.active_tab
     return Div(
       content if content else Div("No Content", cls="mf-empty-content"),
-      cls=f"mf-tab-content {'hidden' if not is_active else ''}",  # ← ici
+      cls=f"mf-tab-content {'hidden' if not is_active else ''}",
       id=f"{self._id}-{tab_id}-content",
     )
   
@@ -357,23 +405,26 @@ class TabsManager(MultipleInstance):
       cls="dropdown dropdown-end"
     )
   
-  def _wrap_tab_content(self, tab_content):
-    return Div(
-      tab_content,
-      hx_swap_oob=f"beforeend:#{self._id}-content-wrapper",
-    )
+  def _wrap_tab_content(self, tab_content, is_new=True):
+    if is_new:
+      return Div(
+        tab_content,
+        hx_swap_oob=f"beforeend:#{self._id}-content-wrapper"
+      )
+    else:
+      tab_content.attrs["hx-swap-oob"] = "outerHTML"
+      return tab_content
   
   def _tab_already_exists(self, label, component):
     if not isinstance(component, BaseInstance):
       return None
     
-    component_type = component.get_prefix() if isinstance(component, BaseInstance) else type(component).__name__
+    component_type = component.get_prefix()
     component_id = component.get_id()
     
     if component_id is not None:
       for tab_id, tab_data in self._state.tabs.items():
-        if (tab_data.get('component_type') == component_type and
-            tab_data.get('component_id') == component_id and
+        if (tab_data.get('component') == (component_type, component_id) and
             tab_data.get('label') == label):
           return tab_id
     
@@ -382,6 +433,43 @@ class TabsManager(MultipleInstance):
   def _get_tab_list(self):
     return [self._state.tabs[tab_id] for tab_id in self._state.tabs_order if tab_id in self._state.tabs]
   
+  def _add_or_update_tab(self, tab_id, label, component, activate):
+    state = self._state.copy()
+    
+    # Extract component ID if the component has a get_id() method
+    component_type, component_id = None, None
+    parent_type, parent_id = None, None
+    if isinstance(component, BaseInstance):
+      component_type = component.get_prefix()
+      component_id = component.get_id()
+      parent = component.get_parent()
+      if parent:
+        parent_type = parent.get_prefix()
+        parent_id = parent.get_id()
+    
+    # Add tab metadata to state
+    state.tabs[tab_id] = {
+        'id': tab_id,
+        'label': label,
+        'component': (component_type, component_id) if component_type else None,
+        'component_parent': (parent_type, parent_id) if parent_type else None
+    }
+    
+    # Add tab to order list
+    if tab_id not in state.tabs_order:
+      state.tabs_order.append(tab_id)
+    
+    # Add the content
+    state.ns_tabs_content[tab_id] = component
+    
+    # Activate tab if requested
+    if activate:
+      state.active_tab = tab_id
+    
+    # finally, update the state
+    self._state.update(state)
+    self._search.set_items(self._get_tab_list())
+  
   def update_boundaries(self):
     return Script(f"updateBoundaries('{self._id}');")
   
@@ -396,6 +484,7 @@ class TabsManager(MultipleInstance):
       self._mk_tabs_controller(),
       self._mk_tabs_header_wrapper(),
       self._mk_tab_content_wrapper(),
+      Script(f'updateTabs("{self._id}-controller");'),  # first time, run the script to initialize the tabs
       cls="mf-tabs-manager",
       id=self._id,
     )

src/myfasthtml/controls/TreeView.py

@@ -0,0 +1,518 @@
+"""
+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 logging
+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.IconsHelper import IconsHelper
+from myfasthtml.controls.Keyboard import Keyboard
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command, CommandTemplate
+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
+
+logger = logging.getLogger("TreeView")
+
+
+@dataclass
+class TreeViewConf:
+  edit_node: bool = True
+  add_node: bool = True
+  delete_node: bool = True
+  edit_leaf: bool = True
+  add_leaf: bool = True
+  delete_leaf: bool = True
+  icons: dict = None
+
+
+@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)
+  bag: Optional[dict] = None  # to keep extra info
+
+
+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,
+                   self._owner._toggle_node,
+                   kwargs={"node_id": node_id},
+                   key=f"{self._owner.get_safe_parent_key()}-ToggleNode"
+                   ).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,
+                   self._owner._add_child,
+                   kwargs={"parent_id": parent_id},
+                   key=f"{self._owner.get_safe_parent_key()}-AddChild"
+                   ).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,
+                   self._owner._add_sibling,
+                   kwargs={"node_id": node_id},
+                   key=f"{self._owner.get_safe_parent_key()}-AddSibling"
+                   ).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,
+                   self._owner._start_rename,
+                   kwargs={"node_id": node_id},
+                   key=f"{self._owner.get_safe_parent_key()}-StartRename"
+                   ).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,
+                   self._owner._save_rename,
+                   kwargs={"node_id": node_id},
+                   key=f"{self._owner.get_safe_parent_key()}-SaveRename"
+                   ).htmx(target=f"#{self._owner.get_id()}")
+  
+  def cancel_rename(self):
+    """Create command to cancel renaming."""
+    return Command("CancelRename",
+                   "Cancel rename",
+                   self._owner,
+                   self._owner._cancel_rename,
+                   key=f"{self._owner.get_safe_parent_key()}-CancelRename"
+                   ).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,
+                   self._owner._delete_node,
+                   kwargs={"node_id": node_id},
+                   key=f"{self._owner.get_safe_parent_key()}-DeleteNode"
+                   ).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,
+                   self._owner._select_node,
+                   kwargs={"node_id": node_id},
+                   key=f"{self._owner.get_safe_parent_key()}-SelectNode"
+                   ).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, conf: TreeViewConf = 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.conf = conf or TreeViewConf()
+    self.commands = Commands(self)
+    
+    if items:
+      self._state.items = items
+    
+    if self.conf.icons:
+      self._state.icon_config = self.conf.icons
+    else:
+      self._state.icon_config = {"folder": "TreeViewFolder", "file": "TreeViewFile"}
+  
+  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
+    if parent_id is None and node.parent is not None:
+      parent_id = node.parent
+    
+    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 ensure_path(self, path: str, node_type="folder"):
+    """Add a node to the tree based on a path string.
+
+    Args:
+        path: Dot-separated path string (e.g., "folder1.folder2.file")
+
+    Raises:
+        ValueError: If path contains empty parts after stripping
+    """
+    if path is None:
+      raise ValueError(f"Invalid path: path is None")
+    
+    path = path.strip().strip(".")
+    if path == "":
+      raise ValueError(f"Invalid path: path is empty")
+    
+    parent_id = None
+    current_nodes = [node for node in self._state.items.values() if node.parent is None]
+    
+    path_parts = path.split(".")
+    for part in path_parts:
+      part = part.strip()
+      
+      # Validate that part is not empty after stripping
+      if part == "":
+        raise ValueError(f"Invalid path: path contains empty parts")
+      
+      node = [node for node in current_nodes if node.label == part]
+      if len(node) == 0:
+        # create the node
+        node = TreeNode(label=part, type=node_type)
+        self.add_node(node, parent_id=parent_id)
+      else:
+        node = node[0]
+      
+      current_nodes = [self._state.items[node_id] for node_id in node.children]
+      parent_id = node.id
+    
+    return parent_id
+  
+  def get_selected_id(self):
+    if self._state.selected is None:
+      return None
+    return self._state.items[self._state.selected].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 clear(self):
+    state = self._state.copy()
+    state.items = {}
+    state.opened = []
+    state.selected = None
+    state.editing = None
+    self._state.update(state)
+    return self
+  
+  def get_bag(self, node_id: str):
+    try:
+      return self._state.items[node_id].bag
+    except KeyError:
+      return None
+  
+  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 and selection)."""
+    if node_id not in self._state.items:
+      raise ValueError(f"Node {node_id} does not exist")
+    
+    self._state.selected = node_id
+    self._state.editing = node_id
+    return self
+  
+  def _save_rename(self, node_id: str, node_label: str):
+    """Save renamed node with new label."""
+    logger.debug(f"_save_rename {node_id=}, {node_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."""
+    logger.debug("_cancel_rename")
+    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")
+    
+    # Cancel edit mode when selecting
+    self._state.editing = None
+    self._state.selected = node_id
+    return self
+  
+  def _render_action_buttons(self, node_id: str):
+    """Render action buttons for a node (visible on hover)."""
+    is_leaf = len(self._state.items[node_id].children) == 0
+    conf = self.conf
+    
+    add_visible = conf.add_leaf if is_leaf else conf.add_node
+    edit_visible = conf.edit_leaf if is_leaf else conf.edit_node
+    delete_visible = conf.delete_leaf if is_leaf else conf.delete_node
+    
+    buttons = []
+    if add_visible:
+      buttons.append(mk.icon(add_circle20_regular, command=self.commands.add_child(node_id)))
+    if edit_visible:
+      buttons.append(mk.icon(edit20_regular, command=self.commands.start_rename(node_id)))
+    if delete_visible:
+      buttons.append(mk.icon(delete20_regular, command=self.commands.delete_node(node_id)))
+    
+    return Div(*buttons, 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 (only for nodes with children)
+    if has_children:
+      toggle = mk.icon(
+        chevron_down20_regular if is_expanded else chevron_right20_regular,
+        command=self.commands.toggle_node(node_id))
+    else:
+      toggle = None
+    
+    # Label or input for editing
+    icon = IconsHelper.get(self._state.icon_config.get(node.type, None))
+    if is_editing:
+      label_element = mk.mk(Input(
+        name="node_label",
+        value=node.label,
+        cls="mf-treenode-input input input-sm"
+      ), command=CommandTemplate("TreeView.SaveRename", self.commands.save_rename, args=[node_id]))
+    else:
+      label_element = mk.label(
+        node.label,
+        icon=icon,
+        cls="mf-treenode-label text-sm",
+        enable_button=False,
+        command=self.commands.select_node(node_id)
+      )
+    
+    offset = 20
+    if icon is not None:
+      offset += 25
+    
+    # Node element
+    node_element = Div(
+      toggle,
+      label_element,
+      *([self._render_action_buttons(node_id)] if not is_editing else []),
+      cls=f"mf-treenode flex {'selected' if is_selected and not is_editing else ''}",
+      style=f"padding-left: {level * offset}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",
+      data_node_id=node_id,
+    )
+  
+  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": {"command": self.commands.cancel_rename(), "require_inside": False}}, _id="-keyboard"),
+      id=self._id,
+      cls="mf-treeview"
+    )
+  
+  def __ft__(self):
+    """FastHTML magic method for rendering."""
+    return self.render()

src/myfasthtml/controls/UserProfile.py

@@ -33,7 +33,10 @@ class UserProfileState:
 
 class Commands(BaseCommands):
   def update_dark_mode(self):
-    return Command("UpdateDarkMode", "Set the dark mode", self._owner.update_dark_mode).htmx(target=None)
+    return Command("UpdateDarkMode",
+                   "Set the dark mode",
+                   self._owner,
+                   self._owner.update_dark_mode).htmx(target=None)
 
 
 class UserProfile(SingleInstance):

src/myfasthtml/controls/VisNetwork.py

@@ -25,19 +25,33 @@ class VisNetworkState(DbObject):
           },
           "physics": {"enabled": True}
       }
+      self.events_handlers: dict = {}  # {event_name: command_url}
 
 
 class VisNetwork(MultipleInstance):
-  def __init__(self, parent, _id=None, nodes=None, edges=None, options=None):
+  def __init__(self, parent, _id=None, nodes=None, edges=None, options=None, events_handlers=None):
     super().__init__(parent, _id=_id)
     logger.debug(f"VisNetwork created with id: {self._id}")
     
+    # possible events (expected in snake_case
+    # - select_node → selectNode
+    # - select → select
+    # - click → click
+    # - double_click → doubleClick
+    
     self._state = VisNetworkState(self)
-    self._update_state(nodes, edges, options)
+    
+    # Convert Commands to URLs
+    handlers_htmx_options = {
+        event_name: command.ajax_htmx_options()
+        for event_name, command in events_handlers.items()
+    } if events_handlers else {}
+    
+    self._update_state(nodes, edges, options, handlers_htmx_options)
   
-  def _update_state(self, nodes, edges, options):
-    logger.debug(f"Updating VisNetwork state with {nodes=}, {edges=}, {options=}")
-    if not nodes and not edges and not options:
+  def _update_state(self, nodes, edges, options, events_handlers=None):
+    logger.debug(f"Updating VisNetwork state with {nodes=}, {edges=}, {options=}, {events_handlers=}")
+    if not nodes and not edges and not options and not events_handlers:
       return
     
     state = self._state.copy()
@@ -47,6 +61,8 @@ class VisNetwork(MultipleInstance):
       state.edges = edges
     if options is not None:
       state.options = options
+    if events_handlers is not None:
+      state.events_handlers = events_handlers
     
     self._state.update(state)
   
@@ -70,6 +86,34 @@ class VisNetwork(MultipleInstance):
     # Convert Python options to JS
     js_options = json.dumps(self._state.options, indent=2)
     
+    # Map Python event names to vis-network event names
+    event_name_map = {
+        "select_node": "selectNode",
+        "select": "select",
+        "click": "click",
+        "double_click": "doubleClick"
+    }
+    
+    # Generate event handlers JavaScript
+    event_handlers_js = ""
+    for event_name, command_htmx_options in self._state.events_handlers.items():
+      vis_event_name = event_name_map.get(event_name, event_name)
+      event_handlers_js += f"""
+              network.on('{vis_event_name}', function(params) {{
+                const event_data = {{
+                  event_name: '{event_name}',
+                  nodes: params.nodes,
+                  edges: params.edges,
+                  pointer: params.pointer
+                }};
+                htmx.ajax('POST', '{command_htmx_options['url']}', {{
+                  values: {{event_data: JSON.stringify(event_data)}},
+                  target: '{command_htmx_options['target']}',
+                  swap: '{command_htmx_options['swap']}'
+                }});
+              }});
+"""
+    
     return (
         Div(
           id=self._id,
@@ -92,6 +136,7 @@ class VisNetwork(MultipleInstance):
               }};
               const options = {js_options};
               const network = new vis.Network(container, data, options);
+              {event_handlers_js}
             }})();
         """)
     )

src/myfasthtml/controls/datagrid_objects.py

@@ -0,0 +1,59 @@
+from dataclasses import dataclass, field
+
+from myfasthtml.core.constants import ColumnType, DATAGRID_DEFAULT_COLUMN_WIDTH, ViewType
+
+
+@dataclass
+class DataGridRowState:
+  row_id: int
+  visible: bool = True
+  height: int | None = None
+  format: list = field(default_factory=list)
+
+
+@dataclass
+class DataGridColumnState:
+  col_id: str  # name of the column: cannot be changed
+  col_index: int  # index of the column in the dataframe: cannot be changed
+  title: str = None
+  type: ColumnType = ColumnType.Text
+  visible: bool = True
+  width: int = DATAGRID_DEFAULT_COLUMN_WIDTH
+  format: list = field(default_factory=list)  #
+  formula: str = ""  # formula expression for ColumnType.Formula columns
+  
+  def copy(self):
+    props = {k: v for k, v in self.__dict__.items() if not k.startswith("_")}
+    return DataGridColumnState(**props)
+
+
+@dataclass
+class DatagridEditionState:
+  under_edition: tuple[int, int] | None = None
+  previous_under_edition: tuple[int, int] | None = None
+
+
+@dataclass
+class DatagridSelectionState:
+  """
+  element_id: str
+    "tcell_grid_id_col_row" for cell
+    (min_col, min_row, max_col, max_row) for range
+  """
+  selected: tuple[int, int] | None = None  # column first, then row
+  last_selected: tuple[int, int] | None = None
+  selection_mode: str = None  # valid values are "row", "column", "range" or None for "cell"
+  extra_selected: list[tuple[str, str | int | tuple]] = field(default_factory=list)  # (selection_mode, element_id)
+  last_extra_selected: tuple[int, int] = None
+
+
+@dataclass
+class DataGridHeaderFooterConf:
+  conf: dict[str, str] = field(default_factory=dict)  # first 'str' is the column id
+
+
+@dataclass
+class DatagridView:
+  name: str
+  type: ViewType = ViewType.Table
+  columns: list[DataGridColumnState] = None

src/myfasthtml/controls/helpers.py

@@ -1,7 +1,9 @@
+import pandas as pd
 from fasthtml.components import *
 
 from myfasthtml.core.bindings import Binding
-from myfasthtml.core.commands import Command
+from myfasthtml.core.commands import Command, CommandTemplate
+from myfasthtml.core.constants import ColumnType
 from myfasthtml.core.utils import merge_classes
 
 
@@ -14,13 +16,26 @@ class Ids:
 class mk:
   
   @staticmethod
-  def button(element, command: Command = None, binding: Binding = None, **kwargs):
+  def button(element, command: Command | CommandTemplate = 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
   def dialog_buttons(ok_title: str = "OK",
                      cancel_title: str = "Cancel",
-                     on_ok: Command = None,
+                     on_ok: Command | CommandTemplate = None,
                      on_cancel: Command = None,
                      cls=None):
     return Div(
@@ -33,19 +48,46 @@ class mk:
     )
   
   @staticmethod
-  def icon(icon, size=20,
+  def icon(icon,
+           size=20,
            can_select=True,
            can_hover=False,
+           tooltip=None,
            cls='',
-           command: Command = None,
+           command: Command | CommandTemplate = 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 tooltip:
+    :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 '',
+                               'flex items-center justify-center',
                                cls,
                                kwargs)
     
+    if tooltip:
+      merged_cls = merge_classes(merged_cls, "mf-tooltip")
+      kwargs["data-tooltip"] = tooltip
+    
     return mk.mk(Div(icon, cls=merged_cls, **kwargs), command=command, binding=binding)
   
   @staticmethod
@@ -53,13 +95,17 @@ class mk:
             icon=None,
             size: str = "sm",
             cls='',
-            command: Command = None,
+            enable_button=True,
+            command: Command | CommandTemplate = None,
             binding: Binding = None,
             **kwargs):
-    merged_cls = merge_classes("flex", cls, kwargs)
+    merged_cls = merge_classes("flex truncate items-center pr-2",
+                               "mf-button" if command and enable_button else None,
+                               cls,
+                               kwargs)
     icon_part = Span(icon, cls=f"mf-icon-{mk.convert_size(size)} mr-1") if icon else None
-    text_part = Span(text, cls=f"text-{size}")
-    return mk.mk(Label(icon_part, text_part, cls=merged_cls, **kwargs), command=command, binding=binding)
+    text_part = Span(text, cls=f"text-{size} truncate")
+    return mk.mk(Span(icon_part, text_part, cls=merged_cls, **kwargs), command=command, binding=binding)
   
   @staticmethod
   def convert_size(size: str):
@@ -70,7 +116,10 @@ class mk:
             replace("xl", "32"))
   
   @staticmethod
-  def manage_command(ft, command: Command):
+  def manage_command(ft, command: Command | CommandTemplate):
+    if isinstance(command, CommandTemplate):
+      command = command.command
+    
     if command:
       ft = command.bind_ft(ft)
     
@@ -91,7 +140,15 @@ class mk:
     return ft
   
   @staticmethod
-  def mk(ft, command: Command = None, binding: Binding = None, init_binding=True):
+  def mk(ft, command: Command | CommandTemplate = None, binding: Binding = None, init_binding=True):
     ft = mk.manage_command(ft, command) if command else ft
     ft = mk.manage_binding(ft, binding, init_binding=init_binding) if binding else ft
     return ft
+
+
+column_type_defaults = {
+    ColumnType.Number: 0,
+    ColumnType.Text: "",
+    ColumnType.Bool: False,
+    ColumnType.Datetime: pd.NaT,
+}