Fixed datalist example

Added other TestableControls

.gitignore

@@ -6,6 +6,7 @@ app.egg-info
 htmlcov
 .cache
 .venv
+src/main.py
 tests/settings_from_unit_testing.json
 tests/TestDBEngineRoot
 tests/*.png
@@ -22,6 +23,7 @@ tools.db
 .idea/sqldialects.xml
 .idea_bak
 **/*.prof
+**/*.db
 
 # Created by .ignore support plugin (hsz.mobi)
 ### Python template

Makefile

@@ -14,5 +14,14 @@ clean-build: clean-package
 	find . -name "*.pyc" -exec rm -f {} +
 	find . -name "*.pyo" -exec rm -f {} +
 
+clean-tests:
+	rm -rf .sesskey
+	rm -rf tests/.sesskey
+	rm -rf tests/*.db
+
 # Alias to clean everything
-clean: clean-build
+clean: clean-build clean-tests
+
+clean-all : clean
+	rm -rf src/.sesskey
+	rm -rf src/Users.db

README.md

@@ -1,6 +1,7 @@
 # MyFastHtml
 
 A utility library designed to simplify the development of FastHtml applications by providing:
+
 - Predefined pages for common functionalities (e.g., authentication, user management).
 - A command management system to facilitate client-server interactions.
 - Helpers to create interactive controls more easily.
@@ -10,10 +11,12 @@ A utility library designed to simplify the development of FastHtml applications
 
 ## Features
 
-- **Dynamic HTML with HTMX**: Simplify dynamic interaction using attributes like `hx-post` and custom routes like `/commands`.
+- **Dynamic HTML with HTMX**: Simplify dynamic interaction using attributes like `hx-post` and custom routes like
+  `/commands`.
 - **Command management**: Write server-side logic in Python while abstracting the complexities of HTMX.
+- **Binding management**: Mechanism to bind two html element together.
 - **Control helpers**: Easily create reusable components like buttons.
-- **Predefined Pages (Roadmap)**: Include common pages like login, user management, and customizable dashboards.
+- **Login Pages**: Include common pages for login, user management, and customizable dashboards.
 
 > _**Note:** Support for state persistence is currently under construction._
 
@@ -31,28 +34,59 @@ pip install myfasthtml
 
 ## Quick Start
 
-Here’s a simple example of creating an **interactive button** linked to a command:
+### FastHtml Application
 
-### Example: Button with a Command
+To create a simple FastHtml application, you can use the `create_app` function:
 
 ```python
-from fasthtml.fastapp import fast_app
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.myfastapp import create_app
+
+app, rt = create_app(protect_routes=False)
+
+
+@rt("/")
+def get_homepage():
+  return Div("Hello, FastHtml!")
+
+
+if __name__ == "__main__":
+  serve(port=5002)
+
+
+```
+
+### Use Commands
+
+```python
+from fasthtml import serve
+
+from myfasthtml.controls.helpers import mk_button
 from myfasthtml.core.commands import Command
-from myfasthtml.controls.button import mk_button
+from myfasthtml.myfastapp import create_app
+
 
 # Define a simple command action
 def say_hello():
   return "Hello, FastHtml!"
 
+
 # Create the command
 hello_command = Command("say_hello", "Responds with a greeting", say_hello)
 
-# Create the app and define a route with a button
-app, rt = fast_app(default_hdrs=False)
+# Create the app
+app, rt = create_app(protect_routes=False)
+
 
 @rt("/")
 def get_homepage():
   return mk_button("Click Me!", command=hello_command)
+
+
+if __name__ == "__main__":
+  serve(port=5002)
 ```
 
 - When the button is clicked, the `say_hello` command will be executed, and the server will return the response.
@@ -60,35 +94,61 @@ def get_homepage():
 
 ---
 
+### Bind components
+
+```python
+@dataclass
+class Data:
+  value: str = "Hello World"
+  checked: bool = False
+
+# Binds an Input with a label
+mk.mk(Input(name="input_name"), binding=Binding(data, attr="value").htmx(trigger="input changed")),
+mk.mk(Label("Text"), binding=Binding(data, attr="value")),
+
+# Binds a checkbox with a labl
+mk.mk(Input(name="checked_name", type="checkbox"), binding=Binding(data, attr="checked")),
+mk.mk(Label("Text"), binding=Binding(data, attr="checked")),
+```
+
 ## Planned Features (Roadmap)
 
 ### Predefined Pages
+
 The library will include predefined pages for:
+
 - **Authentication**: Login, signup, password reset.
 - **User Management**: User profile and administration pages.
 - **Dashboard Templates**: Fully customizable dashboard components.
 - **Error Pages**: Detailed and styled error messages (e.g., 404, 500).
 
 ### State Persistence
-Controls will have their state automatically synchronized between the client and the server. This feature is currently under construction.
+
+Controls will have their state automatically synchronized between the client and the server. This feature is currently
+under construction.
 
 ---
 
 ## Advanced Features
 
 ### Command Management System
-Commands allow you to simplify frontend/backend interaction. Instead of writing HTMX attributes manually, you can define Python methods and handle them as commands.
+
+Commands allow you to simplify frontend/backend interaction. Instead of writing HTMX attributes manually, you can define
+Python methods and handle them as commands.
 
 #### Example
+
 Here’s how `Command` simplifies dynamic interaction:
 
 ```python
 from myfasthtml.core.commands import Command
 
+
 # Define a command
 def custom_action(data):
   return f"Received: {data}"
 
+
 my_command = Command("custom", "Handles custom logic", custom_action)
 
 # Get the HTMX parameters automatically
@@ -106,9 +166,659 @@ Use the `get_htmx_params()` method to directly integrate commands into HTML comp
 
 ---
 
+## Testing
+
+### TestableElements
+
+#### TestableTextarea
+
+**Use case:** Multi-line text input
+
+**Methods:**
+
+- `send(value)` - Set the textarea value
+- `append(text)` - Append text to current value
+- `clear()` - Clear the textarea
+
+**Example:**
+
+```python
+def test_textarea_binding(user, rt):
+  @rt("/")
+  def index():
+    data = Data("Initial text")
+    textarea = Textarea(name="message")
+    label = Label()
+    
+    mk.manage_binding(textarea, Binding(data))
+    mk.manage_binding(label, Binding(data))
+    
+    return textarea, label
+  
+  user.open("/")
+  textarea = user.find_element("textarea")
+  
+  textarea.send("New message")
+  user.should_see("New message")
+  
+  textarea.append("\nMore text")
+  user.should_see("New message\nMore text")
+  
+  textarea.clear()
+  user.should_see("")
+```
+
+#### TestableSelect
+
+**Use case:** Dropdown selection
+
+**Properties:**
+
+- `is_multiple` - Check if multiple selection is enabled
+- `options` - List of available options
+
+**Methods:**
+
+- `select(value)` - Select option by value
+- `select_by_text(text)` - Select option by visible text
+- `deselect(value)` - Deselect option (multiple select only)
+
+**Example (Single Select):**
+
+```python
+def test_select_binding(user, rt):
+  @rt("/")
+  def index():
+    data = Data("option1")
+    select = Select(
+      Option("First", value="option1"),
+      Option("Second", value="option2"),
+      Option("Third", value="option3"),
+      name="choice"
+    )
+    label = Label()
+    
+    mk.manage_binding(select, Binding(data))
+    mk.manage_binding(label, Binding(data))
+    
+    return select, label
+  
+  user.open("/")
+  select_elt = user.find_element("select")
+  
+  select_elt.select("option2")
+  user.should_see("option2")
+  
+  select_elt.select_by_text("Third")
+  user.should_see("option3")
+```
+
+**Example (Multiple Select):**
+
+```python
+def test_multiple_select_binding(user, rt):
+  @rt("/")
+  def index():
+    data = ListData(["option1"])
+    select = Select(
+      Option("First", value="option1"),
+      Option("Second", value="option2"),
+      Option("Third", value="option3"),
+      name="choices",
+      multiple=True
+    )
+    label = Label()
+    
+    mk.manage_binding(select, Binding(data))
+    mk.manage_binding(label, Binding(data))
+    
+    return select, label
+  
+  user.open("/")
+  select_elt = user.find_element("select")
+  
+  select_elt.select("option2")
+  user.should_see("['option1', 'option2']")
+  
+  select_elt.deselect("option1")
+  user.should_see("['option2']")
+```
+
+#### TestableRange
+
+**Use case:** Slider input
+
+**Properties:**
+
+- `min_value` - Minimum value
+- `max_value` - Maximum value
+- `step` - Step increment
+
+**Methods:**
+
+- `set(value)` - Set slider to specific value (auto-clamped)
+- `increase()` - Increase by one step
+- `decrease()` - Decrease by one step
+
+**Example:**
+
+```python
+def test_range_binding(user, rt):
+  @rt("/")
+  def index():
+    data = NumericData(50)
+    range_input = Input(
+      type="range",
+      name="volume",
+      min="0",
+      max="100",
+      step="10",
+      value="50"
+    )
+    label = Label()
+    
+    mk.manage_binding(range_input, Binding(data))
+    mk.manage_binding(label, Binding(data))
+    
+    return range_input, label
+  
+  user.open("/")
+  slider = user.find_element("input[type='range']")
+  
+  slider.set(75)
+  user.should_see("75")
+  
+  slider.increase()
+  user.should_see("85")
+  
+  slider.decrease()
+  user.should_see("75")
+```
+
+#### TestableRadio
+
+**Use case:** Radio button (mutually exclusive options)
+
+**Properties:**
+
+- `radio_value` - The value attribute of this radio
+- `is_checked` - Check if this radio is selected
+
+**Methods:**
+
+- `select()` - Select this radio button
+
+**Example:**
+
+```python
+def test_radio_binding(user, rt):
+  @rt("/")
+  def index():
+    data = Data("option1")
+    
+    radio1 = Input(type="radio", name="choice", value="option1", checked=True)
+    radio2 = Input(type="radio", name="choice", value="option2")
+    radio3 = Input(type="radio", name="choice", value="option3")
+    label = Label()
+    
+    mk.manage_binding(radio1, Binding(data))
+    mk.manage_binding(radio2, Binding(data))
+    mk.manage_binding(radio3, Binding(data))
+    mk.manage_binding(label, Binding(data))
+    
+    return radio1, radio2, radio3, label
+  
+  user.open("/")
+  
+  radio2 = user.find_element("input[value='option2']")
+  radio2.select()
+  user.should_see("option2")
+  
+  radio3 = user.find_element("input[value='option3']")
+  radio3.select()
+  user.should_see("option3")
+```
+
+#### TestableButton
+
+**Use case:** Clickable button with HTMX
+
+**Properties:**
+
+- `text` - Visible text of the button
+
+**Methods:**
+
+- `click()` - Click the button (triggers HTMX if configured)
+
+**Example:**
+
+```python
+def test_button_binding(user, rt):
+  @rt("/")
+  def index():
+    data = Data("initial")
+    button = Button(
+      "Click me",
+      hx_post="/update",
+      hx_vals='{"action": "clicked"}'
+    )
+    label = Label()
+    
+    mk.manage_binding(button, Binding(data))
+    mk.manage_binding(label, Binding(data))
+    
+    return button, label
+  
+  @rt("/update")
+  def update(action: str):
+    data = Data("updated")
+    label = Label()
+    mk.manage_binding(label, Binding(data))
+    return label
+  
+  user.open("/")
+  
+  button = user.find_element("button")
+  button.click()
+  user.should_see("updated")
+```
+
+#### TestableDatalist
+
+**Use case:** Input with autocomplete suggestions (combobox)
+
+**Properties:**
+
+- `suggestions` - List of available suggestions
+
+**Methods:**
+
+- `send(value)` - Set input value (any value, not restricted to suggestions)
+- `select_suggestion(value)` - Select a value from suggestions
+
+**Example:**
+
+```python
+def test_datalist_binding(user, rt):
+  @rt("/")
+  def index():
+    data = Data("")
+    
+    datalist = Datalist(
+      Option(value="apple"),
+      Option(value="banana"),
+      Option(value="cherry"),
+      id="fruits"
+    )
+    input_elt = Input(name="fruit", list="fruits")
+    label = Label()
+    
+    mk.manage_binding(input_elt, Binding(data))
+    mk.manage_binding(label, Binding(data))
+    
+    return input_elt, datalist, label
+  
+  user.open("/")
+  
+  input_with_list = user.find_element("input[list='fruits']")
+  
+  # Free text input
+  input_with_list.send("mango")
+  user.should_see("mango")
+  
+  # Select from suggestions
+  input_with_list.select_suggestion("banana")
+  user.should_see("banana")
+```
+
+## CSS Selectors for Finding Elements
+
+When using `user.find_element()`, use these selectors:
+
+| Component      | Selector Example                                       |
+|----------------|--------------------------------------------------------|
+| Input (text)   | `"input[name='field_name']"` or `"input[type='text']"` |
+| Checkbox       | `"input[type='checkbox']"`                             |
+| Radio          | `"input[type='radio']"` or `"input[value='option1']"`  |
+| Range          | `"input[type='range']"`                                |
+| Textarea       | `"textarea"` or `"textarea[name='field_name']"`        |
+| Select         | `"select"` or `"select[name='field_name']"`            |
+| Button         | `"button"` or `"button.primary"`                       |
+| Datalist Input | `"input[list='datalist_id']"`                          |
+
+## Binding
+
+### Overview
+
+This package contains everything needed to implement a complete binding system for FastHTML components.
+
+### Fully Supported Components Summary
+
+| Component         | Testable Class   | Binding Support |
+|-------------------|------------------|-----------------|
+| Input (text)      | TestableInput    | ✅               |
+| Checkbox          | TestableCheckbox | ✅               |
+| Textarea          | TestableTextarea | ✅               |
+| Select (single)   | TestableSelect   | ✅               |
+| Select (multiple) | TestableSelect   | ✅               |
+| Range (slider)    | TestableRange    | ✅               |
+| Radio buttons     | TestableRadio    | ✅               |
+| Button            | TestableButton   | ✅               |
+| Input + Datalist  | TestableDatalist | ✅               |
+
+### Supported Components
+
+#### 1. Input (Text)
+
+```python
+# Methods
+input.send(value)
+
+# Binding modes
+- ValueChange(default)
+- Text
+updates
+trigger
+data
+changes
+```
+
+#### 2. Checkbox
+
+```python
+# Methods
+checkbox.check()
+checkbox.uncheck()
+checkbox.toggle()
+
+# Binding modes
+- AttributePresence
+- Boolean
+data
+binding
+```
+
+#### 3. Textarea
+
+```python
+# Methods
+textarea.send(value)
+textarea.append(text)
+textarea.clear()
+
+# Binding modes
+- ValueChange
+- Multi - line
+text
+support
+```
+
+#### 4. Select (Single)
+
+```python
+# Methods
+select.select(value)
+select.select_by_text(text)
+
+# Properties
+select.options  # List of available options
+select.is_multiple  # False for single select
+
+# Binding modes
+- ValueChange
+- String
+value
+binding
+```
+
+#### 5. Select (Multiple)
+
+```python
+# Methods
+select.select(value)
+select.deselect(value)
+select.select_by_text(text)
+
+# Properties
+select.options
+select.is_multiple  # True for multiple select
+
+# Binding modes
+- ValueChange
+- List
+data
+binding
+```
+
+#### 6. Range (Slider)
+
+```python
+# Methods
+range.set(value)  # Auto-clamps to min/max
+range.increase()
+range.decrease()
+
+# Properties
+range.min_value
+range.max_value
+range.step
+
+# Binding modes
+- ValueChange
+- Numeric
+data
+binding
+```
+
+#### 7. Radio Buttons
+
+```python
+# Methods
+radio.select()
+
+# Properties
+radio.radio_value  # Value attribute
+radio.is_checked
+
+# Binding modes
+- ValueChange
+- String
+value
+binding
+- Mutually
+exclusive
+group
+behavior
+```
+
+#### 8. Button
+
+```python
+# Methods
+button.click()
+
+# Properties
+button.text  # Visible button text
+
+# Binding modes
+- Triggers
+HTMX
+requests
+- Can
+update
+bindings
+via
+server
+response
+```
+
+#### 9. Input + Datalist (Combobox)
+
+```python
+# Methods
+datalist.send(value)  # Any value
+datalist.select_suggestion(value)  # From suggestions
+
+# Properties
+datalist.suggestions  # Available options
+
+# Binding modes
+- ValueChange
+- Hybrid: free
+text + suggestions
+```
+
+### Architecture Overview
+
+#### Three-Phase Binding Lifecycle
+
+```python
+# Phase 1: Create (inactive)
+binding = Binding(data, "value")
+
+# Phase 2: Configure + Activate
+binding.bind_ft(element, name="input", attr="value")
+
+# Phase 3: Deactivate (cleanup)
+binding.deactivate()
+```
+
+#### Data Flow
+
+```
+User Input → HTMX Component → HTMX Request → Binding.update()
+                                                       ↓
+                                             setattr(data, attr, value)
+                                                       ↓
+                                                Observable triggers
+                                                       ↓
+                                                Binding.notify()
+                                                       ↓
+                                              Update all bound UI elements
+```
+
+### Quick Reference
+
+#### Creating a Binding
+
+```python
+# Simple binding
+binding = Binding(data, "value").bind_ft(
+  Input(name="input"),
+  name="input",
+  attr="value"
+)
+
+# With detection and update modes
+binding = Binding(data, "checked").bind_ft(
+  Input(type="checkbox", name="check"),
+  name="check",
+  attr="checked",
+  detection_mode=DetectionMode.AttributePresence,
+  update_mode=UpdateMode.AttributePresence
+)
+
+# With data converter
+binding = Binding(data, "value").bind_ft(
+  Input(type="checkbox", name="check"),
+  name="check",
+  attr="checked",
+  data_converter=BooleanConverter()
+)
+```
+
+#### Testing a Component
+
+```python
+def test_component_binding(user, rt):
+  @rt("/")
+  def index():
+    data = Data("initial")
+    component = Component(name="field")
+    label = Label()
+    
+    mk.manage_binding(component, Binding(data))
+    mk.manage_binding(label, Binding(data))
+    
+    return component, label
+  
+  user.open("/")
+  user.should_see("initial")
+  
+  testable = user.find_element("selector")
+  testable.method("new value")
+  user.should_see("new value")
+```
+
+#### Managing Binding Lifecycle
+
+```python
+# Create
+binding = Binding(data, "value")
+
+# Activate (via bind_ft)
+binding.bind_ft(element, name="field")
+
+# Deactivate
+binding.deactivate()
+
+# Reactivate with new element
+binding.bind_ft(new_element, name="field")
+```
+
+### Pattern 1: Bidirectional Binding
+
+All components support bidirectional binding:
+
+- UI changes update the data object
+- Data object changes update the UI (via Label or other bound components)
+
+```python
+input_elt = Input(name="field")
+label_elt = Label()
+
+mk.manage_binding(input_elt, Binding(data))
+mk.manage_binding(label_elt, Binding(data))
+
+# Change via UI
+testable_input.send("new value")
+# Label automatically updates to show "new value"
+```
+
+### Pattern 2: Multiple Components, Same Data
+
+Multiple different components can bind to the same data:
+
+```python
+input_elt = Input(name="input")
+textarea_elt = Textarea(name="textarea")
+label_elt = Label()
+
+# All bind to the same data object
+mk.manage_binding(input_elt, Binding(data))
+mk.manage_binding(textarea_elt, Binding(data))
+mk.manage_binding(label_elt, Binding(data))
+
+# Changing any component updates all others
+```
+
+### Pattern 3: Component Without Name
+
+Components without a name attribute won't trigger updates but won't crash:
+
+```python
+input_elt = Input()  # No name attribute
+label_elt = Label()
+
+mk.manage_binding(label_elt, Binding(data))
+# Input won't trigger updates, but label will still display data
+```
+
 ## Contributing
 
 We welcome contributions! To get started:
+
 1. Fork the repository.
 2. Create a feature branch.
 3. Submit a pull request with clear descriptions of your changes.
@@ -144,7 +854,9 @@ MyFastHtml
 ### Notable Classes and Methods
 
 #### 1. `Command`
+
 Represents a backend action with server communication.
+
 - **Attributes:**
     - `id`: Unique identifier for the command.
     - `name`: Command name (e.g., `say_hello`).
@@ -152,14 +864,18 @@ Represents a backend action with server communication.
 - **Method:** `get_htmx_params()` generates HTMX attributes.
 
 #### 2. `mk_button`
+
 Simplifies the creation of interactive buttons linked to commands.
+
 - **Arguments:**
     - `element` (str): The label for the button.
     - `command` (Command): Command associated with the button.
     - `kwargs`: Additional button attributes.
 
 #### 3. `LoginPage`
+
 Predefined login page that provides a UI template ready for integration.
+
 - **Constructor Parameters:**
     - `settings_manager`: Configuration/settings object.
     - `error_message`: Optional error message to display.
@@ -176,4 +892,43 @@ Predefined login page that provides a UI template ready for integration.
 ## Exceptions
 
 No custom exceptions defined yet. (Placeholder for future use.)
+
+## Troubleshooting
+
+### Issue: "No element found matching selector"
+
+**Cause:** Incorrect CSS selector or element not in DOM
+
+**Solution:** Check the HTML output and adjust selector
+
+```python
+# Debug: Print the HTML
+print(user.get_content())
+
+# Try different selectors
+user.find_element("textarea")
+user.find_element("textarea[name='message']")
 ```
+
+### Issue: TestableControl has no attribute 'send'
+
+**Cause:** Wrong testable class returned by factory
+
+**Solution:** Verify factory method is updated correctly
+
+### Issue: AttributeError on TestableTextarea
+
+**Cause:** Class not properly inheriting from TestableControl
+
+**Solution:** Check class hierarchy and imports
+
+### Issue: Select options not found
+
+**Cause:** `_update_fields()` not parsing select correctly
+
+**Solution:** Verify TestableElement properly parses select/option tags
+
+## Relase History
+
+* 0.1.0 : First release
+* 0.2.0 : Updated to myauth 0.2.0

pyproject.toml

@@ -7,7 +7,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "myfasthtml"
-version = "0.1.0"
+version = "0.2.0"
 description = "Set of tools to quickly create HTML pages using FastHTML."
 readme = "README.md"
 authors = [
@@ -31,8 +31,16 @@ classifiers = [
 #  Note: 'requirements.txt' is for development, this is for the package
 # -------------------------------------------------------------------
 dependencies = [
+    "argon2-cffi",
+    "email-validator",
+    "httptools",
     "myauth",
     "myutils",
+    "python-fasthtml",
+    "PyYAML",
+    "uvloop",
+    "watchfiles",
+    "websockets",
 ]
 
 [project.urls]
@@ -64,3 +72,9 @@ dev = [
 [tool.setuptools]
 package-dir = { "" = "src" }
 packages = ["myfasthtml"]
+
+[tool.setuptools.package-data]
+myfasthtml = [
+    "assets/*.css",
+    "assets/*.js"
+]

requirements.txt

@@ -6,11 +6,14 @@ apswutils==0.1.0
 argon2-cffi==25.1.0
 argon2-cffi-bindings==25.1.0
 beautifulsoup4==4.14.2
+build==1.3.0
 certifi==2025.10.5
 cffi==2.0.0
+charset-normalizer==3.4.4
 click==8.3.0
 cryptography==46.0.3
 dnspython==2.8.0
+docutils==0.22.2
 ecdsa==0.19.1
 email-validator==2.3.0
 fastapi==0.120.0
@@ -20,13 +23,25 @@ h11==0.16.0
 httpcore==1.0.9
 httptools==0.7.1
 httpx==0.28.1
+id==1.5.0
 idna==3.11
 iniconfig==2.3.0
 itsdangerous==2.2.0
--e git+ssh://git@sheerka.synology.me:1010/kodjo/MyAuth.git@0138ac247a4a53dc555b94ec13119eba16e1db68#egg=myauth
+jaraco.classes==3.4.0
+jaraco.context==6.0.1
+jaraco.functools==4.3.0
+jeepney==0.9.0
+keyring==25.6.0
+markdown-it-py==4.0.0
+mdurl==0.1.2
+more-itertools==10.8.0
+myauth==0.2.0
+myutils==0.4.0
+nh3==0.3.1
 oauthlib==3.3.1
 packaging==25.0
 passlib==1.7.4
+pipdeptree==2.29.0
 pluggy==1.6.0
 pyasn1==0.6.1
 pycparser==2.23
@@ -34,6 +49,7 @@ pydantic==2.12.3
 pydantic-settings==2.11.0
 pydantic_core==2.41.4
 Pygments==2.19.2
+pyproject_hooks==1.2.0
 pytest==8.4.2
 python-dateutil==2.9.0.post0
 python-dotenv==1.1.1
@@ -41,13 +57,21 @@ python-fasthtml==0.12.30
 python-jose==3.5.0
 python-multipart==0.0.20
 PyYAML==6.0.3
+readme_renderer==44.0
+requests==2.32.5
+requests-toolbelt==1.0.0
+rfc3986==2.0.0
+rich==14.2.0
 rsa==4.9.1
+SecretStorage==3.4.0
 six==1.17.0
 sniffio==1.3.1
 soupsieve==2.8
 starlette==0.48.0
+twine==6.2.0
 typing-inspection==0.4.2
 typing_extensions==4.15.0
+urllib3==2.5.0
 uvicorn==0.38.0
 uvloop==0.22.1
 watchfiles==1.1.1

src/main.py

@@ -1,31 +0,0 @@
-from fasthtml import serve
-from fasthtml.components import Link, Script
-from fasthtml.fastapp import fast_app
-from myauth import create_auth_app_for_sqlite
-
-from myfasthtml.auth.routes import setup_auth_routes
-from myfasthtml.auth.utils import create_auth_beforeware
-
-beforeware = create_auth_beforeware()
-# Create FastHTML app
-daisyui_offline_links = [
-    Link(href="./myfasthtml/assets/daisyui-5.css", rel="stylesheet", type="text/css"),
-    Link(href="./myfasthtml/assets/daisyui-5-themes.css", rel="stylesheet", type="text/css"),
-    Script(src="./myfasthtml/assets/tailwindcss-browser@4.js"),
-]
-
-daisyui_online_links = [
-    Link(rel='stylesheet', href='https://cdn.jsdelivr.net/npm/daisyui@5/daisyui.css'),
-    Script(src='https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4'),
-]
-
-app, rt = fast_app(
-  # before=beforeware,
-  hdrs=tuple(daisyui_offline_links)
-)
-
-# Setup authentication routes
-setup_auth_routes(app, rt)
-
-if __name__ == "__main__":
-  serve()

src/myfasthtml/__init__.py

@@ -0,0 +1,4 @@
+import myfasthtml.auth
+import myfasthtml.controls
+import myfasthtml.core
+import myfasthtml.icons

src/myfasthtml/assets/myfasthtml.css

@@ -0,0 +1,15 @@
+.mf-icon-20 {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.mf-icon-16 {
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    margin-top: auto;
+    margin-bottom: 4px;
+}

src/myfasthtml/auth/pages/LoginPage.py

@@ -65,7 +65,7 @@ class LoginPage:
             cls="btn w-full font-bold py-2 px-4 rounded"
           ),
           
-          action="/login-p",
+          action="/login",
           method="post",
           cls="mb-6"
         ),

src/myfasthtml/auth/pages/RegisterPage.py

@@ -106,7 +106,16 @@ class RegisterPage:
             cls="btn w-full font-bold py-2 px-4 rounded"
           ),
           
-          action="register-p",
+          # Registration link
+          Div(
+            P(
+              "Already have an account? ",
+              A("Sign in here", href="/login", cls="text-blue-600 hover:underline"),
+              cls="text-sm text-gray-600 text-center"
+            )
+          ),
+          
+          action="register",
           method="post",
           cls="mb-6"
         ),

src/myfasthtml/auth/routes.py

@@ -18,7 +18,7 @@ from ..auth.utils import (
 )
 
 
-def setup_auth_routes(app, rt, mount_auth_app=True):
+def setup_auth_routes(app, rt, mount_auth_app=True, sqlite_db_path="Users.db"):
   """
   Setup all authentication and protected routes.
 
@@ -26,13 +26,14 @@ def setup_auth_routes(app, rt, mount_auth_app=True):
       app: FastHTML application instance
       rt: Route decorator from FastHTML
       mount_auth_app: Whether to mount the auth FastApi API routes
+      sqlite_db_path: by default, create a new SQLite database at this path
   """
   
   # ============================================================================
   # PUBLIC ROUTES (Login & Register)
   # ============================================================================
   
-  @rt("/login")
+  @rt("/login", methods=["GET"])
   def get(error: str = None):
     """
     Display login page.
@@ -45,8 +46,7 @@ def setup_auth_routes(app, rt, mount_auth_app=True):
     """
     return LoginPage(error_message=error)
   
-
-  @rt("/login-p")
+  @rt("/login", methods=["POST"])
   def post(email: str, password: str, session, redirect_url: str = "/"):
     """
     Handle login form submission.
@@ -79,7 +79,7 @@ def setup_auth_routes(app, rt, mount_auth_app=True):
       # Login failed - return error message via HTMX
       return LoginPage(error_message="Invalid email or password. Please try again.")
   
-  @rt("/register")
+  @rt("/register", methods=["GET"])
   def get(error: str = None):
     """
     Display registration page.
@@ -92,13 +92,14 @@ def setup_auth_routes(app, rt, mount_auth_app=True):
     """
     return RegisterPage(error_message=error)
   
-  @rt("/register-p")
+  @rt("/register", methods=["POST"])
   def post(email: str, username: str, password: str, confirm_password: str, session):
     """
     Handle registration form submission.
 
     Args:
         email: User email from form
+        username: User name of the
         password: User password from form
         confirm_password: Password confirmation from form
         session: FastHTML session object
@@ -107,12 +108,12 @@ def setup_auth_routes(app, rt, mount_auth_app=True):
         RegisterPage with success/error message via HTMX
     """
     # Validate password confirmation
-    # if password != confirm_password:
-    #   return RegisterPage(error_message="Passwords do not match. Please try again.")
-    #
-    # # Validate password length
-    # if len(password) < 8:
-    #   return RegisterPage(error_message="Password must be at least 8 characters long.")
+    if password != confirm_password:
+      return RegisterPage(error_message="Passwords do not match. Please try again.")
+    
+    # Validate password length
+    if len(password) < 8:
+      return RegisterPage(error_message="Password must be at least 8 characters long.")
     
     # Attempt registration
     result = register_user(email, username, password)
@@ -187,7 +188,7 @@ def setup_auth_routes(app, rt, mount_auth_app=True):
   
   def mount_auth_fastapi_api():
     # Mount FastAPI auth backend
-    auth_api = create_auth_app_for_sqlite("Users.db", "jwt-secret-to-change")
+    auth_api = create_auth_app_for_sqlite(sqlite_db_path, "jwt-secret-to-change")
     app.mount("/auth", auth_api)
   
   if mount_auth_app:

src/myfasthtml/auth/utils.py

@@ -26,11 +26,15 @@ DEFAULT_SKIP_PATTERNS = [
     r'/static/.*',
     r'.*\.css',
     r'.*\.js',
+    r'/myfasthtml/.*\.css',
+    r'/myfasthtml/.*\.js',
     '/login',
-    '/login2',
     '/register',
+    '/logout',
 ]
 
+http_client = httpx
+
 
 def create_auth_beforeware(additional_patterns: Optional[List[str]] = None) -> Beforeware:
   """
@@ -172,7 +176,7 @@ def login_user(email: str, password: str) -> Optional[Dict[str, Any]]:
       None if authentication fails
   """
   try:
-    response = httpx.post(
+    response = http_client.post(
       f"{API_BASE_URL}/auth/login",
       data={"username": email, "password": password},
       headers={"Content-Type": "application/x-www-form-urlencoded"},
@@ -198,6 +202,7 @@ def register_user(email: str, username: str, password: str) -> Optional[Dict[str
 
   Args:
       email: User email address
+      username: User name
       password: User password
 
   Returns:
@@ -205,17 +210,17 @@ def register_user(email: str, username: str, password: str) -> Optional[Dict[str
       None if registration fails
   """
   try:
-    response = httpx.post(
+    response = http_client.post(
       f"{API_BASE_URL}/auth/register",
       json={"email": email, "username": username, "password": password},
       timeout=10.0
     )
     
-    if response.status_code == 200:
+    if response.status_code in (200, 201):
       return response.json()
     
     return None
-  except httpx.HTTPError:
+  except httpx.HTTPError as ex:
     return None
 
 
@@ -231,7 +236,7 @@ def refresh_access_token(refresh_token: str) -> Optional[Dict[str, Any]]:
       None if refresh fails
   """
   try:
-    response = httpx.post(
+    response = http_client.post(
       f"{API_BASE_URL}/auth/refresh",
       json={"refresh_token": refresh_token},
       timeout=10.0
@@ -261,7 +266,7 @@ def get_user_info(access_token: str) -> Optional[Dict[str, Any]]:
       None if request fails
   """
   try:
-    response = httpx.get(
+    response = http_client.get(
       f"{API_BASE_URL}/auth/me",
       headers={"Authorization": f"Bearer {access_token}"},
       timeout=10.0
@@ -286,7 +291,7 @@ def logout_user(refresh_token: str) -> bool:
       True if logout successful, False otherwise
   """
   try:
-    response = httpx.post(
+    response = http_client.post(
       f"{API_BASE_URL}/auth/logout",
       json={"refresh_token": refresh_token},
       timeout=10.0

src/myfasthtml/controls/button.py

@@ -1,11 +0,0 @@
-from fasthtml.components import *
-
-from myfasthtml.core.commands import Command
-
-
-def mk_button(element, command: Command = None, **kwargs):
-  if command is None:
-    return Button(element, **kwargs)
-  
-  htmx = command.get_htmx_params()
-  return Button(element, **htmx, **kwargs)

src/myfasthtml/controls/helpers.py

@@ -0,0 +1,55 @@
+from fasthtml.components import *
+
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.commands import Command
+from myfasthtml.core.utils import merge_classes
+
+
+class mk:
+  
+  @staticmethod
+  def button(element, command: Command = None, binding: Binding = None, **kwargs):
+    return mk.mk(Button(element, **kwargs), command=command, binding=binding)
+  
+  @staticmethod
+  def icon(icon, size=20,
+           can_select=True,
+           can_hover=False,
+           cls='',
+           command: Command = None,
+           binding: Binding = None,
+           **kwargs):
+    merged_cls = merge_classes(f"mf-icon-{size}",
+                               'icon-btn' if can_select else '',
+                               'mmt-btn' if can_hover else '',
+                               cls,
+                               kwargs)
+    
+    return mk.mk(Div(icon, cls=merged_cls, **kwargs), command=command, binding=binding)
+  
+  @staticmethod
+  def manage_command(ft, command: Command):
+    if command:
+      ft = command.bind_ft(ft)
+    
+    return ft
+  
+  @staticmethod
+  def manage_binding(ft, binding: Binding, ft_attr=None, init_binding=True):
+    if not binding:
+      return ft
+    
+    binding.bind_ft(ft, ft_attr)
+    if init_binding:
+      binding.init()
+      # as it is the first binding, remove the hx-swap-oob
+      if "hx-swap-oob" in ft.attrs:
+        del ft.attrs["hx-swap-oob"]
+    
+    return ft
+  
+  @staticmethod
+  def mk(ft, command: Command = None, binding: Binding = None, init_binding=True):
+    ft = mk.manage_command(ft, command)
+    ft = mk.manage_binding(ft, binding, init_binding=init_binding)
+    return ft

src/myfasthtml/core/bindings.py

@@ -0,0 +1,462 @@
+import logging
+import uuid
+from enum import Enum
+from typing import Optional, Any
+
+from fasthtml.components import Option
+from fasthtml.fastapp import fast_app
+from myutils.observable import make_observable, bind, collect_return_values, unbind
+
+from myfasthtml.core.constants import Routes, ROUTE_ROOT
+from myfasthtml.core.utils import get_default_attr, get_default_ft_attr, is_checkbox, is_radio, is_select, is_datalist
+
+bindings_app, bindings_rt = fast_app()
+logger = logging.getLogger("Bindings")
+
+
+class UpdateMode(Enum):
+  ValueChange = "ValueChange"
+  AttributePresence = "AttributePresence"
+  SelectValueChange = "SelectValueChange"
+  DatalistListChange = "DatalistListChange"
+
+
+class DetectionMode(Enum):
+  ValueChange = "ValueChange"
+  AttributePresence = "AttributePresence"
+  SelectValueChange = "SelectValueChange"
+
+
+class AttrChangedDetection:
+  """
+  Base class for detecting changes in an attribute of a data object.
+  The when a modification is triggered we can
+    * Search for the attribute that is modified (usual case)
+    * Look if the attribute is present in the data object (for example when a checkbox is toggled)
+  """
+  
+  def __init__(self, attr):
+    self.attr = attr
+  
+  def matches(self, values):
+    pass
+
+
+class ValueChangedDetection(AttrChangedDetection):
+  """
+  Search for the attribute that is modified.
+  """
+  
+  def matches(self, values):
+    for key, value in values.items():
+      if key == self.attr:
+        return True, value
+    
+    return False, None
+
+
+class SelectValueChangedDetection(AttrChangedDetection):
+  """
+  Search for the attribute that is modified.
+  """
+  
+  def matches(self, values):
+    for key, value in values.items():
+      if key == self.attr:
+        return True, value
+    
+    return True, []
+
+
+class AttrPresentDetection(AttrChangedDetection):
+  """
+  Search if the attribute is present in the data object.
+  """
+  
+  def matches(self, values):
+    return True, values.get(self.attr, None)
+
+
+class FtUpdate:
+  def update(self, ft, ft_name, ft_attr, old, new, converter):
+    pass
+
+
+class ValueChangeFtUpdate(FtUpdate):
+  def update(self, ft, ft_name, ft_attr, old, new, converter):
+    # simple mode, just update the text or the attribute
+    new_to_use = converter.convert(new) if converter else new
+    if ft_attr is None:
+      ft.children = (new_to_use,)
+    else:
+      ft.attrs[ft_attr] = new_to_use
+    return ft
+
+
+class SelectValueChangeFtUpdate(FtUpdate):
+  def update(self, ft, ft_name, ft_attr, old, new, converter):
+    # simple mode, just update the text or the attribute
+    new_to_use = converter.convert(new) if converter else new
+    new_to_use = [new_to_use] if not isinstance(new_to_use, list) else new_to_use
+    for child in [c for c in ft.children if c.tag == "option"]:
+      if child.attrs.get("value", None) in new_to_use:
+        child.attrs["selected"] = "true"
+      else:
+        child.attrs.pop("selected", None)
+    return ft
+
+
+class DatalistListChangeFtUpdate(FtUpdate):
+  def update(self, ft, ft_name, ft_attr, old, new, converter):
+    new_to_use = converter.convert(new) if converter else new
+    ft.children = tuple([Option(value=v) for v in new_to_use])
+    return ft
+
+
+class AttributePresenceFtUpdate(FtUpdate):
+  def update(self, ft, ft_name, ft_attr, old, new, converter):
+    # attribute presence mode, toggle the attribute (add or remove it)
+    new_to_use = converter.convert(new) if converter else new
+    if ft_attr is None:
+      ft.children = (bool(new_to_use),)
+    else:
+      ft.attrs[ft_attr] = "true" if new_to_use else None  # FastHtml auto remove None attributes
+    return ft
+
+
+class DataConverter:
+  def convert(self, data):
+    pass
+
+
+class BooleanConverter(DataConverter):
+  def convert(self, data):
+    if data is None:
+      return False
+    
+    if isinstance(data, int):
+      return data != 0
+    
+    if str(data).lower() in ("true", "yes", "on"):
+      return True
+    
+    return False
+
+
+class ListConverter(DataConverter):
+  def convert(self, data):
+    if data is None:
+      return []
+    
+    if isinstance(data, str):
+      return data.split("\n")
+    
+    if isinstance(data, (list, set, tuple)):
+      return data
+    
+    return [data]
+
+
+class RadioConverter(DataConverter):
+  def __init__(self, radio_value):
+    self.radio_value = radio_value
+  
+  def convert(self, data):
+    return data == self.radio_value
+
+
+class Binding:
+  def __init__(self, data: Any, attr: str = None, converter: DataConverter = None):
+    """
+    Creates a new binding object between a data object and an HTML element.
+    The binding is not active until bind_ft() is called.
+
+    Args:
+        data: Object used as a pivot
+        attr: Attribute of the data object to bind
+    """
+    self.id = uuid.uuid4()
+    self.htmx_extra = {}
+    self.data = data
+    self.data_attr = attr or get_default_attr(data)
+    self.data_converter = converter
+    
+    # UI-related attributes (configured later via bind_ft)
+    self.ft = None
+    self.ft_name = None
+    self.ft_attr = None
+    self.detection_mode = DetectionMode.ValueChange
+    self.update_mode = UpdateMode.ValueChange
+    
+    # Strategy objects (configured later)
+    self._detection = None
+    self._update = None
+    
+    # Activation state
+    self._is_active = False
+  
+  def bind_ft(self,
+              ft,
+              attr=None,
+              name=None,
+              data_converter: DataConverter = None,
+              detection_mode: DetectionMode = None,
+              update_mode: UpdateMode = None):
+    """
+    Configure the UI element and activate the binding.
+
+    Args:
+        ft: HTML element to bind to
+        name: Name of the HTML element (sent by the form)
+        attr: Attribute of the HTML element to bind to
+        data_converter: Optional converter for data transformation
+        detection_mode: How to detect changes from UI
+        update_mode: How to update the UI element
+
+    Returns:
+        self for method chaining
+    """
+    # Deactivate if already active
+    if self._is_active:
+      self.deactivate()
+    
+    if ft.tag in ["input", "textarea", "select"]:
+      # I must not force the htmx
+      if {"hx-post", "hx_post"} & set(ft.attrs.keys()):
+        raise ValueError(f"Binding '{self.id}': htmx post already set on input.")
+      
+      # update the component to post on the correct route input and forms only
+      htmx = self.get_htmx_params()
+      ft.attrs |= htmx
+    
+    # Configure UI elements
+    self.ft = self._safe_ft(ft)
+    self.ft_name = name or ft.attrs.get("name")
+    self.ft_attr = attr or get_default_ft_attr(ft)
+    
+    if is_checkbox(ft):
+      default_data_converter = self.data_converter or BooleanConverter()
+      default_detection_mode = DetectionMode.AttributePresence
+      default_update_mode = UpdateMode.AttributePresence
+    elif is_radio(ft):
+      default_data_converter = self.data_converter or RadioConverter(ft.attrs["value"])
+      default_detection_mode = DetectionMode.ValueChange
+      default_update_mode = UpdateMode.AttributePresence
+    elif is_select(ft):
+      default_data_converter = self.data_converter
+      default_detection_mode = DetectionMode.SelectValueChange
+      default_update_mode = UpdateMode.SelectValueChange
+    elif is_datalist(ft):
+      default_data_converter = self.data_converter or ListConverter()
+      default_detection_mode = DetectionMode.SelectValueChange
+      default_update_mode = UpdateMode.DatalistListChange
+    else:
+      default_data_converter = self.data_converter
+      default_detection_mode = DetectionMode.ValueChange
+      default_update_mode = UpdateMode.ValueChange
+    
+    # Update optional parameters if provided
+    self.data_converter = data_converter or default_data_converter
+    self.detection_mode = detection_mode or default_detection_mode
+    self.update_mode = update_mode or default_update_mode
+    
+    # Create strategy objects
+    self._detection = self._factory(self.detection_mode)
+    self._update = self._factory(self.update_mode)
+    
+    # Activate the binding
+    self.activate()
+    
+    return self
+  
+  def get_htmx_params(self):
+    return self.htmx_extra | {
+        "hx-post": f"{ROUTE_ROOT}{Routes.Bindings}",
+        "hx-vals": f'{{"b_id": "{self.id}"}}',
+    }
+  
+  def init(self):
+    """
+    Initialise the UI element with the value of the data
+    :return:
+    """
+    old_value = None  # to complicated to retrieve as it depends on the nature of self.ft
+    new_value = getattr(self.data, self.data_attr)
+    self.notify(old_value, new_value)
+    return self
+  
+  def notify(self, old, new):
+    """
+    Callback when the data attribute changes.
+    Updates the UI element accordingly.
+
+    Args:
+        old: Previous value
+        new: New value
+
+    Returns:
+        Updated ft element
+    """
+    if not self._is_active:
+      logger.warning(f"Binding '{self.id}' received notification but is not active")
+      return None
+    
+    logger.debug(f"Binding '{self.id}': Changing from '{old}' to '{new}'")
+    self.ft = self._update.update(self.ft, self.ft_name, self.ft_attr, old, new, self.data_converter)
+    
+    self.ft.attrs["hx-swap-oob"] = "true"
+    return self.ft
+  
+  def update(self, values: dict):
+    """
+    Called by the FastHTML router when a request is received.
+    :param values:
+    :return: the list of updated elements (all elements that are bound to this binding)
+    """
+    logger.debug(f"Binding '{self.id}': Updating with {values=}.")
+    matches, value = self._detection.matches(values)
+    if matches:
+      setattr(self.data, self.data_attr, value)
+      res = collect_return_values(self.data)
+      return res
+    
+    else:
+      logger.debug(f"Nothing to trigger in {values}.")
+      return None
+  
+  def activate(self):
+    """
+    Activate the binding by setting up observers and registering it.
+    Should only be called after the binding is fully configured.
+
+    Raises:
+        ValueError: If the binding is not fully configured
+    """
+    if self._is_active:
+      logger.warning(f"Binding '{self.id}' is already active")
+      return
+    
+    # Validate configuration
+    self._validate_configuration()
+    
+    # Setup observable
+    make_observable(self.data)
+    bind(self.data, self.data_attr, self.notify)
+    
+    # Register in manager
+    BindingsManager.register(self)
+    
+    # Mark as active
+    self._is_active = True
+    
+    logger.debug(f"Binding '{self.id}' activated for {self.data_attr}")
+  
+  def deactivate(self):
+    """
+    Deactivate the binding by removing observers and unregistering it.
+    Can be called multiple times safely.
+    """
+    if not self._is_active:
+      logger.debug(f"Binding '{self.id}' is not active, nothing to deactivate")
+      return
+    
+    # Remove observer
+    unbind(self.data, self.data_attr, self.notify)
+    
+    # Unregister from manager
+    BindingsManager.unregister(self.id)
+    
+    # Mark as inactive
+    self._is_active = False
+    
+    logger.debug(f"Binding '{self.id}' deactivated")
+  
+  @staticmethod
+  def _safe_ft(ft):
+    """
+    Make sure the ft has an id.
+    :param ft:
+    :return:
+    """
+    if ft is None:
+      return None
+    
+    if ft.attrs.get("id", None) is None:
+      ft.attrs["id"] = str(uuid.uuid4())
+    return ft
+  
+  def _factory(self, mode):
+    if mode == DetectionMode.ValueChange:
+      return ValueChangedDetection(self.ft_name)
+    
+    elif mode == DetectionMode.AttributePresence:
+      return AttrPresentDetection(self.ft_name)
+    
+    elif mode == DetectionMode.SelectValueChange:
+      return SelectValueChangedDetection(self.ft_name)
+    
+    elif mode == UpdateMode.ValueChange:
+      return ValueChangeFtUpdate()
+    
+    elif mode == UpdateMode.AttributePresence:
+      return AttributePresenceFtUpdate()
+    
+    elif mode == UpdateMode.SelectValueChange:
+      return SelectValueChangeFtUpdate()
+    
+    elif mode == UpdateMode.DatalistListChange:
+      return DatalistListChangeFtUpdate()
+    
+    else:
+      raise ValueError(f"Invalid detection mode: {mode}")
+  
+  def _validate_configuration(self):
+    """
+    Validate that the binding is fully configured before activation.
+
+    Raises:
+        ValueError: If required configuration is missing
+    """
+    if self.ft is None:
+      raise ValueError(f"Binding '{self.id}': ft element is required")
+    
+    # if self.ft_name is None:
+    #   raise ValueError(f"Binding '{self.id}': ft_name is required")
+    
+    if self._detection is None:
+      raise ValueError(f"Binding '{self.id}': detection strategy not initialized")
+    
+    if self._update is None:
+      raise ValueError(f"Binding '{self.id}': update strategy not initialized")
+  
+  def htmx(self, trigger=None):
+    if trigger:
+      self.htmx_extra["hx-trigger"] = trigger
+    return self
+
+
+class BindingsManager:
+  bindings = {}
+  
+  @staticmethod
+  def register(binding: Binding):
+    BindingsManager.bindings[str(binding.id)] = binding
+  
+  @staticmethod
+  def unregister(binding_id: str):
+    """
+    Unregister a binding from the manager.
+
+    Args:
+        binding_id: ID of the binding to unregister
+    """
+    if str(binding_id) in BindingsManager.bindings:
+      del BindingsManager.bindings[str(binding_id)]
+  
+  @staticmethod
+  def get_binding(binding_id: str) -> Optional[Binding]:
+    return BindingsManager.bindings.get(str(binding_id))
+  
+  @staticmethod
+  def reset():
+    return BindingsManager.bindings.clear()

src/myfasthtml/core/commands.py

@@ -1,14 +1,9 @@
-import logging
 import uuid
 from typing import Optional
 
-from fasthtml.fastapp import fast_app
+from myutils.observable import NotObservableError, ObservableEvent, add_event_listener, remove_event_listener
 
 from myfasthtml.core.constants import Routes, ROUTE_ROOT
-from myfasthtml.core.utils import mount_if_not_exists
-
-commands_app, commands_rt = fast_app()
-logger = logging.getLogger("Commands")
 
 
 class BaseCommand:
@@ -32,12 +27,14 @@ class BaseCommand:
     self.id = uuid.uuid4()
     self.name = name
     self.description = description
+    self._htmx_extra = {}
+    self._bindings = []
     
     # register the command
     CommandsManager.register(self)
   
   def get_htmx_params(self):
-    return {
+    return self._htmx_extra | {
         "hx-post": f"{ROUTE_ROOT}{Routes.Commands}",
         "hx-vals": f'{{"c_id": "{self.id}"}}',
     }
@@ -45,6 +42,48 @@ class BaseCommand:
   def execute(self):
     raise NotImplementedError
   
+  def htmx(self, target="this", swap="innerHTML"):
+    if target is None:
+      self._htmx_extra["hx-swap"] = "none"
+    elif target != "this":
+      self._htmx_extra["hx-target"] = target
+    
+    if swap is None:
+      self._htmx_extra["hx-swap"] = "none"
+    elif swap != "innerHTML":
+      self._htmx_extra["hx-swap"] = swap
+    return self
+  
+  def bind_ft(self, ft):
+    """
+    Update the FT with the command's HTMX parameters.
+
+    :param ft:
+    :return:
+    """
+    htmx = self.get_htmx_params()
+    ft.attrs |= htmx
+    return ft
+  
+  def bind(self, data):
+    """
+    Attach a binding to the command.
+    When done, if a binding is triggered during the execution of the command,
+    the results of the binding will be passed to the command's execute() method.
+    :param data:
+    :return:
+    """
+    if not hasattr(data, '_listeners'):
+      raise NotObservableError(
+        f"Object must be made observable with make_observable() before binding"
+      )
+    self._bindings.append(data)
+    
+    # by default, remove the swap on the attached element when binding is used
+    self._htmx_extra["hx-swap"] = "none"
+    
+    return self
+
 
 class Command(BaseCommand):
   """
@@ -72,7 +111,26 @@ class Command(BaseCommand):
     self.kwargs = kwargs
   
   def execute(self):
-    return self.callback(*self.args, **self.kwargs)
+    ret_from_bindings = []
+    
+    def binding_result_callback(attr, old, new, results):
+      ret_from_bindings.extend(results)
+    
+    for data in self._bindings:
+      add_event_listener(ObservableEvent.AFTER_PROPERTY_CHANGE, data, "", binding_result_callback)
+    
+    ret = self.callback(*self.args, **self.kwargs)
+    
+    for data in self._bindings:
+      remove_event_listener(ObservableEvent.AFTER_PROPERTY_CHANGE, data, "", binding_result_callback)
+    
+    if not ret_from_bindings:
+      return ret
+    
+    if isinstance(ret, list):
+      return ret + ret_from_bindings
+    else:
+      return [ret] + ret_from_bindings
   
   def __str__(self):
     return f"Command({self.name})"
@@ -92,31 +150,3 @@ class CommandsManager:
   @staticmethod
   def reset():
     return CommandsManager.commands.clear()
-
-
-@commands_rt(Routes.Commands)
-def post(session: str, c_id: str):
-  """
-  Default routes for all commands.
-  :param session:
-  :param c_id:
-  :return:
-  """
-  logger.debug(f"Entering {Routes.Commands} with {session=}, {c_id=}")
-  command = CommandsManager.get_command(c_id)
-  if command:
-    return command.execute()
-  
-  raise ValueError(f"Command with ID '{c_id}' not found.")
-
-
-def mount_commands(app):
-  """
-  Mounts the commands_app to the given application instance if the route does not already exist.
-
-  :param app: The application instance to which the commands_app will be mounted.
-  :type app: Any
-  :return: Returns the result of the mount operation performed by mount_if_not_exists.
-  :rtype: Any
-  """
-  return mount_if_not_exists(app, ROUTE_ROOT, commands_app)

src/myfasthtml/core/constants.py

@@ -2,3 +2,4 @@ ROUTE_ROOT = "/myfasthtml"
 
 class Routes:
   Commands = "/commands"
+  Bindings = "/bindings"

src/myfasthtml/core/testclient.py

@@ -1,466 +0,0 @@
-import dataclasses
-import json
-import uuid
-from dataclasses import dataclass
-
-from bs4 import BeautifulSoup, Tag
-from fastcore.xml import FT, to_xml
-from fasthtml.common import FastHTML
-from starlette.responses import Response
-from starlette.testclient import TestClient
-
-from myfasthtml.core.commands import mount_commands
-
-
-@dataclass
-class MyFT:
-  tag: str
-  attrs: dict
-  children: list['MyFT'] = dataclasses.field(default_factory=list)
-  text: str | None = None
-
-
-class TestableElement:
-  """
-  Represents an HTML element that can be interacted with in tests.
-
-  This class will be used for future interactions like clicking elements
-  or verifying element properties.
-  """
-  
-  def __init__(self, client, source):
-    """
-    Initialize a testable element.
-
-    Args:
-        client: The MyTestClient instance.
-        ft: The FastHTML element representation.
-    """
-    self.client = client
-    if isinstance(source, str):
-      self.html_fragment = source
-      tag = BeautifulSoup(source, 'html.parser').find()
-      self.ft = MyFT(tag.name, tag.attrs)
-    elif isinstance(source, Tag):
-      self.html_fragment = str(source)
-      self.ft = MyFT(source.name, source.attrs)
-    elif isinstance(source, FT):
-      self.ft = source
-      self.html_fragment = to_xml(source).strip()
-    else:
-      raise ValueError(f"Invalid source '{source}' for TestableElement.")
-  
-  def click(self):
-    """Click the element (to be implemented)."""
-    return self._send_htmx_request()
-  
-  def matches(self, ft):
-    """Check if element matches given FastHTML element (to be implemented)."""
-    pass
-  
-  def _send_htmx_request(self, json_data: dict | None = None, data: dict | None = None) -> Response:
-    """
-    Simulates an HTMX request in Python for unit testing.
-
-    This function reads the 'hx-*' attributes from the FastHTML object
-    to determine the HTTP method, URL, headers, and body of the request,
-    then executes it via the TestClient.
-
-    Args:
-        data: (Optional) A dict for form data
-              (sends as 'application/x-www-form-urlencoded').
-        json_data: (Optional) A dict for JSON data
-                   (sends as 'application/json').
-                   Takes precedence over 'hx_vals'.
-
-    Returns:
-        The Response object from the simulated request.
-    """
-    
-    # The essential header for FastHTML (and HTMX) to identify the request
-    headers = {"HX-Request": "true"}
-    method = "GET"  # HTMX defaults to GET if not specified
-    url = None
-    
-    verbs = {
-        'hx_get': 'GET',
-        'hx_post': 'POST',
-        'hx_put': 'PUT',
-        'hx_delete': 'DELETE',
-        'hx_patch': 'PATCH',
-    }
-    
-    # .props contains the kwargs passed to the object (e.g., hx_post="/url")
-    element_attrs = self.ft.attrs or {}
-    
-    # Build the attributes
-    for key, value in element_attrs.items():
-      
-      # sanitize the key
-      key = key.lower().strip()
-      if key.startswith('hx-'):
-        key = 'hx_' + key[3:]
-      
-      if key in verbs:
-        # Verb attribute: defines the method and URL
-        method = verbs[key]
-        url = str(value)
-      
-      elif key == 'hx_vals':
-        # hx_vals defines the JSON body, if not already provided by the test
-        if json_data is None:
-          if isinstance(value, str):
-            json_data = json.loads(value)
-          elif isinstance(value, dict):
-            json_data = value
-      
-      elif key.startswith('hx_'):
-        # Any other hx_* attribute is converted to an HTTP header
-        # e.g.: 'hx_target' -> 'HX-Target'
-        header_name = '-'.join(p.capitalize() for p in key.split('_'))
-        headers[header_name] = str(value)
-    
-    # Sanity check
-    if url is None:
-      raise ValueError(
-        f"The <{self.ft.tag}> element has no HTMX verb attribute "
-        "(e.g., hx_get, hx_post) to define a URL."
-      )
-    
-    # Send the request
-    return self.client.send_request(method, url, headers=headers, data=data, json_data=json_data)
-
-
-class MyTestClient:
-  """
-  A test client helper for FastHTML applications that provides
-  a more user-friendly API for testing HTML responses.
-
-  This class wraps Starlette's TestClient and provides methods
-  to verify page content in a way similar to NiceGui's test fixtures.
-  """
-  
-  def __init__(self, app: FastHTML, parent_levels: int = 1):
-    """
-    Initialize the test client.
-
-    Args:
-        app: The FastHTML application to test.
-        parent_levels: Number of parent levels to show in error messages (default: 1).
-    """
-    self.app = app
-    self.client = TestClient(app)
-    self._content = None
-    self._soup = None
-    self._session = str(uuid.uuid4())
-    self.parent_levels = parent_levels
-    
-    # make sure that the commands are mounted
-    mount_commands(self.app)
-  
-  def open(self, path: str):
-    """
-    Open a page and store its content for subsequent assertions.
-
-    Args:
-        path: The URL path to request (e.g., '/home', '/api/users').
-
-    Returns:
-        self: Returns the client instance for method chaining.
-
-    Raises:
-        AssertionError: If the response status code is not 200.
-    """
-    
-    res = self.client.get(path)
-    assert res.status_code == 200, (
-        f"Failed to open '{path}'. "
-        f"status code={res.status_code} : reason='{res.text}'"
-    )
-    
-    self.set_content(res.text)
-    return self
-  
-  def send_request(self, method: str, url: str, headers: dict = None, data=None, json_data=None):
-    json_data['session'] = self._session
-    res = self.client.request(
-      method,
-      url,
-      headers=headers,
-      data=data,  # For form data
-      json=json_data  # For JSON bodies (e.g., from hx_vals)
-    )
-    
-    assert res.status_code == 200, (
-        f"Failed to send request '{method=}', {url=}. "
-        f"status code={res.status_code} : reason='{res.text}'"
-    )
-    
-    self.set_content(res.text)
-    return self
-  
-  def should_see(self, text: str):
-    """
-    Assert that the given text is present in the visible page content.
-
-    This method parses the HTML and searches only in the visible text,
-    ignoring HTML tags and attributes.
-
-    Args:
-        text: The text string to search for (case-sensitive).
-
-    Returns:
-        self: Returns the client instance for method chaining.
-
-    Raises:
-        AssertionError: If the text is not found in the page content.
-        ValueError: If no page has been opened yet.
-    """
-    if self._content is None:
-      raise ValueError(
-        "No page content available. Call open() before should_see()."
-      )
-    
-    visible_text = self._soup.get_text()
-    
-    if text not in visible_text:
-      # Provide a snippet of the actual content for debugging
-      snippet_length = 200
-      content_snippet = (
-          visible_text[:snippet_length] + "..."
-          if len(visible_text) > snippet_length
-          else visible_text
-      )
-      raise AssertionError(
-        f"Expected to see '{text}' in page content but it was not found.\n"
-        f"Visible content (first {snippet_length} chars): {content_snippet}"
-      )
-    
-    return self
-  
-  def should_not_see(self, text: str):
-    """
-    Assert that the given text is NOT present in the visible page content.
-
-    This method parses the HTML and searches only in the visible text,
-    ignoring HTML tags and attributes.
-
-    Args:
-        text: The text string that should not be present (case-sensitive).
-
-    Returns:
-        self: Returns the client instance for method chaining.
-
-    Raises:
-        AssertionError: If the text is found in the page content.
-        ValueError: If no page has been opened yet.
-    """
-    if self._content is None:
-      raise ValueError(
-        "No page content available. Call open() before should_not_see()."
-      )
-    
-    visible_text = self._soup.get_text()
-    
-    if text in visible_text:
-      element = self._find_visible_text_element(self._soup, text)
-      
-      if element:
-        context = self._format_element_with_context(element, self.parent_levels)
-        error_msg = (
-            f"Expected NOT to see '{text}' in page content but it was found.\n"
-            f"Found in:\n{context}"
-        )
-      else:
-        error_msg = (
-            f"Expected NOT to see '{text}' in page content but it was found.\n"
-            f"Unable to locate the element containing this text."
-        )
-      
-      raise AssertionError(error_msg)
-    
-    return self
-  
-  def find_element(self, selector: str):
-    """
-    Find a single HTML element using a CSS selector.
-
-    This method searches for elements matching the given CSS selector.
-    It expects to find exactly one matching element.
-
-    Args:
-        selector: A CSS selector string (e.g., '#my-id', '.my-class', 'button.primary').
-
-    Returns:
-        TestableElement: A testable element wrapping the HTML fragment.
-
-    Raises:
-        ValueError: If no page has been opened yet.
-        AssertionError: If no element or multiple elements match the selector.
-
-    Examples:
-        element = client.open('/').find_element('#login-button')
-        element = client.find_element('button.primary')
-    """
-    if self._content is None:
-      raise ValueError(
-        "No page content available. Call open() before find_element()."
-      )
-    
-    results = self._soup.select(selector)
-    
-    if len(results) == 0:
-      raise AssertionError(
-        f"No element found matching selector '{selector}'."
-      )
-    elif len(results) == 1:
-      return TestableElement(self, results[0])
-    else:
-      raise AssertionError(
-        f"Found {len(results)} elements matching selector '{selector}'. Expected exactly 1."
-      )
-  
-  def get_content(self) -> str:
-    """
-    Get the raw HTML content of the last opened page.
-
-    Returns:
-        The HTML content as a string, or None if no page has been opened.
-    """
-    return self._content
-  
-  def set_content(self, content: str):
-    """
-    Set the HTML content and parse it with BeautifulSoup.
-
-    Args:
-        content: The HTML content string to set.
-    """
-    self._content = content
-    self._soup = BeautifulSoup(content, 'html.parser')
-  
-  @staticmethod
-  def _find_visible_text_element(soup, text: str):
-    """
-    Find the first element containing the visible text.
-
-    This method traverses the BeautifulSoup tree to find the first element
-    whose visible text content (including descendants) contains the search text.
-
-    Args:
-        soup: BeautifulSoup object representing the parsed HTML.
-        text: The text to search for.
-
-    Returns:
-        BeautifulSoup element containing the text, or None if not found.
-    """
-    # Traverse all elements in the document
-    for element in soup.descendants:
-      # Skip NavigableString nodes, we want Tag elements
-      if not isinstance(element, Tag):
-        continue
-      
-      # Get visible text of this element and its descendants
-      element_text = element.get_text()
-      
-      # Check if our search text is in this element's visible text
-      if text in element_text:
-        # Found it! But we want the smallest element containing the text
-        # So let's check if any of its children also contain the text
-        found_in_child = False
-        
-        for child in element.children:
-          if isinstance(child, Tag) and text in child.get_text():
-            found_in_child = True
-            break
-        
-        # If no child contains the text, this is our target element
-        if not found_in_child:
-          return element
-    
-    return None
-  
-  @staticmethod
-  def _indent_html(html_str: str, indent: int = 2):
-    """
-    Add indentation to HTML string.
-
-    Args:
-        html_str: HTML string to indent.
-        indent: Number of spaces for indentation.
-
-    Returns:
-        str: Indented HTML string.
-    """
-    lines = html_str.split('\n')
-    indented_lines = [' ' * indent + line for line in lines if line.strip()]
-    return '\n'.join(indented_lines)
-  
-  def _format_element_with_context(self, element, parent_levels: int):
-    """
-    Format an element with its parent context for display.
-
-    Args:
-        element: BeautifulSoup element to format.
-        parent_levels: Number of parent levels to include.
-
-    Returns:
-        str: Formatted HTML string with indentation.
-    """
-    # Collect the element and its parents
-    elements_to_show = [element]
-    current = element
-    
-    for _ in range(parent_levels):
-      if current.parent and current.parent.name:  # Skip NavigableString parents
-        elements_to_show.insert(0, current.parent)
-        current = current.parent
-      else:
-        break
-    
-    # Format the top-level element with proper indentation
-    if len(elements_to_show) == 1:
-      return self._indent_html(str(element), indent=2)
-    
-    # Build the nested structure
-    result = self._build_nested_context(elements_to_show, element)
-    return self._indent_html(result, indent=2)
-  
-  def _build_nested_context(self, elements_chain, target_element):
-    """
-    Build nested HTML context showing parents and target element.
-
-    Args:
-        elements_chain: List of elements from outermost parent to target.
-        target_element: The element that contains the searched text.
-
-    Returns:
-        str: Nested HTML structure.
-    """
-    if len(elements_chain) == 1:
-      return str(target_element)
-    
-    # Get the outermost element
-    outer = elements_chain[0]
-    
-    # Start with opening tag
-    result = f"<{outer.name}"
-    if outer.attrs:
-      attrs = ' '.join(f'{k}="{v}"' if not isinstance(v, list) else f'{k}="{" ".join(v)}"'
-                       for k, v in outer.attrs.items())
-      result += f" {attrs}"
-    result += ">\n"
-    
-    # Add nested content
-    if len(elements_chain) == 2:
-      # This is the target element
-      result += self._indent_html(str(target_element), indent=2) + "\n"
-    else:
-      # Recursive call for deeper nesting
-      nested = self._build_nested_context(elements_chain[1:], target_element)
-      result += self._indent_html(nested, indent=2) + "\n"
-    
-    # Closing tag
-    result += f"</{outer.name}>"
-    
-    return result

src/myfasthtml/core/utils.py

@@ -1,5 +1,16 @@
+import logging
+
+from bs4 import Tag
+from fastcore.xml import FT
+from fasthtml.fastapp import fast_app
 from starlette.routing import Mount
 
+from myfasthtml.core.constants import Routes, ROUTE_ROOT
+from myfasthtml.test.MyFT import MyFT
+
+utils_app, utils_rt = fast_app()
+logger = logging.getLogger("Commands")
+
 
 def mount_if_not_exists(app, path: str, sub_app):
   """
@@ -17,3 +28,166 @@ def mount_if_not_exists(app, path: str, sub_app):
   
   if not is_mounted:
     app.mount(path, app=sub_app)
+
+
+def merge_classes(*args):
+  all_elements = []
+  for element in args:
+    if element is None or element == '':
+      continue
+    
+    if isinstance(element, (tuple, list, set)):
+      all_elements.extend(element)
+    
+    elif isinstance(element, dict):
+      if "cls" in element:
+        all_elements.append(element.pop("cls"))
+      elif "class" in element:
+        all_elements.append(element.pop("class"))
+    
+    elif isinstance(element, str):
+      all_elements.append(element)
+    
+    else:
+      raise ValueError(f"Cannot merge {element} of type {type(element)}")
+  
+  if all_elements:
+    # Remove duplicates while preserving order
+    unique_elements = list(dict.fromkeys(all_elements))
+    return " ".join(unique_elements)
+  else:
+    return None
+
+
+def debug_routes(app):
+  def _debug_routes(_app, _route, prefix=""):
+    if isinstance(_route, Mount):
+      for sub_route in _route.app.router.routes:
+        _debug_routes(_app, sub_route, prefix=_route.path)
+    else:
+      print(f"path={prefix}{_route.path}, methods={_route.methods}, endpoint={_route.endpoint}")
+  
+  for route in app.router.routes:
+    _debug_routes(app, route)
+
+
+def mount_utils(app):
+  """
+  Mounts the commands_app to the given application instance if the route does not already exist.
+
+  :param app: The application instance to which the commands_app will be mounted.
+  :type app: Any
+  :return: Returns the result of the mount operation performed by mount_if_not_exists.
+  :rtype: Any
+  """
+  return mount_if_not_exists(app, ROUTE_ROOT, utils_app)
+
+
+def get_default_ft_attr(ft):
+  """
+  for every type of HTML element (ft) gives the default attribute to use for binding
+  :param ft:
+  :return:
+  """
+  if ft.tag == "input":
+    if ft.attrs.get("type") == "checkbox":
+      return "checked"
+    elif ft.attrs.get("type") == "radio":
+      return "checked"
+    elif ft.attrs.get("type") == "file":
+      return "files"
+    else:
+      return "value"
+  else:
+    return None  # indicate that the content of the FT should be updated
+
+
+def get_default_attr(data):
+  all_attrs = data.__dict__.keys()
+  return next(iter(all_attrs))
+
+
+def is_checkbox(elt):
+  if isinstance(elt, (FT, MyFT)):
+    return elt.tag == "input" and elt.attrs.get("type", None) == "checkbox"
+  elif isinstance(elt, Tag):
+    return elt.name == "input" and elt.attrs.get("type", None) == "checkbox"
+  else:
+    return False
+
+
+def is_radio(elt):
+  if isinstance(elt, (FT, MyFT)):
+    return elt.tag == "input" and elt.attrs.get("type", None) == "radio"
+  elif isinstance(elt, Tag):
+    return elt.name == "input" and elt.attrs.get("type", None) == "radio"
+  else:
+    return False
+
+
+def is_select(elt):
+  if isinstance(elt, (FT, MyFT)):
+    return elt.tag == "select"
+  elif isinstance(elt, Tag):
+    return elt.name == "select"
+  else:
+    return False
+
+
+def is_datalist(elt):
+  if isinstance(elt, (FT, MyFT)):
+    return elt.tag == "datalist"
+  elif isinstance(elt, Tag):
+    return elt.name == "datalist"
+  else:
+    return False
+
+
+def quoted_str(s):
+  if s is None:
+    return "None"
+  
+  if isinstance(s, str):
+    if "'" in s and '"' in s:
+      return f'"{s.replace('"', '\\"')}"'
+    elif '"' in s:
+      return f"'{s}'"
+    else:
+      return f'"{s}"'
+  
+  return str(s)
+
+
+@utils_rt(Routes.Commands)
+def post(session, c_id: str):
+  """
+  Default routes for all commands.
+  :param session:
+  :param c_id:
+  :return:
+  """
+  logger.debug(f"Entering {Routes.Commands} with {session=}, {c_id=}")
+  from myfasthtml.core.commands import CommandsManager
+  command = CommandsManager.get_command(c_id)
+  if command:
+    return command.execute()
+  
+  raise ValueError(f"Command with ID '{c_id}' not found.")
+
+
+@utils_rt(Routes.Bindings)
+def post(session, b_id: str, values: dict):
+  """
+  Default routes for all bindings.
+  :param session:
+  :param b_id:
+  :param values:
+  :return:
+  """
+  logger.debug(f"Entering {Routes.Bindings} with {session=}, {b_id=}, {values=}")
+  from myfasthtml.core.bindings import BindingsManager
+  binding = BindingsManager.get_binding(b_id)
+  if binding:
+    return binding.update(values)
+  
+  raise ValueError(f"Binding with ID '{b_id}' not found.")

src/myfasthtml/examples/binding_checkbox.py

@@ -0,0 +1,51 @@
+import logging
+from dataclasses import dataclass
+
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding, BooleanConverter
+from myfasthtml.core.utils import debug_routes
+from myfasthtml.myfastapp import create_app
+
+logging.basicConfig(
+  level=logging.DEBUG,  # Set logging level to DEBUG
+  format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',  # Log format
+  datefmt='%Y-%m-%d %H:%M:%S',  # Timestamp format
+)
+
+app, rt = create_app(protect_routes=False)
+
+
+@dataclass
+class Data:
+  value: str = "Hello World"
+  checked: bool = False
+
+
+data = Data()
+
+
+@rt("/set_checkbox")
+def post(check_box_name: str = None):
+  print(check_box_name)
+
+
+@rt("/")
+def index():
+  return Div(
+    mk.mk(Input(name="checked_name", type="checkbox"), binding=Binding(data, attr="checked")),
+    mk.mk(Label("Text"), binding=Binding(data, attr="checked", converter=BooleanConverter())),
+  )
+
+
+@rt("/test_checkbox_htmx")
+def get():
+  check_box = Input(type="checkbox", name="check_box_name", hx_post="/set_checkbox")
+  return check_box
+
+
+if __name__ == "__main__":
+  debug_routes(app)
+  serve(port=5002)

src/myfasthtml/examples/binding_datalist.py

@@ -0,0 +1,66 @@
+import logging
+from dataclasses import dataclass
+from typing import Any
+
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.commands import Command
+from myfasthtml.core.utils import debug_routes
+from myfasthtml.myfastapp import create_app
+
+logging.basicConfig(
+  level=logging.DEBUG,  # Set logging level to DEBUG
+  format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',  # Log format
+  datefmt='%Y-%m-%d %H:%M:%S',  # Timestamp format
+)
+
+app, rt = create_app(protect_routes=False)
+
+
+@dataclass
+class Data:
+  value: Any = "Hello World"
+
+
+def add_suggestion():
+  nb = len(data.value)
+  data.value = data.value + [f"suggestion{nb}"]
+
+
+def remove_suggestion():
+  if len(data.value) > 0:
+    data.value = data.value[:-1]
+
+
+data = Data(["suggestion0", "suggestion1", "suggestion2"])
+
+
+@rt("/")
+def get():
+  datalist = Datalist(
+    id="suggestions"
+  )
+  input_elt = Input(name="input_name", list="suggestions")
+  label_elt = Label()
+  
+  mk.manage_binding(datalist, Binding(data))
+  mk.manage_binding(label_elt, Binding(data))
+  
+  add_button = mk.button("Add", command=Command("Add", "Add a suggestion", add_suggestion).bind(data))
+  remove_button = mk.button("Remove", command=Command("Remove", "Remove a suggestion", remove_suggestion).bind(data))
+  
+  return Div(
+    add_button,
+    remove_button,
+    input_elt,
+    datalist,
+    label_elt
+  )
+
+
+if __name__ == "__main__":
+  debug_routes(app)
+  serve(port=5002)

src/myfasthtml/examples/binding_input.py

@@ -0,0 +1,33 @@
+from dataclasses import dataclass
+from typing import Any
+
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.utils import debug_routes
+from myfasthtml.myfastapp import create_app
+
+app, rt = create_app(protect_routes=False)
+
+
+@dataclass
+class Data:
+  value: Any = "Hello World"
+
+
+data = Data()
+
+
+@rt("/")
+def get():
+  return Div(
+    mk.mk(Input(name="input_name"), binding=Binding(data, attr="value").htmx(trigger="input changed")),
+    mk.mk(Label("Text"), binding=Binding(data, attr="value"))
+  )
+
+
+if __name__ == "__main__":
+  debug_routes(app)
+  serve(port=5002)

src/myfasthtml/examples/binding_radio.py

@@ -0,0 +1,47 @@
+import logging
+from dataclasses import dataclass
+
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.utils import debug_routes
+from myfasthtml.myfastapp import create_app
+
+logging.basicConfig(
+  level=logging.DEBUG,  # Set logging level to DEBUG
+  format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',  # Log format
+  datefmt='%Y-%m-%d %H:%M:%S',  # Timestamp format
+)
+
+app, rt = create_app(protect_routes=False)
+
+
+@dataclass
+class Data:
+  value: str = "Hello World"
+  checked: bool = False
+
+
+data = Data()
+
+
+@rt("/")
+def get():
+  radio1 = Input(type="radio", name="radio_name", value="option1")
+  radio2 = Input(type="radio", name="radio_name", value="option2", checked=True)
+  radio3 = Input(type="radio", name="radio_name", value="option3")
+  label_elt = Label("hi hi hi !")
+  
+  mk.manage_binding(radio1, Binding(data))
+  mk.manage_binding(radio2, Binding(data))
+  mk.manage_binding(radio3, Binding(data))
+  mk.manage_binding(label_elt, Binding(data))
+  
+  return radio1, radio2, radio3, label_elt
+
+
+if __name__ == "__main__":
+  debug_routes(app)
+  serve(port=5002)

src/myfasthtml/examples/binding_range.py

@@ -0,0 +1,40 @@
+from dataclasses import dataclass
+from typing import Any
+
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.utils import debug_routes
+from myfasthtml.myfastapp import create_app
+
+app, rt = create_app(protect_routes=False)
+
+
+@dataclass
+class Data:
+  value: Any = "Hello World"
+
+
+data = Data(50)
+
+
+@rt("/")
+def get():
+  range_elt = Input(
+    type="range",
+    name="range_name",
+    min="0",
+    max="100",
+    value="50"
+  )
+  label_elt = Label()
+  mk.manage_binding(range_elt, Binding(data))
+  mk.manage_binding(label_elt, Binding(data))
+  return range_elt, label_elt
+
+
+if __name__ == "__main__":
+  debug_routes(app)
+  serve(port=5002)

src/myfasthtml/examples/binding_select.py

@@ -0,0 +1,46 @@
+import logging
+from dataclasses import dataclass
+from typing import Any
+
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.utils import debug_routes
+from myfasthtml.myfastapp import create_app
+
+logging.basicConfig(
+  level=logging.DEBUG,  # Set logging level to DEBUG
+  format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',  # Log format
+  datefmt='%Y-%m-%d %H:%M:%S',  # Timestamp format
+)
+
+app, rt = create_app(protect_routes=False)
+
+
+@dataclass
+class Data:
+  value: Any = "Hello World"
+
+
+data = Data()
+
+
+@rt("/")
+def get():
+  select_elt = Select(
+    Option("Option 1", value="option1"),
+    Option("Option 2", value="option2"),
+    Option("Option 3", value="option3"),
+    name="select_name"
+  )
+  label_elt = Label()
+  mk.manage_binding(select_elt, Binding(data), init_binding=False)
+  mk.manage_binding(label_elt, Binding(data))
+  return select_elt, label_elt
+
+
+if __name__ == "__main__":
+  debug_routes(app)
+  serve(port=5002)

src/myfasthtml/examples/binding_select_multiple.py

@@ -0,0 +1,47 @@
+import logging
+from dataclasses import dataclass
+from typing import Any
+
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.utils import debug_routes
+from myfasthtml.myfastapp import create_app
+
+logging.basicConfig(
+  level=logging.DEBUG,  # Set logging level to DEBUG
+  format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',  # Log format
+  datefmt='%Y-%m-%d %H:%M:%S',  # Timestamp format
+)
+
+app, rt = create_app(protect_routes=False)
+
+
+@dataclass
+class Data:
+  value: Any = "Hello World"
+
+
+data = Data()
+
+
+@rt("/")
+def get():
+  select_elt = Select(
+    Option("Option 1", value="option1"),
+    Option("Option 2", value="option2"),
+    Option("Option 3", value="option3"),
+    name="select_name",
+    multiple=True
+  )
+  label_elt = Label()
+  mk.manage_binding(select_elt, Binding(data), init_binding=False)
+  mk.manage_binding(label_elt, Binding(data))
+  return select_elt, label_elt
+
+
+if __name__ == "__main__":
+  debug_routes(app)
+  serve(port=5002)

src/myfasthtml/examples/binding_textarea.py

@@ -0,0 +1,33 @@
+from dataclasses import dataclass
+from typing import Any
+
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.utils import debug_routes
+from myfasthtml.myfastapp import create_app
+
+app, rt = create_app(protect_routes=False)
+
+
+@dataclass
+class Data:
+  value: Any = "Hello World"
+
+
+data = Data()
+
+
+@rt("/")
+def get():
+  return Div(
+    mk.mk(Textarea(name="input_name"), binding=Binding(data, attr="value").htmx(trigger="input changed")),
+    mk.mk(Label("Text"), binding=Binding(data, attr="value"))
+  )
+
+
+if __name__ == "__main__":
+  debug_routes(app)
+  serve(port=5002)

src/myfasthtml/examples/clickme.py

@@ -0,0 +1,26 @@
+from fasthtml import serve
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.myfastapp import create_app
+
+
+# Define a simple command action
+def say_hello():
+  return "Hello, FastHtml!"
+
+
+# Create the command
+hello_command = Command("say_hello", "Responds with a greeting", say_hello)
+
+# Create the app
+app, rt = create_app(protect_routes=False)
+
+
+@rt("/")
+def get_homepage():
+  return mk.button("Click Me!", command=hello_command)
+
+
+if __name__ == "__main__":
+  serve(port=5002)

src/myfasthtml/examples/command_with_htmx_params.py

@@ -0,0 +1,25 @@
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.commands import Command
+from myfasthtml.icons.fa import icon_home
+from myfasthtml.myfastapp import create_app
+
+app, rt = create_app(protect_routes=False)
+
+
+def change_text():
+  return "New text"
+
+
+command = Command("change_text", "change the text", change_text).htmx(target="#text")
+
+
+@rt("/")
+def index():
+  return mk.button(Div(mk.icon(icon_home), Div("Hello World", id="text"), cls="flex"), command=command)
+
+
+if __name__ == "__main__":
+  serve(port=5002)

src/myfasthtml/examples/helloworld.py

@@ -0,0 +1,15 @@
+from fasthtml import serve
+from fasthtml.components import *
+
+from myfasthtml.myfastapp import create_app
+
+app, rt = create_app(protect_routes=False)
+
+
+@rt("/")
+def get_homepage():
+  return Div("Hello, FastHtml!")
+
+
+if __name__ == "__main__":
+  serve(port=5002)

src/myfasthtml/myfastapp.py

@@ -0,0 +1,98 @@
+import logging
+from importlib.resources import files
+from pathlib import Path
+from typing import Optional, Any
+
+import fasthtml.fastapp
+from fasthtml.components import Link, Script
+from starlette.responses import Response
+
+from myfasthtml.auth.routes import setup_auth_routes
+from myfasthtml.auth.utils import create_auth_beforeware
+from myfasthtml.core.utils import utils_app
+
+logger = logging.getLogger("MyFastHtml")
+
+
+def get_asset_path(filename):
+  """Get asset file path"""
+  return files("myfasthtml") / "assets" / filename
+
+
+# Get assets directory path
+assets_path = files("myfasthtml") / "assets"
+assets_dir = Path(str(assets_path))
+
+
+def get_asset_content(filename):
+  """Get asset file content"""
+  return get_asset_path(filename).read_text()
+
+
+def create_app(daisyui: Optional[bool] = True,
+               protect_routes: Optional[bool] = True,
+               mount_auth_app: Optional[bool] = False,
+               **kwargs) -> Any:
+  """
+  Creates and configures a FastHtml application with optional support for daisyUI themes and
+  authentication routes.
+  
+  :param daisyui: Flag to enable or disable inclusion of daisyUI-related assets for styling.
+                  Defaults to False.
+  :type daisyui: Optional[bool]
+  
+  :param protect_routes: Flag to enable or disable routes protection based on authentication.
+                  Defaults to True.
+  :type protect_routes: Optional[bool]
+
+  :param mount_auth_app: Flag to enable or disable mounting of authentication routes.
+                         Defaults to False.
+  :type mount_auth_app: Optional[bool]
+
+  :param kwargs: Arbitrary keyword arguments forwarded to the application initialization logic.
+
+  :return: A tuple containing the FastHtml application instance and the associated router.
+  :rtype: Any
+  """
+  hdrs = [Link(href="/myfasthtml/myfasthtml.css", rel="stylesheet", type="text/css")]
+  
+  if daisyui:
+    hdrs += [
+        Link(href="/myfasthtml/daisyui-5.css", rel="stylesheet", type="text/css"),
+        Link(href="/myfasthtml/daisyui-5-themes.css", rel="stylesheet", type="text/css"),
+        Script(src="/myfasthtml/tailwindcss-browser@4.js"),
+    ]
+  
+  beforeware = create_auth_beforeware() if protect_routes else None
+  app, rt = fasthtml.fastapp.fast_app(before=beforeware, hdrs=tuple(hdrs), **kwargs)
+  
+  # remove the global static files routes
+  static_route_exts_get = app.routes.pop(0)
+  
+  # Serve assets
+  @app.get("/myfasthtml/{filename:path}.{ext:static}")
+  def serve_asset(filename: str, ext: str):
+    path = filename + "." + ext
+    try:
+      content = get_asset_content(path)
+      
+      if filename.endswith('.css'):
+        return Response(content, media_type="text/css")
+      elif filename.endswith('.js'):
+        return Response(content, media_type="application/javascript")
+      else:
+        return Response(content)
+    except Exception as e:
+      return Response(f"Asset not found: {path}", status_code=404)
+  
+  # and put it back after the myfasthtml static files routes
+  app.routes.append(static_route_exts_get)
+  
+  # route the commands and the bindings
+  app.mount("/myfasthtml", utils_app)
+  
+  if mount_auth_app:
+    # Setup authentication routes
+    setup_auth_routes(app, rt)
+  
+  return app, rt

src/myfasthtml/test/MyFT.py

@@ -0,0 +1,9 @@
+from dataclasses import dataclass, field
+
+
+@dataclass
+class MyFT:
+  tag: str
+  attrs: dict
+  children: list['MyFT'] = field(default_factory=list)
+  text: str | None = None

src/myfasthtml/test/matcher.py

@@ -3,7 +3,8 @@ from dataclasses import dataclass
 
 from fastcore.basics import NotStr
 
-from myfasthtml.core.testclient import MyFT
+from myfasthtml.core.utils import quoted_str
+from myfasthtml.test.testclient import MyFT
 
 
 class Predicate:
@@ -14,10 +15,13 @@ class Predicate:
     raise NotImplementedError
   
   def __str__(self):
-    return f"{self.__class__.__name__}({self.value})"
+    return f"{self.__class__.__name__}({self.value if self.value is not None else ''})"
+  
+  def __repr__(self):
+    return f"{self.__class__.__name__}({self.value if self.value is not None else ''})"
   
   def __eq__(self, other):
-    if not isinstance(other, Predicate):
+    if type(self) is not type(other):
       return False
     return self.value == other.value
   
@@ -25,7 +29,15 @@ class Predicate:
     return hash(self.value)
 
 
-class StartsWith(Predicate):
+class AttrPredicate(Predicate):
+  """
+  Predicate that validates an attribute value.
+  It's given as a value of an attribute.
+  """
+  pass
+
+
+class StartsWith(AttrPredicate):
   def __init__(self, value):
     super().__init__(value)
   
@@ -33,7 +45,7 @@ class StartsWith(Predicate):
     return actual.startswith(self.value)
 
 
-class Contains(Predicate):
+class Contains(AttrPredicate):
   def __init__(self, value):
     super().__init__(value)
   
@@ -41,7 +53,7 @@ class Contains(Predicate):
     return self.value in actual
 
 
-class DoesNotContain(Predicate):
+class DoesNotContain(AttrPredicate):
   def __init__(self, value):
     super().__init__(value)
   
@@ -49,16 +61,56 @@ class DoesNotContain(Predicate):
     return self.value not in actual
 
 
+class AnyValue(AttrPredicate):
+  """
+  True is the attribute is present and the value is not None.
+  """
+  
+  def __init__(self):
+    super().__init__(None)
+  
+  def validate(self, actual):
+    return actual is not None
+
+
+class ChildrenPredicate(Predicate):
+  """
+  Predicate given as a child of an element.
+  """
+  
+  def to_debug(self, element):
+    return element
+
+
+class Empty(ChildrenPredicate):
+  def __init__(self):
+    super().__init__(None)
+  
+  def validate(self, actual):
+    return len(actual.children) == 0 and len(actual.attrs) == 0
+
+
+class AttributeForbidden(ChildrenPredicate):
+  """
+  To validate that an attribute is not present in an element.
+  """
+  
+  def __init__(self, value):
+    super().__init__(value)
+  
+  def validate(self, actual):
+    return self.value not in actual.attrs or actual.attrs[self.value] is None
+  
+  def to_debug(self, element):
+    element.attrs[self.value] = "** NOT ALLOWED **"
+    return element
+
+
 @dataclass
 class DoNotCheck:
   desc: str = None
 
 
-@dataclass
-class Empty:
-  desc: str = None
-
-
 class ErrorOutput:
   def __init__(self, path, element, expected):
     self.path = path
@@ -77,7 +129,7 @@ class ErrorOutput:
     return item, None, None
   
   def __str__(self):
-    self.compute()
+    return f"ErrorOutput({self.output})"
   
   def compute(self):
     # first render the path hierarchy
@@ -99,31 +151,32 @@ class ErrorOutput:
         self._add_to_output(error_str)
       
       # render the children
-      if len(self.expected.children) > 0:
+      expected_children = [c for c in self.expected.children if not isinstance(c, ChildrenPredicate)]
+      if len(expected_children) > 0:
         self.indent += "  "
         element_index = 0
-        for expected_child in self.expected.children:
-          if hasattr(expected_child, "tag"):
-            if element_index < len(self.element.children):
+        for expected_child in expected_children:
+          if element_index >= len(self.element.children):
+            # When there are fewer children than expected, we display a placeholder
+            child_str = "! ** MISSING ** !"
+            self._add_to_output(child_str)
+            element_index += 1
+            continue
+          
           # display the child
           element_child = self.element.children[element_index]
           child_str = self._str_element(element_child, expected_child, keep_open=False)
           self._add_to_output(child_str)
           
-              # manage errors in children
+          # manage errors (only when the expected is a FT element
+          if hasattr(expected_child, "tag"):
             child_error_str = self._detect_error(element_child, expected_child)
             if child_error_str:
               self._add_to_output(child_error_str)
+          
+          # continue
           element_index += 1
         
-            else:
-              # When there are fewer children than expected, we display a placeholder
-              child_str = "! ** MISSING ** !"
-              self._add_to_output(child_str)
-          
-          else:
-            self._add_to_output(expected_child)
-        
         self.indent = self.indent[:-2]
         self._add_to_output(")")
     else:
@@ -142,12 +195,12 @@ class ErrorOutput:
     if expected is None:
       expected = element
     
+    if hasattr(element, "tag"):
       # the attributes are compared to the expected element
       elt_attrs = {attr_name: element.attrs.get(attr_name, "** MISSING **") for attr_name in
                    [attr_name for attr_name in expected.attrs if attr_name is not None]}
-    elt_attrs_str = " ".join(f'"{attr_name}"="{attr_value}"' for attr_name, attr_value in elt_attrs.items())
       
-    #
+      elt_attrs_str = " ".join(f'"{attr_name}"="{attr_value}"' for attr_name, attr_value in elt_attrs.items())
       tag_str = f"({element.tag} {elt_attrs_str}"
       
       # manage the closing tag
@@ -157,10 +210,13 @@ class ErrorOutput:
         tag_str += "..." if elt_attrs_str == "" else " ..."
       else:
         # close the tag if there are no children
-      if len(element.children) == 0:  tag_str += ")"
-    
+        not_special_children = [c for c in element.children if not isinstance(c, Predicate)]
+        if len(not_special_children) == 0:  tag_str += ")"
       return tag_str
     
+    else:
+      return quoted_str(element)
+  
   def _detect_error(self, element, expected):
     if hasattr(expected, "tag") and hasattr(element, "tag"):
       tag_str = len(element.tag) * (" " if element.tag == expected.tag else "^")
@@ -307,16 +363,18 @@ def matches(actual, expected, path=""):
                                                   _actual=actual.tag,
                                                   _expected=expected.tag)
     
-    # special case when the expected element is empty
-    if len(expected.children) > 0 and isinstance(expected.children[0], Empty):
-      assert len(actual.children) == 0, _error_msg("Actual is not empty:", _actual=actual)
-      assert len(actual.attrs) == 0, _error_msg("Actual is not empty:", _actual=actual)
-      return True
+    # special conditions
+    for predicate in [c for c in expected.children if isinstance(c, ChildrenPredicate)]:
+      assert predicate.validate(actual), \
+        _error_msg(f"The condition '{predicate}' is not satisfied.",
+                   _actual=actual,
+                   _expected=predicate.to_debug(expected))
     
     # compare the attributes
     for expected_attr, expected_value in expected.attrs.items():
       assert expected_attr in actual.attrs, _error_msg(f"'{expected_attr}' is not found in Actual.",
-                                                       _actual=actual.attrs)
+                                                       _actual=actual,
+                                                       _expected=expected)
       
       if isinstance(expected_value, Predicate):
         assert expected_value.validate(actual.attrs[expected_attr]), \
@@ -327,14 +385,15 @@ def matches(actual, expected, path=""):
       else:
         assert actual.attrs[expected_attr] == expected.attrs[expected_attr], \
           _error_msg(f"The values are different for '{expected_attr}': ",
-                     _actual=actual.attrs[expected_attr],
-                     _expected=expected.attrs[expected_attr])
+                     _actual=actual,
+                     _expected=expected)
     
     # compare the children
-    if len(actual.children) < len(expected.children):
+    expected_children = [c for c in expected.children if not isinstance(c, Predicate)]
+    if len(actual.children) < len(expected_children):
       _assert_error("Actual is lesser than expected: ", _actual=actual, _expected=expected)
     
-    for actual_child, expected_child in zip(actual.children, expected.children):
+    for actual_child, expected_child in zip(actual.children, expected_children):
       assert matches(actual_child, expected_child, path=path)
   
   else:

tests/auth/test_login.py

@@ -0,0 +1,115 @@
+import os
+from dataclasses import dataclass
+
+import pytest
+from fasthtml.fastapp import fast_app
+
+import myfasthtml.auth.utils
+from myfasthtml.auth.routes import setup_auth_routes
+from myfasthtml.auth.utils import create_auth_beforeware, register_user
+from myfasthtml.test.testclient import MyTestClient
+
+
+@dataclass
+class DummyUser:
+  email: str
+  username: str
+  password: str
+
+
+@pytest.fixture()
+def registered_user():
+  user = DummyUser("user@email.com", "user", "#Passw0rd")
+  register_user(user.email, user.username, user.password)
+  return user
+
+
+@pytest.fixture()
+def app():
+  beforeware = create_auth_beforeware()
+  test_app, test_rt = fast_app(before=beforeware)
+  setup_auth_routes(test_app, test_rt, mount_auth_app=True, sqlite_db_path="TestUsers.db")
+  
+  @test_rt('/')
+  def index(): return "You are now logged in !"
+  
+  return test_app
+
+
+@pytest.fixture()
+def rt(app):
+  return app.route
+
+
+@pytest.fixture()
+def user(app):
+  user = MyTestClient(app)
+  previous = myfasthtml.auth.utils.http_client
+  myfasthtml.auth.utils.http_client = user.client
+  
+  yield user
+  
+  myfasthtml.auth.utils.http_client = previous
+
+
+@pytest.fixture(autouse=True)
+def cleanup():
+  if os.path.exists("TestUsers.db"):
+    os.remove("TestUsers.db")
+
+
+def test_i_can_see_login_page(user):
+  user.open("/login")
+  user.should_see("Sign In")
+  user.should_see("Register here")
+  user.find_form(fields=["Email", "Password"])
+
+
+def test_i_cannot_login_with_wrong_credentials(user):
+  user.open("/login")
+  form = user.find_form(fields=["Email", "Password"])
+  form.fill(Email="user@email.com", Password="#Passw0rd")
+  form.submit()
+  user.should_see("Invalid email or password. Please try again.")
+
+
+def test_i_can_login_with_correct_credentials(user, registered_user):
+  user.open("/login")
+  form = user.find_form(fields=["Email", "Password"])
+  form.fill(Email=registered_user.email, Password=registered_user.password)
+  form.submit()
+  user.should_see("You are now logged in !")
+
+
+def test_i_can_can_navigate_once_logged_in(user, registered_user):
+  user.open("/welcome")  # not logged in, redirects to login
+  user.should_see("Sign In")
+  
+  form = user.find_form(fields=["Email", "Password"])
+  form.fill(Email=registered_user.email, Password=registered_user.password)
+  form.submit()
+  
+  user.open("/welcome")  # once logged in, welcome page is accessible
+  user.should_see("Welcome back, user@email.com!")  # welcome page is predefined
+
+
+def test_i_can_register(user):
+  user.open("/register")
+  form = user.find_form(fields=["Email", "Username", "Password"])
+  form.fill(Email="user@email.com", Username="username", Password="#Passw0rd", confirm_password="#Passw0rd")
+  form.submit()
+  
+  user.should_see("You are now logged in !")
+
+
+def test_i_can_logout(user, registered_user):
+  user.open("/login")
+  form = user.find_form(fields=["Email", "Password"])
+  form.fill(Email=registered_user.email, Password=registered_user.password)
+  form.submit()
+  
+  user.open("/logout")
+  user.should_see("Sign In")
+  
+  user.open("/welcome")
+  user.should_see("Sign In")

tests/auth/test_utils.py

@@ -0,0 +1,47 @@
+import pytest
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.auth.utils import create_auth_beforeware
+from myfasthtml.core.utils import quoted_str
+from myfasthtml.test.testclient import MyTestClient
+
+
+def test_non_protected_route():
+  app, rt = fast_app()
+  user = MyTestClient(app)
+  
+  @rt('/')
+  def index(): return "Welcome"
+  
+  @rt('/login')
+  def index(): return "Sign In"
+  
+  user.open("/")
+  user.should_see("Welcome")
+
+
+def test_all_routes_are_protected():
+  beforeware = create_auth_beforeware()
+  app, rt = fast_app(before=beforeware)
+  user = MyTestClient(app)
+  
+  @rt('/')
+  def index(): return "Welcome"
+  
+  @rt('/login')
+  def index(): return "Sign In"
+  
+  user.open("/")
+  user.should_see("Sign In")
+
+
+@pytest.mark.parametrize("actual,expected", [
+    ("string", '"string"'),
+    ("string with 'single quotes'", '''"string with 'single quotes'"'''),
+    ('string with "double quotes"', """'string with "double quotes"'"""),
+    ("""string with 'single' and "double" quotes""", '''"string with 'single' and \\"double\\" quotes"'''),
+    (None, "None"),
+    (123, "123"),
+])
+def test_i_can_quote_str(actual, expected):
+  assert quoted_str(actual) == expected

tests/controls/test_helpers.py

@@ -0,0 +1,91 @@
+from dataclasses import dataclass
+from typing import Any
+
+import pytest
+from fasthtml.components import *
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.commands import Command
+from myfasthtml.test.matcher import matches
+from myfasthtml.test.testclient import MyTestClient
+
+
+@dataclass
+class Data:
+  value: Any
+
+
+@pytest.fixture()
+def user():
+  test_app, rt = fast_app(default_hdrs=False)
+  user = MyTestClient(test_app)
+  return user
+
+
+@pytest.fixture()
+def rt(user):
+  return user.app.route
+
+
+def test_i_can_mk_button():
+  button = mk.button('button')
+  expected = Button('button')
+  
+  assert matches(button, expected)
+
+
+def test_i_can_mk_button_with_attrs():
+  button = mk.button('button', id="button_id", class_="button_class")
+  expected = Button('button', id="button_id", class_="button_class")
+  assert matches(button, expected)
+
+
+def test_i_can_mk_button_with_command(user, rt):
+  def new_value(value): return value
+  
+  command = Command('test', 'TestingCommand', new_value, "this is my new value")
+  
+  @rt('/')
+  def get(): return mk.button('button', command)
+  
+  user.open("/")
+  user.should_see("button")
+  
+  user.find_element("button").click()
+  user.should_see("this is my new value")
+
+
+class TestingBindings:
+  @pytest.fixture()
+  def data(self):
+    return Data("value")
+  
+  def test_i_can_bind_an_input(self, data):
+    elt = Input(name="input_elt", value="hello")
+    binding = Binding(data, "value")
+    elt = mk.manage_binding(elt, binding)
+    
+    # element is updated
+    assert "hx-post" in elt.attrs
+    assert "hx-vals" in elt.attrs
+    assert "b_id" in elt.attrs["hx-vals"]
+    
+    # binding is also updated
+    assert binding.ft == elt
+    assert binding.ft_name == "input_elt"
+    
+  def test_i_can_bind_none_input(self, data):
+    elt = Label("hello", name="input_elt")
+    binding = Binding(data, "value")
+    elt = mk.manage_binding(elt, binding)
+    
+    # element is updated
+    assert "hx-post" not in elt.attrs
+    assert "hx-get" not in elt.attrs
+    
+    # binding is also updated
+    assert binding.ft == elt
+    assert binding.ft_name == "input_elt"
+    

tests/controls/test_manage_binding.py

@@ -0,0 +1,891 @@
+"""
+Comprehensive binding tests for all bindable FastHTML components.
+
+This test suite covers:
+- Input (text) - already tested
+- Checkbox - already tested
+- Textarea
+- Select (single)
+- Select (multiple)
+- Range (slider)
+- Radio buttons
+- Button
+- Input with Datalist (combobox)
+"""
+
+from dataclasses import dataclass
+from typing import Any
+
+import pytest
+from fasthtml.components import (
+  Input, Label, Textarea, Select, Option, Datalist
+)
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding, BooleanConverter
+from myfasthtml.core.constants import Routes, ROUTE_ROOT
+from myfasthtml.test.matcher import matches, AttributeForbidden, AnyValue
+from myfasthtml.test.testclient import MyTestClient
+
+
+@dataclass
+class Data:
+  value: Any = "hello world"
+
+
+@dataclass
+class NumericData:
+  value: int = 50
+
+
+@dataclass
+class BoolData:
+  value: bool = True
+
+
+@dataclass
+class ListData:
+  value: list = None
+  
+  def __post_init__(self):
+    if self.value is None:
+      self.value = []
+
+
+@pytest.fixture()
+def user():
+  test_app, rt = fast_app(default_hdrs=False)
+  user = MyTestClient(test_app)
+  return user
+
+
+@pytest.fixture()
+def rt(user):
+  return user.app.route
+
+
+class TestBindingTextarea:
+  """Tests for binding Textarea components."""
+  
+  def test_i_can_bind_textarea(self):
+    data = Data("")
+    check_box = Textarea(name="textarea_name")
+    
+    binding = Binding(data)
+    mk.manage_binding(check_box, binding)
+    
+    # update the content
+    res = binding.update({"textarea_name": "Hello world !"})
+    expected = [Textarea("Hello world !", name="textarea_name", hx_swap_oob="true")]
+    assert matches(res, expected)
+  
+  def test_i_can_bind_textarea_with_label(self, user, rt):
+    """
+    Textarea should bind bidirectionally with data.
+    Value changes should update the label.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("Initial text")
+      textarea_elt = Textarea(name="textarea_name")
+      label_elt = Label()
+      mk.manage_binding(textarea_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return textarea_elt, label_elt
+    
+    user.open("/")
+    user.should_see("Initial text")
+    
+    testable_textarea = user.find_element("textarea")
+    testable_textarea.send("New multiline\ntext content")
+    user.should_see("New multiline\ntext content")
+  
+  def test_textarea_append_works_with_binding(self, user, rt):
+    """
+    Appending text to textarea should trigger binding update.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("Start")
+      textarea_elt = Textarea(name="textarea_name")
+      label_elt = Label()
+      mk.manage_binding(textarea_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return textarea_elt, label_elt
+    
+    user.open("/")
+    user.should_see("Start")
+    
+    testable_textarea = user.find_element("textarea")
+    testable_textarea.append(" + More")
+    user.should_see("Start + More")
+  
+  def test_textarea_clear_works_with_binding(self, user, rt):
+    """
+    Clearing textarea should update binding to empty string.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("Content to clear")
+      textarea_elt = Textarea(name="textarea_name")
+      label_elt = Label()
+      mk.manage_binding(textarea_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return textarea_elt, label_elt
+    
+    user.open("/")
+    user.should_see("Content to clear")
+    
+    testable_textarea = user.find_element("textarea")
+    testable_textarea.clear()
+    user.should_not_see("Content to clear")
+
+
+class TestBindingSelect:
+  """Tests for binding Select components (single selection)."""
+  
+  def test_i_can_bind_select(self):
+    data = Data("")
+    select_elt = Select(
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2"),
+      Option("Option 3", value="option3"),
+      name="select_name"
+    )
+    
+    binding = Binding(data)
+    updated = mk.manage_binding(select_elt, binding)
+    
+    expected = Select(
+      AttributeForbidden("hx_swap_oob"),
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2"),
+      Option("Option 3", value="option3"),
+      name="select_name",
+      id=AnyValue(),
+      hx_post=f"{ROUTE_ROOT}{Routes.Bindings}",
+    )
+    assert matches(updated, expected)
+  
+  def test_i_can_update_select(self):
+    data = Data("")
+    select_elt = Select(
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2"),
+      Option("Option 3", value="option3"),
+      name="select_name"
+    )
+    
+    binding = Binding(data)
+    mk.manage_binding(select_elt, binding)
+    
+    res = binding.update({"select_name": "option2"})
+    
+    expected = Select(
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2", selected="true"),
+      Option("Option 3", value="option3"),
+      name="select_name",
+      id=AnyValue(),
+      hx_post=f"{ROUTE_ROOT}{Routes.Bindings}",
+      hx_swap_oob="true"
+    )
+    assert matches(res, [expected])
+  
+  def test_i_can_change_selection(self):
+    data = Data("")
+    select_elt = Select(
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2"),
+      Option("Option 3", value="option3"),
+      name="select_name"
+    )
+    
+    binding = Binding(data)
+    mk.manage_binding(select_elt, binding)
+    
+    binding.update({"select_name": "option2"})
+    res = binding.update({"select_name": "option1"})
+    
+    expected = Select(
+      Option("Option 1", value="option1", selected="true"),
+      Option(AttributeForbidden("selected"), "Option 2", value="option2"),
+      Option(AttributeForbidden("selected"), "Option 3", value="option3"),
+      name="select_name",
+      id=AnyValue(),
+      hx_post=f"{ROUTE_ROOT}{Routes.Bindings}",
+      hx_swap_oob="true"
+    )
+    assert matches(res, [expected])
+  
+  def test_i_can_bind_select_single(self, user, rt):
+    """
+    Single select should bind with data.
+    Selecting an option should update the label.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("option1")
+      select_elt = Select(
+        Option("Option 1", value="option1"),
+        Option("Option 2", value="option2"),
+        Option("Option 3", value="option3"),
+        name="select_name"
+      )
+      label_elt = Label()
+      mk.manage_binding(select_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return select_elt, label_elt
+    
+    user.open("/")
+    user.should_see("option1")
+    
+    testable_select = user.find_element("select")
+    testable_select.select("option2")
+    user.should_see("option2")
+    
+    testable_select.select("option3")
+    user.should_see("option3")
+  
+  def test_i_can_bind_select_by_text(self, user, rt):
+    """
+    Selecting by visible text should work with binding.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("opt1")
+      select_elt = Select(
+        Option("First Option", value="opt1"),
+        Option("Second Option", value="opt2"),
+        Option("Third Option", value="opt3"),
+        name="select_name"
+      )
+      label_elt = Label()
+      mk.manage_binding(select_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return select_elt, label_elt
+    
+    user.open("/")
+    user.should_see("opt1")
+    
+    testable_select = user.find_element("select")
+    testable_select.select_by_text("Second Option")
+    user.should_see("opt2")
+  
+  def test_select_with_default_selected_option(self, user, rt):
+    """
+    Select with a pre-selected option should initialize correctly.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("option2")
+      select_elt = Select(
+        Option("Option 1", value="option1"),
+        Option("Option 2", value="option2", selected=True),
+        Option("Option 3", value="option3"),
+        name="select_name"
+      )
+      label_elt = Label()
+      mk.manage_binding(select_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return select_elt, label_elt
+    
+    user.open("/")
+    user.should_see("option2")
+
+
+class TestBindingSelectMultiple:
+  """Tests for binding Select components with multiple selection."""
+  
+  def test_i_can_bind_select_multiple(self):
+    data = Data("")
+    select_elt = Select(
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2"),
+      Option("Option 3", value="option3"),
+      name="select_name",
+      multiple=True
+    )
+    
+    binding = Binding(data)
+    updated = mk.manage_binding(select_elt, binding)
+    
+    expected = Select(
+      AttributeForbidden("hx_swap_oob"),
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2"),
+      Option("Option 3", value="option3"),
+      name="select_name",
+      id=AnyValue(),
+      hx_post=f"{ROUTE_ROOT}{Routes.Bindings}",
+    )
+    assert matches(updated, expected)
+  
+  def test_i_can_update_one_selection(self):
+    data = Data("")
+    select_elt = Select(
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2"),
+      Option("Option 3", value="option3"),
+      name="select_name",
+      multiple=True
+    )
+    
+    binding = Binding(data)
+    mk.manage_binding(select_elt, binding)
+    
+    res = binding.update({"select_name": "option2"})
+    
+    expected = Select(
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2", selected="true"),
+      Option("Option 3", value="option3"),
+      name="select_name",
+      id=AnyValue(),
+      hx_post=f"{ROUTE_ROOT}{Routes.Bindings}",
+      hx_swap_oob="true"
+    )
+    assert matches(res, [expected])
+  
+  def test_i_can_update_multiple_selections(self):
+    data = Data("")
+    select_elt = Select(
+      Option("Option 1", value="option1"),
+      Option("Option 2", value="option2"),
+      Option("Option 3", value="option3"),
+      name="select_name",
+      multiple=True
+    )
+    
+    binding = Binding(data)
+    mk.manage_binding(select_elt, binding)
+    
+    res = binding.update({"select_name": ["option2", "option3"]})
+    
+    expected = Select(
+      Option(AttributeForbidden("selected"), "Option 1", value="option1"),
+      Option("Option 2", value="option2", selected="true"),
+      Option("Option 3", value="option3", selected="true"),
+      name="select_name",
+      id=AnyValue(),
+      hx_post=f"{ROUTE_ROOT}{Routes.Bindings}",
+      hx_swap_oob="true"
+    )
+    assert matches(res, [expected])
+  
+  def test_i_can_update_unselect(self):
+    data = Data(["option1", "option2", "option3"])
+    select_elt = Select(
+      Option("Option 1", value="option1", selected="true"),
+      Option("Option 2", value="option2", selected="true"),
+      Option("Option 3", value="option3", selected="true"),
+      name="select_name",
+      multiple=True
+    )
+    
+    binding = Binding(data)
+    mk.manage_binding(select_elt, binding)
+    
+    res = binding.update({})
+    
+    expected = Select(
+      Option(AttributeForbidden("selected"), "Option 1", value="option1"),
+      Option(AttributeForbidden("selected"), "Option 2", value="option2"),
+      Option(AttributeForbidden("selected"), "Option 3", value="option3"),
+      name="select_name",
+      id=AnyValue(),
+      hx_post=f"{ROUTE_ROOT}{Routes.Bindings}",
+      hx_swap_oob="true"
+    )
+    assert matches(res, [expected])
+  
+  def test_i_can_bind_select_multiple_with_label(self, user, rt):
+    """
+    Multiple select should bind with list data.
+    Selecting multiple options should update the label.
+    """
+    
+    @rt("/")
+    def index():
+      data = ListData(["option1"])
+      select_elt = Select(
+        Option("Option 1", value="option1"),
+        Option("Option 2", value="option2"),
+        Option("Option 3", value="option3"),
+        name="select_name",
+        multiple=True
+      )
+      label_elt = Label()
+      mk.manage_binding(select_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return select_elt, label_elt
+    
+    user.open("/")
+    user.should_see("['option1']")
+    
+    testable_select = user.find_element("select")
+    testable_select.select("option2")
+    user.should_see("['option1', 'option2']")
+    
+    testable_select.select("option3")
+    user.should_see("['option1', 'option2', 'option3']")
+  
+  def test_i_can_deselect_from_multiple_select(self, user, rt):
+    """
+    Deselecting options from multiple select should update binding.
+    """
+    
+    @rt("/")
+    def index():
+      data = ListData(["option1", "option2"])
+      select_elt = Select(
+        Option("Option 1", value="option1"),
+        Option("Option 2", value="option2"),
+        Option("Option 3", value="option3"),
+        name="select_name",
+        multiple=True
+      )
+      label_elt = Label()
+      mk.manage_binding(select_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return select_elt, label_elt
+    
+    user.open("/")
+    user.should_see("['option1', 'option2']")
+    
+    testable_select = user.find_element("select")
+    testable_select.deselect("option1")
+    user.should_see("option2")
+
+
+class TestBindingRange:
+  """Tests for binding Range (slider) components."""
+  
+  def test_i_can_bind_range(self):
+    data = Data(50)
+    range_elt = Input(
+      type="range",
+      name="range_name",
+      min="0",
+      max="100",
+      value="50"
+    )
+    
+    binding = Binding(data)
+    updated = mk.manage_binding(range_elt, binding)
+    
+    expected = Input(
+      AttributeForbidden("hx_swap_oob"),
+      type="range",
+      name="range_name",
+      min="0",
+      max="100",
+      value=50,
+      hx_post=f"{ROUTE_ROOT}{Routes.Bindings}",
+      id=AnyValue(),
+    )
+    assert matches(updated, expected)
+  
+  def test_i_can_update_range(self):
+    data = Data(50)
+    range_elt = Input(
+      type="range",
+      name="range_name",
+      min="0",
+      max="100",
+      value="50"
+    )
+    
+    binding = Binding(data)
+    mk.manage_binding(range_elt, binding)
+    
+    res = binding.update({"range_name": 25})
+    
+    expected = [Input(
+      type="range",
+      name="range_name",
+      min="0",
+      max="100",
+      value=25,
+      hx_post=f"{ROUTE_ROOT}{Routes.Bindings}",
+      id=AnyValue(),
+      hx_swap_oob="true"
+    )]
+    assert matches(res, expected)
+  
+  def test_i_can_bind_range_with_label(self, user, rt):
+    """
+    Range input should bind with numeric data.
+    Changing the slider should update the label.
+    """
+    
+    @rt("/")
+    def index():
+      data = NumericData(50)
+      range_elt = Input(
+        type="range",
+        name="range_name",
+        min="0",
+        max="100",
+        value="50"
+      )
+      label_elt = Label()
+      mk.manage_binding(range_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return range_elt, label_elt
+    
+    user.open("/")
+    user.should_see("50")
+    
+    testable_range = user.find_element("input[type='range']")
+    testable_range.set(75)
+    user.should_see("75")
+    
+    testable_range.set(25)
+    user.should_see("25")
+  
+  def test_range_increase_decrease(self, user, rt):
+    """
+    Increasing and decreasing range should update binding.
+    """
+    
+    @rt("/")
+    def index():
+      data = NumericData(50)
+      range_elt = Input(
+        type="range",
+        name="range_name",
+        min="0",
+        max="100",
+        step="10",
+        value="50"
+      )
+      label_elt = Label()
+      mk.manage_binding(range_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return range_elt, label_elt
+    
+    user.open("/")
+    user.should_see("50")
+    
+    testable_range = user.find_element("input[type='range']")
+    testable_range.increase()
+    user.should_see("60")
+    
+    testable_range.increase()
+    user.should_see("70")
+    
+    testable_range.decrease()
+    user.should_see("60")
+  
+  def test_range_clamping_to_min_max(self, user, rt):
+    """
+    Range values should be clamped to min/max bounds.
+    """
+    
+    @rt("/")
+    def index():
+      data = NumericData(50)
+      range_elt = Input(
+        type="range",
+        name="range_name",
+        min="0",
+        max="100",
+        value="50"
+      )
+      label_elt = Label()
+      mk.manage_binding(range_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return range_elt, label_elt
+    
+    user.open("/")
+    
+    testable_range = user.find_element("input[type='range']")
+    testable_range.set(150)  # Above max
+    user.should_see("100")
+    
+    testable_range.set(-10)  # Below min
+    user.should_see("0")
+
+
+class TestBindingRadio:
+  """Tests for binding Radio button components."""
+  
+  def test_i_can_bind_radio_buttons(self):
+    data = Data()
+    radio1 = Input(type="radio", name="radio_name", value="option1")
+    radio2 = Input(type="radio", name="radio_name", value="option2")
+    radio3 = Input(type="radio", name="radio_name", value="option3")
+    
+    binding = Binding(data)
+    mk.manage_binding(radio1, binding)
+    mk.manage_binding(radio2, Binding(data))
+    mk.manage_binding(radio3, Binding(data))
+    
+    res = binding.update({"radio_name": "option1"})  # option1 is selected
+    expected = [
+        Input(type="radio", name="radio_name", value="option1", checked="true", hx_swap_oob="true"),
+        Input(AttributeForbidden("checked"), type="radio", name="radio_name", value="option2", hx_swap_oob="true"),
+        Input(AttributeForbidden("checked"), type="radio", name="radio_name", value="option3", hx_swap_oob="true"),
+    ]
+    assert matches(res, expected)
+  
+  def test_i_can_bind_radio_buttons_and_label(self, user, rt):
+    """
+    Radio buttons should bind with data.
+    Selecting a radio should update the label.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data()
+      radio1 = Input(type="radio", name="radio_name", value="option1", checked="true")
+      radio2 = Input(type="radio", name="radio_name", value="option2")
+      radio3 = Input(type="radio", name="radio_name", value="option3")
+      label_elt = Label()
+      
+      mk.manage_binding(radio1, Binding(data))
+      mk.manage_binding(radio2, Binding(data))
+      mk.manage_binding(radio3, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return radio1, radio2, radio3, label_elt
+    
+    user.open("/")
+    
+    # Select second radio
+    testable_radio2 = user.find_element("input[value='option2']")
+    testable_radio2.select()
+    user.should_see("option2")
+    
+    # Select third radio
+    testable_radio3 = user.find_element("input[value='option3']")
+    testable_radio3.select()
+    user.should_see("option3")
+  
+  def test_radio_initial_state(self, user, rt):
+    """
+    Radio buttons should initialize with correct checked state.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("option2")
+      radio1 = Input(type="radio", name="radio_name", value="option1")
+      radio2 = Input(type="radio", name="radio_name", value="option2", checked=True)
+      radio3 = Input(type="radio", name="radio_name", value="option3")
+      label_elt = Label()
+      
+      mk.manage_binding(radio1, Binding(data))
+      mk.manage_binding(radio2, Binding(data))
+      mk.manage_binding(radio3, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return radio1, radio2, radio3, label_elt
+    
+    user.open("/")
+    user.should_see("option2")
+
+
+class TestBindingDatalist:
+  """Tests for binding Input with Datalist (combobox)."""
+  
+  def test_i_can_bind_datalist(self):
+    data = Data(["suggestion2"])
+    datalist = Datalist(
+      Option(value="suggestion1"),
+      id="suggestions"
+    )
+    
+    updated = mk.manage_binding(datalist, Binding(data))
+    expected = Datalist(
+      Option(value="suggestion2"),
+      id="suggestions"
+    )
+    
+    assert matches(updated, expected)
+
+
+class TestBindingEdgeCases:
+  """Tests for edge cases and special scenarios."""
+  
+  def test_multiple_components_bind_to_same_data(self, user, rt):
+    """
+    Multiple different components can bind to the same data object.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("synchronized")
+      
+      input_elt = Input(name="input_name")
+      textarea_elt = Textarea(name="textarea_name")
+      label_elt = Label()
+      
+      mk.manage_binding(input_elt, Binding(data))
+      mk.manage_binding(textarea_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return input_elt, textarea_elt, label_elt
+    
+    user.open("/")
+    user.should_see("synchronized")
+    
+    # Change via input
+    testable_input = user.find_element("input")
+    testable_input.send("changed via input")
+    user.should_see("changed via input")
+    
+    # Change via textarea
+    testable_textarea = user.find_element("textarea")
+    testable_textarea.send("changed via textarea")
+    user.should_see("changed via textarea")
+  
+  def test_component_without_name_attribute(self, user, rt):
+    """
+    Component without name attribute should handle gracefully.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("test")
+      # Input without name - should not crash
+      input_elt = Input()  # No name attribute
+      label_elt = Label()
+      
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return input_elt, label_elt
+    
+    user.open("/")
+    user.should_see("test")
+  
+  def test_binding_with_initial_empty_string(self, user, rt):
+    """
+    Binding should work correctly with empty string initial values.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("")
+      input_elt = Input(name="input_name")
+      label_elt = Label()
+      
+      mk.manage_binding(input_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return input_elt, label_elt
+    
+    user.open("/")
+    
+    testable_input = user.find_element("input")
+    testable_input.send("now has value")
+    user.should_see("now has value")
+  
+  def test_binding_with_special_characters(self, user, rt):
+    """
+    Binding should handle special characters correctly.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("Hello")
+      input_elt = Input(name="input_name")
+      label_elt = Label()
+      
+      mk.manage_binding(input_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return input_elt, label_elt
+    
+    user.open("/")
+    
+    testable_input = user.find_element("input")
+    testable_input.send("Special: <>&\"'")
+    user.should_see("Special: <>&\"'")
+
+
+class TestCheckBox:
+  def test_i_can_bind_checkbox(self):
+    data = Data("")
+    check_box = Input(name="checkbox_name", type="checkbox")
+    
+    binding = Binding(data)
+    mk.manage_binding(check_box, binding)
+    
+    # checkbox is selected
+    res = binding.update({"checkbox_name": "on"})
+    expected = [Input(name="checkbox_name", type="checkbox", checked="true", hx_swap_oob="true")]
+    assert matches(res, expected)
+    
+    # check box is not selected
+    res = binding.update({})
+    expected = [Input(AttributeForbidden("checked"), name="checkbox_name", type="checkbox", hx_swap_oob="true")]
+    assert matches(res, expected)
+  
+  def test_checkbox_initial_state_false(self):
+    data = Data(False)
+    check_box = Input(name="checkbox_name", type="checkbox")
+    
+    binding = Binding(data)
+    updated = mk.manage_binding(check_box, binding)
+    
+    expected = Input(AttributeForbidden("checked"), name="checkbox_name", type="checkbox")
+    assert matches(updated, expected)
+  
+  def test_checkbox_initial_state_true(self):
+    data = Data(True)
+    check_box = Input(name="checkbox_name", type="checkbox")
+    
+    binding = Binding(data)
+    updated = mk.manage_binding(check_box, binding)
+    
+    expected = Input(name="checkbox_name", type="checkbox", checked="true")
+    assert matches(updated, expected)
+  
+  def test_i_can_bind_checkbox_and_label_without_converter(self, user, rt):
+    @rt("/")
+    def index():
+      data = Data(True)
+      input_elt = Input(name="input_name", type="checkbox")
+      label_elt = Label()
+      mk.manage_binding(input_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return input_elt, label_elt
+    
+    user.open("/")
+    user.should_see("True")
+    testable_input = user.find_element("input")
+    
+    testable_input.check()
+    user.should_see("on")
+    
+    testable_input.uncheck()
+    user.should_not_see("on")
+  
+  def test_i_can_bind_checkbox_and_label_with_converter(self, user, rt):
+    @rt("/")
+    def index():
+      data = Data(True)
+      input_elt = Input(name="input_name", type="checkbox")
+      label_elt = Label()
+      mk.manage_binding(input_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data, converter=BooleanConverter()))
+      return input_elt, label_elt
+    
+    user.open("/")
+    user.should_see("True")
+    testable_input = user.find_element("input")
+    
+    testable_input.check()
+    user.should_see("True")
+    
+    testable_input.uncheck()
+    user.should_see("False")

tests/core/test_bindings.py

@@ -0,0 +1,383 @@
+from dataclasses import dataclass
+
+import pytest
+from fasthtml.components import Label, Input
+from myutils.observable import collect_return_values
+
+from myfasthtml.core.bindings import (
+  BindingsManager,
+  Binding,
+  DetectionMode,
+  UpdateMode,
+  BooleanConverter
+)
+
+
+@dataclass
+class Data:
+  value: str = "Hello World"
+
+
+@pytest.fixture(autouse=True)
+def reset_binding_manager():
+  BindingsManager.reset()
+
+
+@pytest.fixture()
+def data():
+  return Data()
+
+
+def test_i_can_register_a_binding(data):
+  binding = Binding(data, "value")
+  
+  assert binding.id is not None
+  assert binding.data is data
+  assert binding.data_attr == 'value'
+
+
+def test_i_can_register_a_binding_with_default_attr(data):
+  binding = Binding(data)
+  
+  assert binding.id is not None
+  assert binding.data is data
+  assert binding.data_attr == 'value'
+
+
+def test_i_can_retrieve_a_registered_binding(data):
+  elt = Label("hello", id="label_id")
+  binding = Binding(data).bind_ft(elt, name="label_name")
+  
+  assert BindingsManager.get_binding(binding.id) is binding
+
+
+def test_i_can_reset_bindings(data):
+  elt = Label("hello", id="label_id")
+  Binding(data).bind_ft(elt, name="label_name")
+  assert len(BindingsManager.bindings) != 0
+  
+  BindingsManager.reset()
+  assert len(BindingsManager.bindings) == 0
+
+
+def test_i_can_bind_an_element_to_a_binding(data):
+  elt = Label("hello", id="label_id")
+  Binding(data).bind_ft(elt, name="label_name")
+  
+  data.value = "new value"
+  
+  assert elt.children[0] == "new value"
+  assert elt.attrs["hx-swap-oob"] == "true"
+  assert elt.attrs["id"] == "label_id"
+
+
+def test_i_can_bind_an_element_attr_to_a_binding(data):
+  elt = Input(value="some value", id="input_id")
+  
+  Binding(data).bind_ft(elt, name="input_name", attr="value")
+  
+  data.value = "new value"
+  
+  assert elt.attrs["value"] == "new value"
+  assert elt.attrs["hx-swap-oob"] == "true"
+  assert elt.attrs["id"] == "input_id"
+
+
+def test_bound_element_has_an_id():
+  elt = Label("hello")
+  assert elt.attrs.get("id", None) is None
+  
+  Binding(Data()).bind_ft(elt, name="label_name")
+  assert elt.attrs.get("id", None) is not None
+
+
+def test_i_can_collect_updates_values(data):
+  elt = Label("hello")
+  Binding(data).bind_ft(elt, name="label_name")
+  
+  data.value = "new value"
+  collected = collect_return_values(data)
+  assert collected == [elt]
+  
+  # a second time to ensure no side effect
+  data.value = "another value"
+  collected = collect_return_values(data)
+  assert collected == [elt]
+
+
+def test_i_can_react_to_value_change(data):
+  elt = Input(name="input_elt", value="hello")
+  binding = Binding(data).bind_ft(elt, name="input_elt", attr="value")
+  
+  res = binding.update({"input_elt": "new value"})
+  
+  assert len(res) == 1
+
+
+def test_i_do_not_react_to_other_value_change(data):
+  elt = Input(name="input_elt", value="hello")
+  binding = Binding(data).bind_ft(elt, name="input_elt", attr="value")
+  
+  res = binding.update({"other_input_elt": "new value"})
+  
+  assert res is None
+
+
+def test_i_can_react_to_attr_presence(data):
+  elt = Input(name="input_elt", type="checkbox")
+  binding = Binding(data).bind_ft(
+    elt,
+    name="input_elt",
+    attr="checked",
+    detection_mode=DetectionMode.AttributePresence
+  )
+  
+  res = binding.update({"checked": "true"})
+  
+  assert len(res) == 1
+
+
+def test_i_can_react_to_attr_non_presence(data):
+  elt = Input(name="input_elt", type="checkbox")
+  binding = Binding(data).bind_ft(
+    elt,
+    name="input_elt",
+    attr="checked",
+    detection_mode=DetectionMode.AttributePresence
+  )
+  
+  res = binding.update({})
+  
+  assert len(res) == 1
+
+
+def test_i_can_create_a_binding_without_activation(data):
+  """
+  A binding created without calling bind_ft should not be active.
+  """
+  binding = Binding(data, "value")
+  
+  assert binding._is_active is False
+  assert binding.ft is None
+  assert binding.ft_name is None
+  assert binding.ft_attr is None
+  assert BindingsManager.get_binding(binding.id) is None
+
+
+def test_i_can_activate_binding_via_bind_ft(data):
+  """
+  Calling bind_ft should automatically activate the binding.
+  """
+  elt = Label("hello", id="label_id")
+  binding = Binding(data, "value")
+  
+  binding.bind_ft(elt, name="label_name")
+  
+  assert binding._is_active is True
+  assert binding.ft is elt
+  assert binding.ft_name == "label_name"
+  assert BindingsManager.get_binding(binding.id) is binding
+
+
+def test_i_cannot_notify_when_not_active(data):
+  """
+  A non-active binding should not update the UI when data changes.
+  """
+  elt = Label("hello", id="label_id")
+  binding = Binding(data, "value")
+  binding.ft = elt
+  binding.ft_name = "label_name"
+  
+  # Change data without activating the binding
+  result = binding.notify("old", "new")
+  
+  assert result is None
+  assert elt.children[0] == "hello"  # Should not have changed
+
+
+def test_i_can_deactivate_a_binding(data):
+  """
+  Deactivating a binding should clean up observers and unregister it.
+  """
+  elt = Label("hello", id="label_id")
+  binding = Binding(data, "value").bind_ft(elt, name="label_name")
+  
+  assert binding._is_active is True
+  assert BindingsManager.get_binding(binding.id) is binding
+  
+  binding.deactivate()
+  
+  assert binding._is_active is False
+  assert BindingsManager.get_binding(binding.id) is None
+
+
+def test_i_can_reactivate_a_binding(data):
+  """
+  After deactivation, a binding can be reactivated by calling bind_ft again.
+  """
+  elt1 = Label("hello", id="label_id_1")
+  binding = Binding(data, "value").bind_ft(elt1, name="label_name_1")
+  
+  binding.deactivate()
+  assert binding._is_active is False
+  
+  elt2 = Label("world", id="label_id_2")
+  binding.bind_ft(elt2, name="label_name_2")
+  
+  assert binding._is_active is True
+  assert binding.ft is elt2
+  assert binding.ft_name == "label_name_2"
+
+
+def test_bind_ft_deactivates_before_reconfiguring(data):
+  """
+  Calling bind_ft on an active binding should deactivate it first,
+  then reconfigure and reactivate.
+  """
+  elt1 = Label("hello", id="label_id_1")
+  elt2 = Label("world", id="label_id_2")
+  
+  binding = Binding(data, "value").bind_ft(elt1, name="label_name_1")
+  
+  # Change data to verify old binding works
+  data.value = "updated"
+  assert elt1.children[0] == "updated"
+  
+  # Reconfigure with new element
+  binding.bind_ft(elt2, name="label_name_2")
+  
+  # Change data again
+  data.value = "final"
+  
+  # Old element should not update
+  assert elt1.children[0] == "updated"
+  
+  # New element should update
+  assert elt2.children[0] == "final"
+
+
+def test_deactivate_can_be_called_multiple_times(data):
+  """
+  Calling deactivate multiple times should be safe (idempotent).
+  """
+  elt = Label("hello", id="label_id")
+  binding = Binding(data, "value").bind_ft(elt, name="label_name")
+  
+  binding.deactivate()
+  binding.deactivate()  # Should not raise an error
+  binding.deactivate()  # Should not raise an error
+  
+  assert binding._is_active is False
+
+
+def test_i_cannot_activate_without_configuration(data):
+  """
+  Calling activate directly without proper configuration should raise ValueError.
+  """
+  binding = Binding(data, "value")
+  
+  with pytest.raises(ValueError, match="ft element is required"):
+    binding.activate()
+
+
+def test_activation_validates_strategies(data):
+  """
+  Activation should fail if detection/update strategies are not initialized.
+  """
+  elt = Label("hello", id="label_id")
+  binding = Binding(data, "value")
+  binding.ft = elt
+  binding.ft_name = "label_name"
+  
+  with pytest.raises(ValueError, match="detection strategy not initialized"):
+    binding.activate()
+
+
+def test_i_can_chain_bind_ft_calls(data):
+  """
+  bind_ft should return self for method chaining.
+  """
+  elt = Label("hello", id="label_id")
+  
+  binding = Binding(data, "value").bind_ft(elt, name="label_name")
+  
+  assert isinstance(binding, Binding)
+  assert binding._is_active is True
+
+
+def test_bind_ft_updates_optional_parameters(data):
+  """
+  bind_ft should update optional parameters if provided.
+  """
+  elt = Input(name="input_elt", type="checkbox")
+  
+  binding = Binding(data, "value")
+  
+  binding.bind_ft(
+    elt,
+    name="input_elt",
+    attr="checked",
+    data_converter=BooleanConverter(),
+    detection_mode=DetectionMode.AttributePresence,
+    update_mode=UpdateMode.AttributePresence
+  )
+  
+  assert binding.detection_mode == DetectionMode.AttributePresence
+  assert binding.update_mode == UpdateMode.AttributePresence
+  assert isinstance(binding.data_converter, BooleanConverter)
+
+
+def test_deactivated_binding_does_not_update_on_data_change(data):
+  """
+  After deactivation, changes to data should not update the UI element.
+  """
+  elt = Label("hello", id="label_id")
+  binding = Binding(data, "value").bind_ft(elt, name="label_name")
+  
+  # Verify it works when active
+  data.value = "first update"
+  assert elt.children[0] == "first update"
+  
+  # Deactivate
+  binding.deactivate()
+  
+  # Change data - element should NOT update
+  data.value = "second update"
+  assert elt.children[0] == "first update"
+
+
+def test_multiple_bindings_can_coexist(data):
+  """
+  Multiple bindings can be created and managed independently.
+  """
+  elt1 = Label("hello", id="label_id_1")
+  elt2 = Input(value="world", id="input_id_2")
+  
+  binding1 = Binding(data, "value").bind_ft(elt1, name="label_name")
+  binding2 = Binding(data, "value").bind_ft(elt2, name="input_name", attr="value")
+  
+  assert len(BindingsManager.bindings) == 2
+  assert binding1._is_active is True
+  assert binding2._is_active is True
+  
+  # Change data - both should update
+  data.value = "updated"
+  assert elt1.children[0] == "updated"
+  assert elt2.attrs["value"] == "updated"
+  
+  # Deactivate one
+  binding1.deactivate()
+  assert len(BindingsManager.bindings) == 1
+  
+  # Change data - only binding2 should update
+  data.value = "final"
+  assert elt1.children[0] == "updated"  # Not changed
+  assert elt2.attrs["value"] == "final"  # Changed
+
+
+def test_i_cannot_bind_when_htmx_post_already_set(data):
+  elt = Input(name="input_elt", hx_post="/some/url")
+  binding = Binding(data, "value")
+  
+  with pytest.raises(ValueError, match="htmx post already set on input"):
+    binding.bind_ft(elt, name="label_name")

tests/core/test_commands.py

@@ -0,0 +1,95 @@
+from dataclasses import dataclass
+from typing import Any
+
+import pytest
+from fasthtml.components import Button
+from myutils.observable import make_observable, bind
+
+from myfasthtml.core.commands import Command, CommandsManager
+from myfasthtml.core.constants import ROUTE_ROOT, Routes
+from myfasthtml.test.matcher import matches
+
+
+@dataclass
+class Data:
+  value: Any
+
+
+def callback():
+  return "Hello World"
+
+
+@pytest.fixture(autouse=True)
+def reset_command_manager():
+  CommandsManager.reset()
+
+
+def test_i_can_create_a_command_with_no_params():
+  command = Command('test', 'Command description', callback)
+  assert command.id is not None
+  assert command.name == 'test'
+  assert command.description == 'Command description'
+  assert command.execute() == "Hello World"
+
+
+def test_command_are_registered():
+  command = Command('test', 'Command description', callback)
+  assert CommandsManager.commands.get(str(command.id)) is command
+
+
+def test_i_can_bind_a_command_to_an_element():
+  command = Command('test', 'Command description', callback)
+  elt = Button()
+  updated = command.bind_ft(elt)
+  
+  expected = Button(hx_post=f"{ROUTE_ROOT}{Routes.Commands}")
+  
+  assert matches(updated, expected)
+
+
+def test_i_can_suppress_swapping_with_target_attr():
+  command = Command('test', 'Command description', callback).htmx(target=None)
+  elt = Button()
+  updated = command.bind_ft(elt)
+  
+  expected = Button(hx_post=f"{ROUTE_ROOT}{Routes.Commands}", hx_swap="none")
+  
+  assert matches(updated, expected)
+
+
+def test_i_can_bind_a_command_to_an_observable():
+  data = Data("hello")
+  
+  def on_data_change(old, new):
+    return old, new
+  
+  def another_callback():
+    data.value = "new value"
+    return "another callback result"
+  
+  make_observable(data)
+  bind(data, "value", on_data_change)
+  command = Command('test', 'Command description', another_callback).bind(data)
+  
+  res = command.execute()
+  
+  assert res == ["another callback result", ("hello", "new value")]
+
+
+def test_i_can_bind_a_command_to_an_observable_2():
+  data = Data("hello")
+  
+  def on_data_change(old, new):
+    return old, new
+  
+  def another_callback():
+    data.value = "new value"
+    return ["another 1", "another 2"]
+  
+  make_observable(data)
+  bind(data, "value", on_data_change)
+  command = Command('test', 'Command description', another_callback).bind(data)
+  
+  res = command.execute()
+  
+  assert res == ["another 1", "another 2", ("hello", "new value")]

tests/test_commands.py

@@ -1,25 +0,0 @@
-import pytest
-
-from myfasthtml.core.commands import Command, CommandsManager
-
-
-def callback():
-  return "Hello World"
-
-
-@pytest.fixture(autouse=True)
-def test_reset_command_manager():
-  CommandsManager.reset()
-
-
-def test_i_can_create_a_command_with_no_params():
-  command = Command('test', 'Command description', callback)
-  assert command.id is not None
-  assert command.name == 'test'
-  assert command.description == 'Command description'
-  assert command.execute() == "Hello World"
-
-
-def test_command_are_registered():
-  command = Command('test', 'Command description', callback)
-  assert CommandsManager.commands.get(str(command.id)) is command

tests/test_integration.py

@@ -0,0 +1,80 @@
+from dataclasses import dataclass
+from typing import Any
+
+import pytest
+from fasthtml.components import Input, Label
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.core.commands import Command, CommandsManager
+from myfasthtml.test.testclient import MyTestClient, TestableElement
+
+
+def new_value(value):
+  return value
+
+
+@dataclass
+class Data:
+  value: Any
+
+
+@pytest.fixture()
+def user():
+  test_app, rt = fast_app(default_hdrs=False)
+  user = MyTestClient(test_app)
+  return user
+
+
+@pytest.fixture()
+def rt(user):
+  return user.app.route
+
+
+class TestingCommand:
+  def test_i_can_trigger_a_command(self, user):
+    command = Command('test', 'TestingCommand', new_value, "this is my new value")
+    testable = TestableElement(user, mk.button('button', command))
+    testable.click()
+    assert user.get_content() == "this is my new value"
+  
+  def test_error_is_raised_when_command_is_not_found(self, user):
+    command = Command('test', 'TestingCommand', new_value, "this is my new value")
+    CommandsManager.reset()
+    testable = TestableElement(user, mk.button('button', command))
+    
+    with pytest.raises(ValueError) as exc_info:
+      testable.click()
+    
+    assert "not found." in str(exc_info.value)
+  
+  def test_i_can_play_a_complex_scenario(self, user, rt):
+    command = Command('test', 'TestingCommand', new_value, "this is my new value")
+    
+    @rt('/')
+    def get(): return mk.button('button', command)
+    
+    user.open("/")
+    user.should_see("button")
+    
+    user.find_element("button").click()
+    user.should_see("this is my new value")
+
+
+class TestingBindings:
+  def test_i_can_bind_input(self, user, rt):
+    @rt("/")
+    def index():
+      data = Data("hello world")
+      input_elt = Input(name="input_name")
+      label_elt = Label()
+      mk.manage_binding(input_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      return input_elt, label_elt
+    
+    user.open("/")
+    user.should_see("")
+    testable_input = user.find_element("input")
+    testable_input.send("new value")
+    user.should_see("new value")  # the one from the label

tests/test_integration_commands.py

@@ -1,53 +0,0 @@
-import pytest
-from fasthtml.fastapp import fast_app
-
-from myfasthtml.controls.button import mk_button
-from myfasthtml.core.commands import Command, CommandsManager
-from myfasthtml.core.testclient import MyTestClient, TestableElement
-
-
-def new_value(value):
-  return value
-
-
-@pytest.fixture()
-def user():
-  test_app, rt = fast_app(default_hdrs=False)
-  user = MyTestClient(test_app)
-  return user
-
-
-@pytest.fixture()
-def rt(user):
-  return user.app.route
-
-
-def test_i_can_trigger_a_command(user):
-  command = Command('test', 'TestingCommand', new_value, "this is my new value")
-  testable = TestableElement(user, mk_button('button', command))
-  testable.click()
-  assert user.get_content() == "this is my new value"
-
-
-def test_error_is_raised_when_command_is_not_found(user):
-  command = Command('test', 'TestingCommand', new_value, "this is my new value")
-  CommandsManager.reset()
-  testable = TestableElement(user, mk_button('button', command))
-  
-  with pytest.raises(ValueError) as exc_info:
-    testable.click()
-  
-  assert "not found." in str(exc_info.value)
-
-
-def test_i_can_play_a_complex_scenario(user, rt):
-  command = Command('test', 'TestingCommand', new_value, "this is my new value")
-  
-  @rt('/')
-  def get(): return mk_button('button', command)
-  
-  user.open("/")
-  user.should_see("button")
-  
-  user.find_element("button").click()
-  user.should_see("this is my new value")

tests/test_mytestclient.py

@@ -1,326 +0,0 @@
-import pytest
-from fasthtml.components import Div
-from fasthtml.fastapp import fast_app
-
-from myfasthtml.core.testclient import MyTestClient, TestableElement
-
-
-def test_i_can_open_a_page():
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  @rt('/')
-  def get(): return "hello world"
-  
-  client.open("/")
-  
-  assert client.get_content() == "hello world"
-
-
-def test_i_can_open_a_page_when_html():
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  @rt('/')
-  def get(): return Div("hello world")
-  
-  client.open("/")
-  
-  assert client.get_content() == ' <!doctype html>\n <html>\n   <head>\n     <title>FastHTML page</title>\n     <link rel="canonical" href="http://testserver/">\n   </head>\n   <body>\n     <div>hello world</div>\n   </body>\n </html>\n'
-
-
-def test_i_cannot_open_a_page_not_defined():
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  with pytest.raises(AssertionError) as exc_info:
-    client.open("/not_found")
-  
-  assert str(exc_info.value) == "Failed to open '/not_found'. status code=404 : reason='404 Not Found'"
-  
-def test_i_can_see_text_in_plain_response():
-    """Test that should_see() works with plain text responses."""
-    test_app, rt = fast_app(default_hdrs=False)
-    client = MyTestClient(test_app)
-    
-    @rt('/')
-    def get():
-      return "hello world"
-    
-    client.open("/").should_see("hello world")
-
-
-def test_i_can_see_text_in_html_response():
-  """Test that should_see() extracts visible text from HTML responses."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  @rt('/')
-  def get():
-    return "<html><body><h1>Welcome</h1><p>This is a test</p></body></html>"
-  
-  client.open("/").should_see("Welcome").should_see("This is a test")
-
-
-def test_i_can_see_text_ignoring_html_tags():
-  """Test that should_see() searches in visible text only, not in HTML tags."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  @rt('/')
-  def get():
-    return '<div class="container">Content</div>'
-  
-  # Should find the visible text
-  client.open("/").should_see("Content")
-  
-  # Should NOT find text that's only in attributes/tags
-  with pytest.raises(AssertionError) as exc_info:
-    client.should_see("container")
-  
-  assert "Expected to see 'container' in page content but it was not found" in str(exc_info.value)
-
-
-def test_i_cannot_see_text_that_is_not_present():
-  """Test that should_see() raises AssertionError when text is not found."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  @rt('/')
-  def get():
-    return "hello world"
-  
-  with pytest.raises(AssertionError) as exc_info:
-    client.open("/").should_see("goodbye")
-  
-  assert "Expected to see 'goodbye' in page content but it was not found" in str(exc_info.value)
-  assert "hello world" in str(exc_info.value)
-
-
-def test_i_cannot_call_should_see_without_opening_page():
-  """Test that should_see() raises ValueError if no page has been opened."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  with pytest.raises(ValueError) as exc_info:
-    client.should_see("anything")
-  
-  assert str(exc_info.value) == "No page content available. Call open() before should_see()."
-
-
-def test_i_can_verify_text_is_not_present():
-  """Test that should_not_see() works when text is absent."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  @rt('/')
-  def get():
-    return "hello world"
-  
-  client.open("/").should_not_see("goodbye")
-
-
-def test_i_cannot_use_should_not_see_when_text_is_present():
-  """Test that should_not_see() raises AssertionError when text is found."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  @rt('/')
-  def get():
-    return "hello world"
-  
-  with pytest.raises(AssertionError) as exc_info:
-    client.open("/").should_not_see("hello")
-  
-  error_message = str(exc_info.value)
-  assert "Expected NOT to see 'hello' in page content but it was found" in error_message
-
-
-def test_i_cannot_call_should_not_see_without_opening_page():
-  """Test that should_not_see() raises ValueError if no page has been opened."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  with pytest.raises(ValueError) as exc_info:
-    client.should_not_see("anything")
-  
-  assert str(exc_info.value) == "No page content available. Call open() before should_not_see()."
-
-
-def test_i_can_chain_multiple_assertions():
-  """Test that assertions can be chained together."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  @rt('/')
-  def get():
-    return "<html><body><h1>Welcome</h1><p>Content here</p></body></html>"
-  
-  # Chain multiple assertions
-  client.open("/").should_see("Welcome").should_see("Content").should_not_see("Error")
-
-
-def test_i_can_see_element_context_when_text_should_not_be_seen():
-  """Test that the HTML element containing the text is displayed with parent context."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-  
-  @rt('/')
-  def get():
-    return '<div class="container"><p class="content">forbidden text</p></div>'
-  
-  with pytest.raises(AssertionError) as exc_info:
-    client.open("/").should_not_see("forbidden text")
-  
-  error_message = str(exc_info.value)
-  assert "Found in:" in error_message
-  assert '<p class="content">forbidden text</p>' in error_message
-  assert '<div class="container">' in error_message
-
-
-def test_i_can_configure_parent_levels_in_constructor():
-  """Test that parent_levels parameter controls the number of parent levels shown."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app, parent_levels=2)
-  
-  @rt('/')
-  def get():
-    return '<body><div class="wrapper"><div class="container"><p>error</p></div></div></body>'
-  
-  with pytest.raises(AssertionError) as exc_info:
-    client.open("/").should_not_see("error")
-  
-  error_message = str(exc_info.value)
-  assert '<p>error</p>' in error_message
-  assert '<div class="container">' in error_message
-  assert '<div class="wrapper">' in error_message
-
-
-def test_i_can_find_text_in_nested_elements():
-  """Test that the smallest element containing the text is found in nested structures."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-
-  @rt('/')
-  def get():
-    return '<div><section><article><p class="target">nested text</p></article></section></div>'
-
-  with pytest.raises(AssertionError) as exc_info:
-    client.open("/").should_not_see("nested text")
-
-  error_message = str(exc_info.value)
-  # Should find the <p> element, not the outer <div>
-  assert '<p class="target">nested text</p>' in error_message
-
-
-def test_i_can_find_fragmented_text_across_tags():
-  """Test that text fragmented across multiple tags is correctly found."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-
-  @rt('/')
-  def get():
-    return '<p class="message">hel<span>lo</span> world</p>'
-
-  with pytest.raises(AssertionError) as exc_info:
-    client.open("/").should_not_see("hello world")
-
-  error_message = str(exc_info.value)
-  # Should find the parent <p> element that contains the full text
-  assert '<p class="message">' in error_message
-
-
-def test_i_do_not_find_text_in_html_attributes():
-  """Test that text in HTML attributes is not considered as visible text."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-
-  @rt('/')
-  def get():
-    return '<div class="error message" title="error info">Success</div>'
-
-  # "error" is in attributes but not in visible text
-  client.open("/").should_not_see("error")
-
-  # "Success" is in visible text
-  with pytest.raises(AssertionError):
-    client.should_not_see("Success")
-
-
-@pytest.mark.parametrize("selector,expected_tag", [
-    ("#unique-id", '<div class="main wrapper"'),
-    (".home-link", '<a class="link home-link"'),
-    ("div > div", '<div class="content"'),
-    ("div span", "<span"),
-    ("[data-type]", '<a class="link home-link"'),
-    ('[data-type="navigation"]', '<a class="link home-link"'),
-    ('[class~="link"]', '<a class="link home-link"'),
-    ('[href^="/home"]', '<a class="link home-link"'),
-    ('[href$="about"]', '<a href="/about">'),
-    ('[data-author*="john"]', '<a class="link home-link"'),
-])
-def test_i_can_find_element(selector, expected_tag):
-  """Test that find_element works with various CSS selectors."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-
-  @rt('/')
-  def get():
-    return '''
-        <div id="unique-id" class="main wrapper">
-          <a href="/home" class="link home-link" data-type="navigation" data-author="john-doe">Home</a>
-          <a href="/about">About</a>
-          <div class="content">
-            <span class="text">Content</span>
-          </div>
-        </div>
-        '''
-
-  element = client.open("/").find_element(selector)
-
-  assert element is not None
-  assert isinstance(element, TestableElement)
-  assert expected_tag in element.html_fragment
-
-
-def test_i_cannot_find_element_when_none_exists():
-  """Test that find_element raises AssertionError when no element matches."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-
-  @rt('/')
-  def get():
-    return '<div class="container"><p>Content</p></div>'
-
-  with pytest.raises(AssertionError) as exc_info:
-    client.open("/").find_element("#non-existent")
-
-  assert "No element found matching selector '#non-existent'" in str(exc_info.value)
-
-
-def test_i_cannot_find_element_when_multiple_exist():
-  """Test that find_element raises AssertionError when multiple elements match."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-
-  @rt('/')
-  def get():
-    return '<div><p class="text">First</p><p class="text">Second</p><p class="text">Third</p></div>'
-
-  with pytest.raises(AssertionError) as exc_info:
-    client.open("/").find_element(".text")
-
-  error_message = str(exc_info.value)
-  assert "Found 3 elements matching selector '.text'" in error_message
-  assert "Expected exactly 1" in error_message
-
-
-def test_i_cannot_call_find_element_without_opening_page():
-  """Test that find_element raises ValueError if no page has been opened."""
-  test_app, rt = fast_app(default_hdrs=False)
-  client = MyTestClient(test_app)
-
-  with pytest.raises(ValueError) as exc_info:
-    client.find_element("#any-selector")
-
-  assert str(exc_info.value) == "No page content available. Call open() before find_element()."

tests/testclient/test_matches.py

@@ -2,9 +2,9 @@ import pytest
 from fastcore.basics import NotStr
 from fasthtml.components import *
 
-from myfasthtml.core.matcher import matches, StartsWith, Contains, DoesNotContain, Empty, DoNotCheck, ErrorOutput, \
-  ErrorComparisonOutput
-from myfasthtml.core.testclient import MyFT
+from myfasthtml.test.matcher import matches, StartsWith, Contains, DoesNotContain, Empty, DoNotCheck, ErrorOutput, \
+  ErrorComparisonOutput, AttributeForbidden, AnyValue
+from myfasthtml.test.testclient import MyFT
 
 
 @pytest.mark.parametrize('actual, expected', [
@@ -17,12 +17,14 @@ from myfasthtml.core.testclient import MyFT
     (Div(attr1="valueXXX", attr2="value"), Div(attr1=StartsWith("value"))),
     (Div(attr1="before value after", attr2="value"), Div(attr1=Contains("value"))),
     (Div(attr1="before after", attr2="value"), Div(attr1=DoesNotContain("value"))),
+    (Div(attr1="value"), Div(attr1=AnyValue())),
     (None, DoNotCheck()),
     (123, DoNotCheck()),
     (Div(), DoNotCheck()),
     ([Div(), Span()], DoNotCheck()),
     (NotStr("123456"), NotStr("123")),  # for NotStr, only the beginning is checked
     (Div(), Div(Empty())),
+    (Div(attr1="value1"), Div(AttributeForbidden("attr2"))),
     (Div(123), Div(123)),
     (Div(Span(123)), Div(Span(123))),
     (Div(Span(123)), Div(DoNotCheck())),
@@ -48,10 +50,12 @@ def test_i_can_match(actual, expected):
     (Div(attr1="value1"), Div(attr1=StartsWith("value2")), "The condition 'StartsWith(value2)' is not satisfied"),
     (Div(attr1="value1"), Div(attr1=Contains("value2")), "The condition 'Contains(value2)' is not satisfied"),
     (Div(attr1="value1 value2"), Div(attr1=DoesNotContain("value2")), "The condition 'DoesNotContain(value2)'"),
+    (Div(attr1=None), Div(attr1=AnyValue()), "'attr1' is not found in Actual"),
+    (Div(), Div(attr1=AnyValue()), "'attr1' is not found in Actual"),
     (NotStr("456"), NotStr("123"), "Notstr values are different"),
-    (Div(attr="value"), Div(Empty()), "Actual is not empty"),
-    (Div(120), Div(Empty()), "Actual is not empty"),
-    (Div(Span()), Div(Empty()), "Actual is not empty"),
+    (Div(attr="value"), Div(Empty()), "The condition 'Empty()' is not satisfied"),
+    (Div(120), Div(Empty()), "The condition 'Empty()' is not satisfied"),
+    (Div(Span()), Div(Empty()), "The condition 'Empty()' is not satisfied"),
     (Div(), Div(Span()), "Actual is lesser than expected"),
     (Div(), Div(123), "Actual is lesser than expected"),
     (Div(Span()), Div(Div()), "The elements are different"),
@@ -59,6 +63,7 @@ def test_i_can_match(actual, expected):
     (Div(123), Div(456), "The values are different"),
     (Div(Span(), Span()), Div(Span(), Div()), "The elements are different"),
     (Div(Span(Div())), Div(Span(Span())), "The elements are different"),
+    (Div(attr1="value1"), Div(AttributeForbidden("attr1")), "condition 'AttributeForbidden(attr1)' is not satisfied"),
 ])
 def test_i_can_detect_errors(actual, expected, error_message):
   with pytest.raises(AssertionError) as exc_info:
@@ -174,6 +179,7 @@ def test_i_can_output_error_when_predicate():
 
 
 def test_i_can_output_error_when_predicate_wrong_value():
+  """I can display error when the condition predicate is not satisfied."""
   elt = "before after"
   expected = Contains("value")
   path = ""
@@ -184,6 +190,7 @@ def test_i_can_output_error_when_predicate_wrong_value():
 
 
 def test_i_can_output_error_child_element():
+  """I can display error when the element has children"""
   elt = Div(P(id="p_id"), Div(id="child_1"), Div(id="child_2"), attr1="value1")
   expected = elt
   path = ""
@@ -196,6 +203,19 @@ def test_i_can_output_error_child_element():
                                  ')',
                                  ]
 
+def test_i_can_output_error_child_element_text():
+  """I can display error when the children is not a FT"""
+  elt = Div("Hello world", Div(id="child_1"), Div(id="child_2"), attr1="value1")
+  expected = elt
+  path = ""
+  error_output = ErrorOutput(path, elt, expected)
+  error_output.compute()
+  assert error_output.output == ['(div "attr1"="value1"',
+                                 '  "Hello world"',
+                                 '  (div "id"="child_1")',
+                                 '  (div "id"="child_2")',
+                                 ')',
+                                 ]
 
 def test_i_can_output_error_child_element_indicating_sub_children():
   elt = Div(P(id="p_id"), Div(Div(id="child_2"), id="child_1"), attr1="value1")

tests/testclient/test_mytestclient.py

@@ -0,0 +1,483 @@
+import pytest
+from fasthtml.components import Div
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.test.testclient import MyTestClient, TestableElement, TestableForm
+
+
+class TestMyTestClientOpen:
+  
+  def test_i_can_open_a_page(self):
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get(): return "hello world"
+    
+    client.open("/")
+    
+    assert client.get_content() == "hello world"
+  
+  def test_i_can_open_a_page_when_html(self):
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get(): return Div("hello world")
+    
+    client.open("/")
+    
+    assert client.get_content() == ' <!doctype html>\n <html>\n   <head>\n     <title>FastHTML page</title>\n     <link rel="canonical" href="http://testserver/">\n   </head>\n   <body>\n     <div>hello world</div>\n   </body>\n </html>\n'
+  
+  def test_i_cannot_open_a_page_not_defined(self):
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/not_found")
+    
+    assert str(exc_info.value) == "Failed to open '/not_found'. status code=404 : reason='404 Not Found'"
+
+
+class TestMyTestClientShouldSee:
+  def test_i_can_see_text_in_plain_response(self):
+    """Test that should_see() works with plain text responses."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return "hello world"
+    
+    client.open("/").should_see("hello world")
+  
+  def test_i_can_see_text_in_html_response(self):
+    """Test that should_see() extracts visible text from HTML responses."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return "<html><body><h1>Welcome</h1><p>This is a test</p></body></html>"
+    
+    client.open("/").should_see("Welcome").should_see("This is a test")
+  
+  def test_i_can_see_text_ignoring_html_tags(self):
+    """Test that should_see() searches in visible text only, not in HTML tags."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '<div class="container">Content</div>'
+    
+    # Should find the visible text
+    client.open("/").should_see("Content")
+    
+    # Should NOT find text that's only in attributes/tags
+    with pytest.raises(AssertionError) as exc_info:
+      client.should_see("container")
+    
+    assert "Expected to see 'container' in page content but it was not found" in str(exc_info.value)
+  
+  def test_i_cannot_see_text_that_is_not_present(self):
+    """Test that should_see() raises AssertionError when text is not found."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return "hello world"
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").should_see("goodbye")
+    
+    assert "Expected to see 'goodbye' in page content but it was not found" in str(exc_info.value)
+    assert "hello world" in str(exc_info.value)
+  
+  def test_i_cannot_call_should_see_without_opening_page(self):
+    """Test that should_see() raises ValueError if no page has been opened."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    with pytest.raises(ValueError) as exc_info:
+      client.should_see("anything")
+    
+    assert str(exc_info.value) == "No page content available. Call open() before should_see()."
+  
+  def test_i_can_verify_text_is_not_present(self):
+    """Test that should_not_see() works when text is absent."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return "hello world"
+    
+    client.open("/").should_not_see("goodbye")
+  
+  def test_i_cannot_use_should_not_see_when_text_is_present(self):
+    """Test that should_not_see() raises AssertionError when text is found."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return "hello world"
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").should_not_see("hello")
+    
+    error_message = str(exc_info.value)
+    assert "Expected NOT to see 'hello' in page content but it was found" in error_message
+  
+  def test_i_cannot_call_should_not_see_without_opening_page(self):
+    """Test that should_not_see() raises ValueError if no page has been opened."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    with pytest.raises(ValueError) as exc_info:
+      client.should_not_see("anything")
+    
+    assert str(exc_info.value) == "No page content available. Call open() before should_not_see()."
+  
+  def test_i_can_chain_multiple_assertions(self):
+    """Test that assertions can be chained together."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return "<html><body><h1>Welcome</h1><p>Content here</p></body></html>"
+    
+    # Chain multiple assertions
+    client.open("/").should_see("Welcome").should_see("Content").should_not_see("Error")
+  
+  def test_i_can_see_element_context_when_text_should_not_be_seen(self):
+    """Test that the HTML element containing the text is displayed with parent context."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '<div class="container"><p class="content">forbidden text</p></div>'
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").should_not_see("forbidden text")
+    
+    error_message = str(exc_info.value)
+    assert "Found in:" in error_message
+    assert '<p class="content">forbidden text</p>' in error_message
+    assert '<div class="container">' in error_message
+  
+  def test_i_can_configure_parent_levels_in_constructor(self):
+    """Test that parent_levels parameter controls the number of parent levels shown."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app, parent_levels=2)
+    
+    @rt('/')
+    def get():
+      return '<body><div class="wrapper"><div class="container"><p>error</p></div></div></body>'
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").should_not_see("error")
+    
+    error_message = str(exc_info.value)
+    assert '<p>error</p>' in error_message
+    assert '<div class="container">' in error_message
+    assert '<div class="wrapper">' in error_message
+  
+  def test_i_can_find_text_in_nested_elements(self):
+    """Test that the smallest element containing the text is found in nested structures."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '<div><section><article><p class="target">nested text</p></article></section></div>'
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").should_not_see("nested text")
+    
+    error_message = str(exc_info.value)
+    # Should find the <p> element, not the outer <div>
+    assert '<p class="target">nested text</p>' in error_message
+  
+  def test_i_can_find_fragmented_text_across_tags(self):
+    """Test that text fragmented across multiple tags is correctly found."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '<p class="message">hel<span>lo</span> world</p>'
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").should_not_see("hello world")
+    
+    error_message = str(exc_info.value)
+    # Should find the parent <p> element that contains the full text
+    assert '<p class="message">' in error_message
+  
+  def test_i_do_not_find_text_in_html_attributes(self):
+    """Test that text in HTML attributes is not considered as visible text."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '<div class="error message" title="error info">Success</div>'
+    
+    # "error" is in attributes but not in visible text
+    client.open("/").should_not_see("error")
+    
+    # "Success" is in visible text
+    with pytest.raises(AssertionError):
+      client.should_not_see("Success")
+
+
+class TestMyTestClientFindElement:
+  
+  @pytest.mark.parametrize("selector,expected_tag", [
+      ("#unique-id", '<div class="main wrapper"'),
+      (".home-link", '<a class="link home-link"'),
+      ("div > div", '<div class="content"'),
+      ("div span", "<span"),
+      ("[data-type]", '<a class="link home-link"'),
+      ('[data-type="navigation"]', '<a class="link home-link"'),
+      ('[class~="link"]', '<a class="link home-link"'),
+      ('[href^="/home"]', '<a class="link home-link"'),
+      ('[href$="about"]', '<a href="/about">'),
+      ('[data-author*="john"]', '<a class="link home-link"'),
+  ])
+  def test_i_can_find_element(self, selector, expected_tag):
+    """Test that find_element works with various CSS selectors."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '''
+          <div id="unique-id" class="main wrapper">
+            <a href="/home" class="link home-link" data-type="navigation" data-author="john-doe">Home</a>
+            <a href="/about">About</a>
+            <div class="content">
+              <span class="text">Content</span>
+            </div>
+          </div>
+          '''
+    
+    element = client.open("/").find_element(selector)
+    
+    assert element is not None
+    assert isinstance(element, TestableElement)
+    assert expected_tag in element.html_fragment
+  
+  def test_i_cannot_find_element_when_none_exists(self):
+    """Test that find_element raises AssertionError when no element matches."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '<div class="container"><p>Content</p></div>'
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").find_element("#non-existent")
+    
+    assert "No element found matching selector '#non-existent'" in str(exc_info.value)
+  
+  def test_i_cannot_find_element_when_multiple_exist(self):
+    """Test that find_element raises AssertionError when multiple elements match."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '<div><p class="text">First</p><p class="text">Second</p><p class="text">Third</p></div>'
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").find_element(".text")
+    
+    error_message = str(exc_info.value)
+    assert "Found 3 elements matching selector '.text'" in error_message
+    assert "Expected exactly 1" in error_message
+  
+  def test_i_cannot_call_find_element_without_opening_page(self):
+    """Test that find_element raises ValueError if no page has been opened."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    with pytest.raises(ValueError) as exc_info:
+      client.find_element("#any-selector")
+    
+    assert str(exc_info.value) == "No page content available. Call open() before find_element()."
+
+
+class TestMyTestClientFindForm:
+  def test_i_can_find_form(self):
+    """Test that find_form works fo simple form."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '''<form></form>'''
+    
+    form = client.open("/").find_form()
+    
+    assert form is not None
+    assert isinstance(form, TestableForm)
+  
+  def test_i_can_find_form_in_nested_elements(self):
+    """Test that find_form works when form is nested in other elements."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '''
+          <div class="container">
+            <div class="wrapper">
+              <form></form>
+            </div>
+          </div>
+      '''
+    
+    form = client.open("/").find_form()
+    
+    assert form is not None
+    assert isinstance(form, TestableForm)
+  
+  def test_i_can_find_form_with_all_fields(self):
+    """Test that find_form works when form has fields."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '''
+          <form>
+            <input type="text" name="username" placeholder="Username">
+            <input type="password" name="password" placeholder="Password">
+            <button type="submit">Sign In</button>
+          </form>
+      '''
+    
+    form = client.open("/").find_form(fields=["username", "password"])
+    
+    assert form is not None
+    assert isinstance(form, TestableForm)
+  
+  def test_i_can_find_form_with_label(self):
+    """Test that find_form works when form has fields."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '''
+          <form>
+            <label for="username">Username</label>
+            <input type="text" name="username" placeholder="Username">
+            <input type="password" name="password" placeholder="Password">
+            <button type="submit">Sign In</button>
+          </form>
+      '''
+    
+    form = client.open("/").find_form(fields=["Username", "password"])
+    
+    assert form is not None
+    assert isinstance(form, TestableForm)
+  
+  def test_i_can_find_form_with_one_field(self):
+    """Test that find_form works when form has at least one field."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '''
+          <form>
+            <input type="text" name="username" placeholder="Username">
+            <input type="password" name="password" placeholder="Password">
+            <button type="submit">Sign In</button>
+          </form>
+      '''
+    
+    form = client.open("/").find_form(fields=["username"])
+    
+    assert form is not None
+    assert isinstance(form, TestableForm)
+  
+  def test_i_cannot_find_element_when_none_exists(self):
+    """Test that find_form raises AssertionError when no form found."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '<div class="container"><p>Content</p></div>'
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").find_form()
+    
+    assert "No form found" in str(exc_info.value)
+  
+  def test_i_cannot_call_find_form_without_opening_page(self):
+    """Test that find_form raises ValueError if no page has been opened."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    with pytest.raises(ValueError) as exc_info:
+      client.find_form()
+    
+    assert str(exc_info.value) == "No page content available. Call open() before find_form()."
+  
+  def test_cannot_find_form_when_multiple_exist(self):
+    """Test that find_form raises AssertionError when multiple forms match."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '''
+          <div class="container">
+            <form></form>
+            <form></form>
+          </div>
+      '''
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").find_form()
+    
+    error_message = str(exc_info.value)
+    assert "Found 2 forms (with the specified fields). Expected exactly 1." in error_message
+  
+  def test_cannot_find_form_with_fields_when_multiple_exist(self):
+    """Test that find_form raises AssertionError when multiple forms match."""
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    
+    @rt('/')
+    def get():
+      return '''
+          <div class="container">
+            <form>
+              <input type="text" name="username" placeholder="Username">
+              <input type="password" name="password" placeholder="Password">
+              <button type="submit">Sign In</button>
+            </form>
+            <form>
+              <input type="text" name="username" placeholder="Username">
+              <input type="password" name="password" placeholder="Password">
+              <button type="submit">Sign In</button>
+            </form>
+          </div>
+      '''
+    
+    with pytest.raises(AssertionError) as exc_info:
+      client.open("/").find_form(fields=["username", "password"])
+    
+    error_message = str(exc_info.value)
+    assert "Found 2 forms (with the specified fields). Expected exactly 1." in error_message

tests/testclient/test_teastable_radio.py

@@ -0,0 +1,89 @@
+from dataclasses import dataclass
+
+import pytest
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.test.testclient import MyTestClient, TestableRadio
+
+
+@dataclass
+class Data:
+  value: str = "hello world"
+
+
+@pytest.fixture
+def test_app():
+  test_app, rt = fast_app(default_hdrs=False)
+  return test_app
+
+
+@pytest.fixture
+def rt(test_app):
+  return test_app.route
+
+
+@pytest.fixture
+def test_client(test_app):
+  return MyTestClient(test_app)
+
+
+def test_i_can_read_not_selected_radio(test_client):
+  html = '''<input type="radio" name="radio_name" value="option1" />'''
+  
+  input_elt = TestableRadio(test_client, html)
+  
+  assert input_elt.name == "radio_name"
+  assert input_elt.value is None
+
+
+def test_i_can_read_selected_radio(test_client):
+  html = '''<input type="radio" name="radio_name" value="option1" checked="true"/>'''
+  
+  input_elt = TestableRadio(test_client, html)
+  
+  assert input_elt.name == "radio_name"
+  assert input_elt.value == "option1"
+
+
+def test_i_cannot_read_radio_with_multiple_values(test_client):
+  html = '''
+  <input type="radio" name="radio_name" value="option1" checked="true" />
+  <input type="radio" name="radio_name" value="option2" />
+  '''
+  
+  with pytest.raises(AssertionError) as exc_info:
+    TestableRadio(test_client, html)
+  
+  assert "Only one radio button per name is supported" in str(exc_info.value)
+
+
+def test_i_cannot_read_radio_when_no_radio_button(test_client):
+  html = '''
+  <input type="text" name="radio_name" value="option1" checked="true" /> '''
+  
+  with pytest.raises(AssertionError) as exc_info:
+    TestableRadio(test_client, html)
+  
+  assert "No radio buttons found" in str(exc_info.value)
+
+
+def test_i_can_read_input_with_label(test_client):
+  html = '''<label for="uid">John Doe</label><input id="uid" type="radio" name="username" value="john_doe" />'''
+  
+  input_elt = TestableRadio(test_client, html)
+  assert input_elt.fields_mapping == {"John Doe": "username"}
+  assert input_elt.name == "username"
+  assert input_elt.value is None
+
+
+def test_i_can_send_values(test_client, rt):
+  html = '''<input type="text" name="username" type="radio" value="john_doe" hx_post="/submit"/>'''
+  
+  @rt('/submit')
+  def post(username: str):
+    return f"Input received {username=}"
+  
+  input_elt = TestableRadio(test_client, html)
+  input_elt.select()
+  
+  assert test_client.get_content() == "Input received username='john_doe'"

tests/testclient/test_testable.py

@@ -0,0 +1,165 @@
+"""
+Comprehensive binding tests for all bindable FastHTML components.
+
+This test suite covers:
+- Input (text) - already tested
+- Checkbox - already tested
+- Textarea
+- Select (single)
+- Select (multiple)
+- Range (slider)
+- Radio buttons
+- Button
+- Input with Datalist (combobox)
+"""
+
+from dataclasses import dataclass
+
+import pytest
+from fasthtml.components import (
+  Input, Label, Textarea
+)
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.controls.helpers import mk
+from myfasthtml.core.bindings import Binding
+from myfasthtml.test.testclient import MyTestClient
+
+
+@dataclass
+class Data:
+  value: str = "hello world"
+
+
+@dataclass
+class NumericData:
+  value: int = 50
+
+
+@dataclass
+class BoolData:
+  value: bool = True
+
+
+@dataclass
+class ListData:
+  value: list = None
+  
+  def __post_init__(self):
+    if self.value is None:
+      self.value = []
+
+
+@pytest.fixture
+def test_app():
+  test_app, rt = fast_app(default_hdrs=False)
+  return test_app
+
+
+@pytest.fixture
+def rt(test_app):
+  return test_app.route
+
+
+@pytest.fixture
+def user(test_app):
+  return MyTestClient(test_app)
+
+
+class TestBindingEdgeCases:
+  """Tests for edge cases and special scenarios."""
+  
+  def test_multiple_components_bind_to_same_data(self, user, rt):
+    """
+    Multiple different components can bind to the same data object.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("synchronized")
+      
+      input_elt = Input(name="input_name")
+      textarea_elt = Textarea(name="textarea_name")
+      label_elt = Label()
+      
+      mk.manage_binding(input_elt, Binding(data))
+      mk.manage_binding(textarea_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return input_elt, textarea_elt, label_elt
+    
+    user.open("/")
+    user.should_see("synchronized")
+    
+    # Change via input
+    testable_input = user.find_element("input")
+    testable_input.send("changed via input")
+    user.should_see("changed via input")
+    
+    # Change via textarea
+    testable_textarea = user.find_element("textarea")
+    testable_textarea.send("changed via textarea")
+    user.should_see("changed via textarea")
+  
+  def test_component_without_name_attribute(self, user, rt):
+    """
+    Component without name attribute should handle gracefully.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("test")
+      # Input without name - should not crash
+      input_elt = Input()  # No name attribute
+      label_elt = Label()
+      
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return input_elt, label_elt
+    
+    user.open("/")
+    user.should_see("test")
+  
+  def test_binding_with_initial_empty_string(self, user, rt):
+    """
+    Binding should work correctly with empty string initial values.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("")
+      input_elt = Input(name="input_name")
+      label_elt = Label()
+      
+      mk.manage_binding(input_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return input_elt, label_elt
+    
+    user.open("/")
+    
+    testable_input = user.find_element("input")
+    testable_input.send("now has value")
+    user.should_see("now has value")
+  
+  def test_binding_with_special_characters(self, user, rt):
+    """
+    Binding should handle special characters correctly.
+    """
+    
+    @rt("/")
+    def index():
+      data = Data("Hello")
+      input_elt = Input(name="input_name")
+      label_elt = Label()
+      
+      mk.manage_binding(input_elt, Binding(data))
+      mk.manage_binding(label_elt, Binding(data))
+      
+      return input_elt, label_elt
+    
+    user.open("/")
+    
+    testable_input = user.find_element("input")
+    testable_input.send("Special: <>&\"'")
+    user.should_see("Special: <>&\"'")

tests/testclient/test_testable_checkbox.py

@@ -0,0 +1,59 @@
+import pytest
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.test.testclient import MyTestClient, TestableCheckbox
+
+
+@pytest.fixture
+def test_app():
+  test_app, rt = fast_app(default_hdrs=False)
+  return test_app
+
+
+@pytest.fixture
+def rt(test_app):
+  return test_app.route
+
+
+@pytest.fixture
+def test_client(test_app):
+  return MyTestClient(test_app)
+
+
+@pytest.mark.parametrize("html,expected_value", [
+    ('<input type="checkbox" name="male" checked />', True),
+    ('<input type="checkbox" name="male" />', False),
+])
+def test_i_can_read_input(test_client, html, expected_value):
+  input_elt = TestableCheckbox(test_client, html)
+  
+  assert input_elt.name == "male"
+  assert input_elt.value == expected_value
+
+
+def test_i_can_read_input_with_label(test_client):
+  html = '''<label for="uid">Male</label><input id="uid" type="checkbox" name="male" checked />'''
+  
+  input_elt = TestableCheckbox(test_client, html)
+  assert input_elt.fields_mapping == {"Male": "male"}
+  assert input_elt.name == "male"
+  assert input_elt.value == True
+
+
+def test_i_can_check_checkbox(test_client, rt):
+  html = '''<input type="checkbox" name="male" hx_post="/submit"/>'''
+  
+  @rt('/submit')
+  def post(male: bool=None):
+    return f"Checkbox received {male=}"
+  
+  input_elt = TestableCheckbox(test_client, html)
+  
+  input_elt.check()
+  assert test_client.get_content() == "Checkbox received male=True"
+
+  input_elt.uncheck()
+  assert test_client.get_content() == "Checkbox received male=None"
+
+  input_elt.toggle()
+  assert test_client.get_content() == "Checkbox received male=True"

tests/testclient/test_testable_element.py

@@ -2,14 +2,14 @@ import pytest
 from fasthtml.components import Div
 from fasthtml.fastapp import fast_app
 
-from myfasthtml.core.testclient import MyTestClient, TestableElement, MyFT
+from myfasthtml.test.testclient import MyTestClient, TestableElement, MyFT
 
 
 def test_i_can_create_testable_element_from_ft():
   ft = Div("hello world", id="test")
   testable_element = TestableElement(None, ft)
   
-  assert testable_element.ft == ft
+  assert testable_element.my_ft == MyFT('div', {'id': 'test'})
   assert testable_element.html_fragment == '<div id="test">hello world</div>'
 
 
@@ -17,7 +17,7 @@ def test_i_can_create_testable_element_from_str():
   ft = '<div id="test">hello world</div>'
   testable_element = TestableElement(None, ft)
   
-  assert testable_element.ft == MyFT('div', {'id': 'test'})
+  assert testable_element.my_ft == MyFT('div', {'id': 'test'})
   assert testable_element.html_fragment == '<div id="test">hello world</div>'
 
 
@@ -27,7 +27,7 @@ def test_i_can_create_testable_element_from_beautifulsoup_element():
   tag = BeautifulSoup(ft, 'html.parser').div
   testable_element = TestableElement(None, tag)
   
-  assert testable_element.ft == MyFT('div', {'id': 'test'})
+  assert testable_element.my_ft == MyFT('div', {'id': 'test'})
   assert testable_element.html_fragment == '<div id="test">hello world</div>'
 
 

tests/testclient/test_testable_form.py

@@ -0,0 +1,921 @@
+import pytest
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.test.testclient import TestableForm, MyTestClient
+
+
+@pytest.fixture
+def mock_client():
+  """Mock client for testing purposes."""
+  return None
+
+
+class TestableFormUpdateFieldMapping:
+  def test_i_can_map_label_with_explicit_for_attribute(self, mock_client):
+    """
+    Test that labels with explicit 'for' attribute are correctly mapped.
+  
+    This is the most reliable association method (priority 1).
+    """
+    html = '<form><label for="uid">Username</label><input id="uid" name="username" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"Username": "username"}
+  
+  def test_i_can_map_label_containing_input(self, mock_client):
+    """
+    Test that labels containing inputs are correctly mapped.
+  
+    This tests implicit association by nesting (priority 2).
+    """
+    html = '<form><label>Username<input name="username" /></label></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"Username": "username"}
+  
+  def test_i_can_map_label_and_input_as_siblings_with_for_id(self, mock_client):
+    """
+    Test that sibling labels and inputs with for/id are correctly mapped.
+  
+    This tests parent-level association with explicit for/id (priority 3).
+    """
+    html = '<form><div><label for="uid">Username</label><input id="uid" name="username" /></div></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"Username": "username"}
+  
+  def test_i_can_map_label_and_input_as_siblings_by_proximity(self, mock_client):
+    """
+    Test that sibling labels and inputs are mapped by proximity.
+  
+    This tests association by proximity without for/id (priority 4).
+    """
+    html = '<form><div><label>Username</label><input name="username" /></div></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"Username": "username"}
+  
+  def test_i_can_map_input_without_label_using_name(self, mock_client):
+    """
+    Test that inputs without labels use their name attribute as key.
+  
+    This tests the fallback mechanism (priority 5).
+    """
+    html = '<form><input name="csrf_token" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"csrf_token": "csrf_token"}
+  
+  def test_i_can_map_input_without_name_using_id(self, mock_client):
+    """
+    Test that inputs without name attribute fallback to id attribute.
+  
+    This ensures inputs without name can still be identified.
+    """
+    html = '<form><input id="submit_btn" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"submit_btn": "submit_btn"}
+  
+  def test_i_can_map_input_without_name_and_id_using_unnamed(self, mock_client):
+    """
+    Test that inputs without name or id get a generated unnamed key.
+  
+    This ensures all inputs are tracked even without identifiers.
+    """
+    html = '<form><input type="submit" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"unnamed_0": "unnamed_0"}
+  
+  def test_i_can_handle_multiple_unnamed_inputs(self, mock_client):
+    """
+    Test that multiple unnamed inputs get incrementing counters.
+  
+    This ensures each unnamed input has a unique identifier.
+    """
+    html = '<form><input type="submit" /><input type="button" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"unnamed_0": "unnamed_0", "unnamed_1": "unnamed_1"}
+  
+  def test_i_can_strip_whitespace_from_label_text(self, mock_client):
+    """
+    Test that whitespace and newlines are stripped from label text.
+  
+    This ensures clean, consistent label keys in the mapping.
+    """
+    html = '<form><label for="uid">  Username  \n</label><input id="uid" name="username" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"Username": "username"}
+  
+  def test_i_can_extract_text_from_complex_labels(self, mock_client):
+    """
+    Test that text from nested elements in labels is extracted.
+  
+    This ensures labels with spans, emphasis, etc. are handled correctly.
+    """
+    html = '<form><label for="uid">Username <span class="required">*</span></label><input id="uid" name="username" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"Username*": "username"}
+  
+  def test_i_can_handle_mixed_scenarios_in_same_form(self, mock_client):
+    """
+    Test that all association priorities work together in one form.
+  
+    This is a comprehensive test ensuring the priority system works correctly.
+    """
+    html = '''
+      <form>
+          <label for="email">Email</label>
+          <input id="email" name="email" />
+  
+          <label>Password<input name="password" /></label>
+  
+          <div>
+              <label for="phone">Phone</label>
+              <input id="phone" name="phone" />
+          </div>
+  
+          <div>
+              <label>Address</label>
+              <input name="address" />
+          </div>
+  
+          <input name="csrf_token" />
+          <input id="submit_btn" />
+          <input type="hidden" />
+      </form>
+      '''
+    form = TestableForm(mock_client, html)
+    
+    expected = {
+        "Email": "email",
+        "Password": "password",
+        "Phone": "phone",
+        "Address": "address",
+        "csrf_token": "csrf_token",
+        "submit_btn": "submit_btn",
+        "unnamed_0": "unnamed_0"
+    }
+    
+    assert form.fields_mapping == expected
+  
+  def test_i_can_handle_empty_form(self, mock_client):
+    """
+    Test that an empty form doesn't cause errors.
+  
+    This ensures robustness when dealing with minimal forms.
+    """
+    html = '<form></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {}
+  
+  def test_i_can_handle_form_with_only_labels(self, mock_client):
+    """
+    Test that labels without associated inputs don't cause errors.
+  
+    This ensures the code handles malformed or incomplete forms gracefully.
+    """
+    html = '<form><label>Test</label></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {}
+  
+  def test_i_can_handle_label_with_invalid_for_attribute(self, mock_client):
+    """
+    Test that labels with invalid 'for' attributes fallback correctly.
+  
+    This ensures the priority system cascades properly when higher
+    priorities fail to find a match.
+    """
+    html = '<form><div><label for="nonexistent">Test</label><input name="field" /></div></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields_mapping == {"Test": "field"}
+
+
+class TestableFormUpdateFieldValues:
+  def test_i_can_handle_checkbox_checked(self, mock_client):
+    """
+    Test that a checked checkbox is converted to True.
+
+    This ensures proper boolean handling for checked checkboxes.
+    """
+    html = '<form><input type="checkbox" name="agree" checked /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"agree": True}, \
+      f"Expected {{'agree': True}}, got {form.fields}"
+  
+  def test_i_can_handle_checkbox_unchecked(self, mock_client):
+    """
+    Test that an unchecked checkbox is converted to False.
+  
+    This ensures proper boolean handling for unchecked checkboxes.
+    """
+    html = '<form><input type="checkbox" name="agree" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"agree": False}, \
+      f"Expected {{'agree': False}}, got {form.fields}"
+  
+  def test_i_can_handle_radio_button_checked(self, mock_client):
+    """
+    Test that a checked radio button returns its value as string.
+  
+    This ensures radio buttons store their value attribute.
+    """
+    html = '<form><input type="radio" name="size" value="large" checked /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"size": "large"}, \
+      f"Expected {{'size': 'large'}}, got {form.fields}"
+  
+  def test_i_can_handle_multiple_radio_buttons_with_one_checked(self, mock_client):
+    """
+    Test that only the checked radio button value is returned.
+  
+    This ensures correct handling of radio button groups.
+    """
+    html = '''
+        <form>
+            <input type="radio" name="size" value="small" />
+            <input type="radio" name="size" value="medium" checked />
+            <input type="radio" name="size" value="large" />
+        </form>
+        '''
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"size": "medium"}, \
+      f"Expected {{'size': 'medium'}}, got {form.fields}"
+  
+  def test_i_can_handle_radio_buttons_with_none_checked(self, mock_client):
+    """
+    Test that no value is set when no radio button is checked.
+  
+    This ensures proper handling of unchecked radio button groups.
+    """
+    html = '''
+        <form>
+            <input type="radio" name="size" value="small" />
+            <input type="radio" name="size" value="medium" />
+            <input type="radio" name="size" value="large" />
+        </form>
+        '''
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"size": None}, f"Expected 'size' not in fields, got {form.fields}"
+  
+  def test_i_can_handle_number_input_with_integer(self, mock_client):
+    """
+    Test that a number input with integer value becomes int.
+  
+    This ensures proper type conversion for integer numbers.
+    """
+    html = '<form><input type="number" name="age" value="25" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"age": 25}, \
+      f"Expected {{'age': 25}}, got {form.fields}"
+    assert isinstance(form.fields["age"], int), \
+      f"Expected int type, got {type(form.fields['age'])}"
+  
+  def test_i_can_handle_number_input_with_float(self, mock_client):
+    """
+    Test that a number input with decimal value becomes float.
+  
+    This ensures proper type conversion for floating point numbers.
+    """
+    html = '<form><input type="number" name="price" value="19.99" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"price": 19.99}, \
+      f"Expected {{'price': 19.99}}, got {form.fields}"
+    assert isinstance(form.fields["price"], float), \
+      f"Expected float type, got {type(form.fields['price'])}"
+  
+  def test_i_can_handle_text_input_with_string_value(self, mock_client):
+    """
+    Test that a text input with string value remains str.
+  
+    This ensures text values are not converted unnecessarily.
+    """
+    html = '<form><input type="text" name="username" value="john_doe" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"username": "john_doe"}, \
+      f"Expected {{'username': 'john_doe'}}, got {form.fields}"
+    assert isinstance(form.fields["username"], str), \
+      f"Expected str type, got {type(form.fields['username'])}"
+  
+  def test_i_can_handle_text_input_with_integer_value(self, mock_client):
+    """
+    Test that a text input with numeric value is converted to int.
+  
+    This ensures automatic type detection for text inputs.
+    """
+    html = '<form><input type="text" name="code" value="123" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"code": 123}, \
+      f"Expected {{'code': 123}}, got {form.fields}"
+    assert isinstance(form.fields["code"], int), \
+      f"Expected int type, got {type(form.fields['code'])}"
+  
+  def test_i_can_handle_text_input_with_float_value(self, mock_client):
+    """
+    Test that a text input with decimal value is converted to float.
+  
+    This ensures automatic float detection for text inputs.
+    """
+    html = '<form><input type="text" name="rate" value="3.14" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"rate": 3.14}, \
+      f"Expected {{'rate': 3.14}}, got {form.fields}"
+    assert isinstance(form.fields["rate"], float), \
+      f"Expected float type, got {type(form.fields['rate'])}"
+  
+  def test_i_can_handle_text_input_with_boolean_true(self, mock_client):
+    """
+    Test that a text input with 'true' is converted to bool.
+  
+    This ensures boolean keyword detection for text inputs.
+    """
+    html = '<form><input type="text" name="flag" value="true" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"flag": True}, \
+      f"Expected {{'flag': True}}, got {form.fields}"
+    assert isinstance(form.fields["flag"], bool), \
+      f"Expected bool type, got {type(form.fields['flag'])}"
+  
+  def test_i_can_handle_text_input_with_boolean_false(self, mock_client):
+    """
+    Test that a text input with 'false' is converted to bool.
+  
+    This ensures boolean keyword detection for false values.
+    """
+    html = '<form><input type="text" name="flag" value="false" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"flag": False}, \
+      f"Expected {{'flag': False}}, got {form.fields}"
+    assert isinstance(form.fields["flag"], bool), \
+      f"Expected bool type, got {type(form.fields['flag'])}"
+  
+  def test_i_can_handle_hidden_input_with_auto_conversion(self, mock_client):
+    """
+    Test that hidden inputs benefit from automatic type conversion.
+  
+    This ensures hidden fields are processed like text fields.
+    """
+    html = '<form><input type="hidden" name="id" value="42" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"id": 42}, \
+      f"Expected {{'id': 42}}, got {form.fields}"
+    assert isinstance(form.fields["id"], int), \
+      f"Expected int type, got {type(form.fields['id'])}"
+  
+  def test_i_can_handle_empty_input_value(self, mock_client):
+    """
+    Test that an empty input value remains an empty string.
+  
+    This ensures empty values are not converted to None or other types.
+    """
+    html = '<form><input type="text" name="optional" value="" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"optional": ""}, \
+      f"Expected {{'optional': ''}}, got {form.fields}"
+    assert isinstance(form.fields["optional"], str), \
+      f"Expected str type, got {type(form.fields['optional'])}"
+  
+  def test_i_can_extract_select_options(self, mock_client):
+    """
+    Test that select options are correctly extracted.
+  
+    This ensures proper population of select_fields dictionary.
+    """
+    html = '''
+        <form>
+            <select name="country">
+                <option value="FR">France</option>
+                <option value="US">USA</option>
+            </select>
+        </form>
+        '''
+    form = TestableForm(mock_client, html)
+    
+    expected_options = [
+        {"value": "FR", "text": "France"},
+        {"value": "US", "text": "USA"}
+    ]
+    
+    assert form.select_fields == {"country": expected_options}, \
+      f"Expected {{'country': {expected_options}}}, got {form.select_fields}"
+  
+  def test_i_can_handle_select_with_selected_option(self, mock_client):
+    """
+    Test that the selected option is stored in fields.
+  
+    This ensures proper detection of selected options.
+    """
+    html = '''
+        <form>
+            <select name="country">
+                <option value="FR">France</option>
+                <option value="US" selected>USA</option>
+            </select>
+        </form>
+        '''
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"country": "US"}, \
+      f"Expected {{'country': 'US'}}, got {form.fields}"
+  
+  def test_i_can_handle_select_without_selected_option(self, mock_client):
+    """
+    Test that the first option is used by default.
+  
+    This ensures proper default value handling for select fields.
+    """
+    html = '''
+        <form>
+            <select name="country">
+                <option value="FR">France</option>
+                <option value="US">USA</option>
+            </select>
+        </form>
+        '''
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"country": "FR"}, \
+      f"Expected {{'country': 'FR'}}, got {form.fields}"
+  
+  def test_i_can_handle_select_option_without_value_attribute(self, mock_client):
+    """
+    Test that option text is used when value attribute is missing.
+  
+    This ensures fallback to text content for options without value.
+    """
+    html = '''
+        <form>
+            <select name="country">
+                <option>France</option>
+                <option>USA</option>
+            </select>
+        </form>
+        '''
+    form = TestableForm(mock_client, html)
+    
+    expected_options = [
+        {"value": "France", "text": "France"},
+        {"value": "USA", "text": "USA"}
+    ]
+    
+    assert form.select_fields == {"country": expected_options}, \
+      f"Expected {{'country': {expected_options}}}, got {form.select_fields}"
+  
+  def test_i_can_handle_mixed_input_types_in_same_form(self, mock_client):
+    """
+    Test that all input types work together correctly.
+  
+    This is a comprehensive test ensuring type handling is consistent.
+    """
+    html = '''
+        <form>
+            <input type="text" name="username" value="john" />
+            <input type="number" name="age" value="30" />
+            <input type="checkbox" name="subscribe" checked />
+            <input type="radio" name="gender" value="male" checked />
+            <input type="hidden" name="token" value="123" />
+            <select name="country">
+                <option value="FR" selected>France</option>
+                <option value="US">USA</option>
+            </select>
+        </form>
+        '''
+    form = TestableForm(mock_client, html)
+    
+    expected_fields = {
+        "username": "john",
+        "age": 30,
+        "subscribe": True,
+        "gender": "male",
+        "token": 123,
+        "country": "FR"
+    }
+    
+    assert form.fields == expected_fields, \
+      f"Expected {expected_fields}, got {form.fields}"
+    
+    assert "country" in form.select_fields, \
+      f"Expected 'country' in select_fields, got {form.select_fields}"
+  
+  def test_i_can_handle_input_without_name_attribute(self, mock_client):
+    """
+    Test that inputs without name attribute are ignored.
+  
+    This ensures proper handling of unnamed inputs.
+    """
+    html = '<form><input type="text" value="test" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {}, \
+      f"Expected empty dict, got {form.fields}"
+  
+  def test_i_can_handle_select_without_name_attribute(self, mock_client):
+    """
+    Test that select elements without name attribute are ignored.
+  
+    This ensures proper handling of unnamed select fields.
+    """
+    html = '<form><select><option>Test</option></select></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.select_fields == {}, \
+      f"Expected empty dict, got {form.select_fields}"
+    assert form.fields == {}, \
+      f"Expected empty dict, got {form.fields}"
+  
+  def test_i_can_handle_number_input_with_empty_value(self, mock_client):
+    """
+    Test that a number input with empty value remains empty string.
+  
+    This ensures empty values are not converted to 0 or None.
+    """
+    html = '<form><input type="number" name="count" value="" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"count": ""}, \
+      f"Expected {{'count': ''}}, got {form.fields}"
+  
+  def test_i_can_handle_select_with_empty_options(self, mock_client):
+    """
+    Test behavior with a select element without options.
+  
+    This ensures robustness when dealing with empty selects.
+    """
+    html = '<form><select name="empty"></select></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.select_fields == {"empty": []}, \
+      f"Expected {{'empty': []}}, got {form.select_fields}"
+    assert "empty" not in form.fields, \
+      f"Expected 'empty' not in fields, got {form.fields}"
+  
+  def test_i_can_handle_case_insensitive_boolean_values(self, mock_client):
+    """
+    Test that boolean values are case-insensitive.
+  
+    This ensures 'TRUE', 'True', 'FALSE', 'False' are all converted properly.
+    """
+    html = '<form><input type="text" name="flag" value="TRUE" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    assert form.fields == {"flag": True}, \
+      f"Expected {{'flag': True}}, got {form.fields}"
+    assert isinstance(form.fields["flag"], bool), \
+      f"Expected bool type, got {type(form.fields['flag'])}"
+
+
+class TestMyTestClientFill:
+  def test_i_can_fill_form_using_input_name(self, mock_client):
+    """
+    I can fill using the input name
+    """
+    html = '<form><label for="uid">Username</label><input id="uid" name="username" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    form.fill(username="john_doe")
+    
+    assert form.fields == {"username": "john_doe"}
+  
+  def test_i_can_fill_form_using_label(self, mock_client):
+    """
+    I can fill using the label associated with the input
+    """
+    html = '<form><label for="uid">Username</label><input id="uid" name="username" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    form.fill(Username="john_doe")
+    
+    assert form.fields == {"username": "john_doe"}
+  
+  def test_i_cannot_fill_form_with_invalid_field_name(self, mock_client):
+    """
+    I cannot fill form with invalid field name
+    """
+    html = '<form><label for="uid">Username</label><input id="uid" name="username" /></form>'
+    form = TestableForm(mock_client, html)
+    
+    with pytest.raises(ValueError) as excinfo:
+      form.fill(invalid_field="john_doe")
+    
+    assert str(excinfo.value) == "Invalid field name 'invalid_field'."
+
+
+class TestableFormSubmit:
+  """
+  Test suite for the submit() method of TestableForm class.
+  This module tests form submission for both HTMX and classic forms.
+  """
+  
+  def test_i_can_submit_classic_form_with_post_method(self):
+    """
+    Test that a classic form with POST method is submitted correctly.
+
+    This ensures the form uses the action and method attributes properly.
+    """
+    # HTML form with classic submission
+    html = '''
+        <form action="/submit" method="post">
+            <input type="text" name="username" value="john_doe" />
+            <input type="password" name="password" value="secret123" />
+        </form>
+        '''
+    
+    # Create the form
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    @rt('/submit')
+    def post(username: str, password: str):
+      return f"Form received {username=}, {password=}"
+    
+    form.submit()
+    assert client.get_content() == "Form received username='john_doe', password='secret123'"
+  
+  def test_i_can_submit_classic_form_with_get_method(self):
+    """
+    Test that a classic form with GET method is submitted correctly.
+
+    This ensures GET requests are properly handled.
+    """
+    html = '''
+        <form action="/search" method="get">
+            <input type="text" name="q" value="python" />
+            <input type="text" name="page" value="1" />
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    @rt('/search')
+    def get(q: str, page: int):
+      return f"Search results for {q=}, {page=}"
+    
+    form.submit()
+    assert client.get_content() == "Search results for q='python', page=1"
+  
+  def test_i_can_submit_classic_form_without_method_defaults_to_post(self):
+    """
+    Test that POST is used by default when method attribute is absent.
+
+    This ensures proper default behavior matching HTML standards.
+    """
+    html = '''
+        <form action="/submit">
+            <input type="text" name="data" value="test" />
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    @rt('/submit')
+    def post(data: str):
+      return f"Received {data=}"
+    
+    form.submit()
+    assert client.get_content() == "Received data='test'"
+  
+  def test_i_can_submit_form_with_htmx_post(self):
+    """
+    Test that a form with hx_post uses HTMX submission.
+
+    This ensures HTMX-enabled forms are handled correctly.
+    """
+    html = '''
+        <form hx-post="/htmx-submit">
+            <input type="text" name="username" value="alice" />
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    @rt('/htmx-submit')
+    def post(username: str):
+      return f"HTMX received {username=}"
+    
+    form.submit()
+    assert client.get_content() == "HTMX received username='alice'"
+  
+  def test_i_can_submit_form_with_htmx_get(self):
+    """
+    Test that a form with hx_get uses HTMX submission.
+
+    This ensures HTMX GET requests work properly.
+    """
+    html = '''
+        <form hx-get="/htmx-search">
+            <input type="text" name="query" value="fasthtml" />
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    @rt('/htmx-search')
+    def get(query: str):
+      return f"HTMX search for {query=}"
+    
+    form.submit()
+    assert client.get_content() == "HTMX search for query='fasthtml'"
+  
+  def test_i_can_submit_form_with_filled_fields(self):
+    """
+    Test that fields filled via fill_form() are submitted correctly.
+
+    This ensures dynamic form filling works as expected.
+    """
+    html = '''
+        <form action="/login" method="post">
+            <input type="text" name="username" value="" />
+            <input type="password" name="password" value="" />
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    # Fill the form dynamically
+    form.fill(username="bob", password="secure456")
+    
+    @rt('/login')
+    def post(username: str, password: str):
+      return f"Login {username=}, {password=}"
+    
+    form.submit()
+    assert client.get_content() == "Login username='bob', password='secure456'"
+  
+  def test_i_can_submit_form_with_mixed_field_types(self):
+    """
+    Test that all field types are submitted with correct values.
+
+    This ensures type conversion and submission work together.
+    """
+    html = '''
+        <form action="/register" method="post">
+            <input type="text" name="username" value="charlie" />
+            <input type="number" name="age" value="30" />
+            <input type="checkbox" name="newsletter" checked />
+            <select name="country">
+                <option value="US" selected>USA</option>
+                <option value="FR">France</option>
+            </select>
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    @rt('/register')
+    def post(username: str, age: int, newsletter: bool, country: str):
+      return f"Registration {username=}, {age=}, {newsletter=}, {country=}"
+    
+    result = form.submit()
+    
+    # Note: the types are converted in self.fields
+    expected = "Registration username='charlie', age=30, newsletter=True, country='US'"
+    assert client.get_content() == expected
+  
+  def test_i_cannot_submit_classic_form_without_action(self):
+    """
+    Test that an exception is raised when action attribute is missing.
+
+    This ensures proper error handling for malformed forms.
+    """
+    html = '''
+        <form method="post">
+            <input type="text" name="data" value="test" />
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    # Should raise ValueError
+    try:
+      form.submit()
+      assert False, "Expected ValueError to be raised"
+    except ValueError as e:
+      assert "no 'action' attribute" in str(e).lower()
+  
+  def test_i_cannot_submit_classic_form_with_empty_action(self):
+    """
+    Test that an exception is raised when action attribute is empty.
+
+    This ensures validation of the action attribute.
+    """
+    html = '''
+        <form action="" method="post">
+            <input type="text" name="data" value="test" />
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    # Should raise ValueError
+    try:
+      form.submit()
+      assert False, "Expected ValueError to be raised"
+    except ValueError as e:
+      assert "no 'action' attribute" in str(e).lower()
+  
+  def test_i_can_submit_form_with_case_insensitive_method(self):
+    """
+    Test that HTTP method is properly normalized to uppercase.
+
+    This ensures method attribute is case-insensitive.
+    """
+    html = '''
+        <form action="/submit" method="PoSt">
+            <input type="text" name="data" value="test" />
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    @rt('/submit')
+    def post(data: str):
+      return f"Received {data=}"
+    
+    form.submit()
+    assert client.get_content() == "Received data='test'"
+  
+  def test_i_can_prioritize_htmx_over_classic_submission(self):
+    """
+    Test that HTMX is prioritized even when action/method are present.
+
+    This ensures correct priority between HTMX and classic submission.
+    """
+    html = '''
+        <form action="/classic" method="post" hx-post="/htmx">
+            <input type="text" name="data" value="test" />
+        </form>
+        '''
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    @rt('/classic')
+    def post_classic(data: str):
+      return "Classic submission"
+    
+    @rt('/htmx')
+    def post_htmx(data: str):
+      return "HTMX submission"
+    
+    form.submit()
+    assert client.get_content() == "HTMX submission"
+  
+  def test_i_can_submit_empty_form(self):
+    """
+    Test that a form without fields can be submitted.
+
+    This ensures robustness for minimal forms.
+    """
+    html = '<form action="/empty" method="post"></form>'
+    
+    test_app, rt = fast_app(default_hdrs=False)
+    client = MyTestClient(test_app)
+    form = TestableForm(client, html)
+    
+    @rt('/empty')
+    def post():
+      return "Empty form received"
+    
+    form.submit()
+    assert client.get_content() == "Empty form received"

tests/testclient/test_testable_input.py

@@ -0,0 +1,58 @@
+import pytest
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.test.testclient import TestableInput, MyTestClient
+
+
+@pytest.fixture
+def test_app():
+  test_app, rt = fast_app(default_hdrs=False)
+  return test_app
+
+
+@pytest.fixture
+def rt(test_app):
+  return test_app.route
+
+
+@pytest.fixture
+def test_client(test_app):
+  return MyTestClient(test_app)
+
+
+def test_i_can_read_input(test_client):
+  html = '''<input type="text" name="username" value="john_doe" />'''
+  
+  input_elt = TestableInput(test_client, html)
+  
+  assert input_elt.name == "username"
+  assert input_elt.value == "john_doe"
+
+
+def test_i_can_read_input_with_label(test_client):
+  html = '''<label for="uid">Username</label><input id="uid" name="username" value="john_doe" />'''
+  
+  input_elt = TestableInput(test_client, html)
+  assert input_elt.fields_mapping == {"Username": "username"}
+  assert input_elt.name == "username"
+  assert input_elt.value == "john_doe"
+
+
+def test_i_can_send_values(test_client, rt):
+  html = '''<input type="text" name="username" value="john_doe" hx_post="/submit"/>'''
+  
+  @rt('/submit')
+  def post(username: str):
+    return f"Input received {username=}"
+  
+  input_elt = TestableInput(test_client, html)
+  input_elt.send("another name")
+  
+  assert test_client.get_content() == "Input received username='another name'"
+
+
+def i_can_find_input_by_name(test_client):
+  html = '''<label for="uid">Username</label><input id="uid" name="username" value="john_doe" />'''
+  
+  element = test_client.find_input("Username")
+  assert False

tests/testclient/test_testable_range.py

@@ -0,0 +1,72 @@
+from dataclasses import dataclass
+
+import pytest
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.test.testclient import MyTestClient, TestableRange
+
+
+@dataclass
+class Data:
+  value: str = "hello world"
+
+
+@pytest.fixture
+def test_app():
+  test_app, rt = fast_app(default_hdrs=False)
+  return test_app
+
+
+@pytest.fixture
+def rt(test_app):
+  return test_app.route
+
+
+@pytest.fixture
+def test_client(test_app):
+  return MyTestClient(test_app)
+
+
+def test_i_can_read_range(test_client):
+  html = '''<input type="range" name="range_name" min="0" max="100" step="10" value="50" />'''
+  
+  input_elt = TestableRange(test_client, html)
+  
+  assert input_elt.name == "range_name"
+  assert input_elt.value == 50
+  assert input_elt.min_value == 0
+  assert input_elt.max_value == 100
+  assert input_elt.step == 10
+
+
+@pytest.mark.parametrize("value, expected", [
+    (30, 30),
+    (24, 20),  # step 10
+    (-10, 0),  # min 0
+    (110, 100),  # max 100
+])
+def test_i_can_set_value(test_client, value, expected):
+  html = '''<input type="range" name="range_name" min="0" max="100" step="10" value="50" />'''
+  
+  input_elt = TestableRange(test_client, html)
+  
+  input_elt.set(value)
+  assert input_elt.value == expected
+
+
+def test_i_can_increase_value(test_client):
+  html = '''<input type="range" name="range_name" min="0" max="100" step="10" value="50" />'''
+  
+  input_elt = TestableRange(test_client, html)
+  
+  input_elt.increase()
+  assert input_elt.value == 60
+
+
+def test_i_can_decrease_value(test_client):
+  html = '''<input type="range" name="range_name" min="0" max="100" step="10" value="50" />'''
+  
+  input_elt = TestableRange(test_client, html)
+  
+  input_elt.decrease()
+  assert input_elt.value == 40

tests/testclient/test_testable_select.py

@@ -0,0 +1,63 @@
+import pytest
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.test.testclient import TestableSelect, MyTestClient
+
+
+@pytest.fixture
+def test_app():
+  test_app, rt = fast_app(default_hdrs=False)
+  return test_app
+
+
+@pytest.fixture
+def rt(test_app):
+  return test_app.route
+
+
+@pytest.fixture
+def test_client(test_app):
+  return MyTestClient(test_app)
+
+
+def test_i_can_read_select(test_client):
+  html = '''<select name="select_name">
+  <option value="option1">Option 1</option>
+  <option value="option2">Option 2</option>
+  <option value="option3">Option 3</option>
+  </select>
+  '''
+  select_elt = TestableSelect(test_client, html)
+  assert select_elt.name == "select_name"
+  assert select_elt.value == "option1"  # if no selected found, the first option is selected by default
+  assert select_elt.options == [{'text': 'Option 1', 'value': 'option1'},
+                                {'text': 'Option 2', 'value': 'option2'},
+                                {'text': 'Option 3', 'value': 'option3'}]
+  assert select_elt.select_fields == {'select_name': [{'text': 'Option 1', 'value': 'option1'},
+                                                      {'text': 'Option 2', 'value': 'option2'},
+                                                      {'text': 'Option 3', 'value': 'option3'}]}
+  assert select_elt.is_multiple is False
+
+
+def test_i_can_select_option(test_client):
+  html = '''<select name="select_name">
+  <option value="option1">Option 1</option>
+  <option value="option2">Option 2</option>
+  <option value="option3">Option 3</option>
+  </select>
+  '''
+  select_elt = TestableSelect(test_client, html)
+  select_elt.select("option2")
+  assert select_elt.value == "option2"
+
+
+def test_i_can_select_by_text(test_client):
+  html = '''<select name="select_name">
+  <option value="option1">Option 1</option>
+  <option value="option2">Option 2</option>
+  <option value="option3">Option 3</option>
+  </select>
+  '''
+  select_elt = TestableSelect(test_client, html)
+  select_elt.select_by_text("Option 3")
+  assert select_elt.value == "option3"

tests/testclient/test_testable_select_multiple.py

@@ -0,0 +1,107 @@
+import pytest
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.test.testclient import TestableSelect, MyTestClient
+
+
+@pytest.fixture
+def test_app():
+  test_app, rt = fast_app(default_hdrs=False)
+  return test_app
+
+
+@pytest.fixture
+def rt(test_app):
+  return test_app.route
+
+
+@pytest.fixture
+def test_client(test_app):
+  return MyTestClient(test_app)
+
+
+def test_i_can_read_select(test_client):
+  html = '''<select name="select_name" multiple>
+  <option value="option1">Option 1</option>
+  <option value="option2">Option 2</option>
+  <option value="option3">Option 3</option>
+  </select>
+  '''
+  select_elt = TestableSelect(test_client, html)
+  assert select_elt.name == "select_name"
+  assert select_elt.value == []
+  assert select_elt.options == [{'text': 'Option 1', 'value': 'option1'},
+                                {'text': 'Option 2', 'value': 'option2'},
+                                {'text': 'Option 3', 'value': 'option3'}]
+  assert select_elt.select_fields == {'select_name': [{'text': 'Option 1', 'value': 'option1'},
+                                                      {'text': 'Option 2', 'value': 'option2'},
+                                                      {'text': 'Option 3', 'value': 'option3'}]}
+  assert select_elt.is_multiple is True
+
+
+def test_i_can_read_select_with_multiple_selected_values(test_client):
+  html = '''<select name="select_name" multiple>
+  <option value="option1" selected>Option 1</option>
+  <option value="option2">Option 2</option>
+  <option value="option3" selected>Option 3</option>
+  </select>
+  '''
+  select_elt = TestableSelect(test_client, html)
+  assert select_elt.name == "select_name"
+  assert select_elt.value == ["option1", "option3"]
+  assert select_elt.is_multiple is True
+
+
+def test_i_can_select_option(test_client):
+  html = '''<select name="select_name" multiple>
+  <option value="option1">Option 1</option>
+  <option value="option2">Option 2</option>
+  <option value="option3">Option 3</option>
+  </select>
+  '''
+  select_elt = TestableSelect(test_client, html)
+  select_elt.select("option2")
+  assert select_elt.value == "option2"
+
+
+def test_i_can_select_multiple_options(test_client):
+  html = '''<select name="select_name" multiple>
+  <option value="option1">Option 1</option>
+  <option value="option2">Option 2</option>
+  <option value="option3">Option 3</option>
+  </select>
+  '''
+  select_elt = TestableSelect(test_client, html)
+  select_elt.select("option2")
+  select_elt.select("option3")
+  assert select_elt.value == ["option2", "option3"]
+
+
+def test_i_can_select_by_text(test_client):
+  html = '''<select name="select_name" multiple>
+  <option value="option1">Option 1</option>
+  <option value="option2">Option 2</option>
+  <option value="option3">Option 3</option>
+  </select>
+  '''
+  select_elt = TestableSelect(test_client, html)
+  select_elt.select_by_text("Option 3")
+  assert select_elt.value == "option3"
+
+
+def test_i_can_deselect(test_client):
+  html = '''<select name="select_name" multiple>
+  <option value="option1" selected>Option 1</option>
+  <option value="option2" selected>Option 2</option>
+  <option value="option3" selected>Option 3</option>
+  </select>
+  '''
+  select_elt = TestableSelect(test_client, html)
+  select_elt.deselect("option3")
+  assert select_elt.value == ["option1", "option2"]
+  
+  select_elt.deselect("option2")
+  assert select_elt.value == "option1"
+  
+  select_elt.deselect("option1")
+  assert select_elt.value == []

tests/testclient/test_testable_textarea.py

@@ -0,0 +1,36 @@
+from dataclasses import dataclass
+
+import pytest
+from fasthtml.fastapp import fast_app
+
+from myfasthtml.test.testclient import MyTestClient, TestableTextarea
+
+
+@dataclass
+class Data:
+  value: str = "hello world"
+
+
+@pytest.fixture
+def test_app():
+  test_app, rt = fast_app(default_hdrs=False)
+  return test_app
+
+
+@pytest.fixture
+def rt(test_app):
+  return test_app.route
+
+
+@pytest.fixture
+def test_client(test_app):
+  return MyTestClient(test_app)
+
+
+def test_i_can_read_input(test_client):
+  html = '''<textarea name="textarea_name">Lorem ipsum</textarea>'''
+  
+  input_elt = TestableTextarea(test_client, html)
+  
+  assert input_elt.name == "textarea_name"
+  assert input_elt.value == "Lorem ipsum"