diff --git a/docs/README.md b/docs.md
similarity index 100%
rename from docs/README.md
rename to docs.md
diff --git a/docs/examples/events/custom01.py b/docs/examples/events/custom01.py
new file mode 100644
index 000000000..30605af3d
--- /dev/null
+++ b/docs/examples/events/custom01.py
@@ -0,0 +1,48 @@
+from textual.app import App, ComposeResult
+from textual.color import Color
+from textual.message import Message, MessageTarget
+from textual.widgets import Static
+
+
+class ColorButton(Static):
+ """A color button."""
+
+ class Selected(Message):
+ """Color selected message."""
+
+ def __init__(self, sender: MessageTarget, color: Color) -> None:
+ self.color = color
+ super().__init__(sender)
+
+ def __init__(self, color: Color) -> None:
+ self.color = color
+ super().__init__()
+
+ def on_mount(self) -> None:
+ self.styles.margin = (1, 2)
+ self.styles.content_align = ("center", "middle")
+ self.styles.background = Color.parse("#ffffff33")
+ self.styles.border = ("tall", self.color)
+
+ async def on_click(self) -> None:
+ # The emit method sends an event to a widget's parent
+ await self.emit(self.Selected(self, self.color))
+
+ def render(self) -> str:
+ return str(self.color)
+
+
+class ColorApp(App):
+ def compose(self) -> ComposeResult:
+ yield ColorButton(Color.parse("#008080"))
+ yield ColorButton(Color.parse("#808000"))
+ yield ColorButton(Color.parse("#E9967A"))
+ yield ColorButton(Color.parse("#121212"))
+
+ def on_color_button_selected(self, message: ColorButton.Selected) -> None:
+ self.screen.styles.animate("background", message.color, duration=0.5)
+
+
+app = ColorApp()
+if __name__ == "__main__":
+ app.run()
diff --git a/docs/examples/events/dictionary.css b/docs/examples/events/dictionary.css
new file mode 100644
index 000000000..f0e46faa7
--- /dev/null
+++ b/docs/examples/events/dictionary.css
@@ -0,0 +1,29 @@
+Screen {
+ background: $panel;
+}
+
+TextInput {
+ dock: top;
+ border: tall $background;
+ width: 100%;
+ height: 1;
+ padding: 0 1;
+ margin: 1 1 0 1;
+ background: $boost;
+}
+
+TextInput:focus {
+ border: tall $accent;
+}
+
+#results {
+ width: auto;
+ min-height: 100%;
+}
+
+#results-container {
+ background: $background 50%;
+ overflow: auto;
+ margin: 1 2;
+ height: 100%;
+}
diff --git a/docs/examples/events/dictionary.py b/docs/examples/events/dictionary.py
new file mode 100644
index 000000000..7a6e74deb
--- /dev/null
+++ b/docs/examples/events/dictionary.py
@@ -0,0 +1,43 @@
+import asyncio
+
+try:
+ import httpx
+except ImportError:
+ raise ImportError("Please install httpx with 'pip install httpx' ")
+
+from rich.json import JSON
+
+from textual.app import App, ComposeResult
+from textual.layout import Vertical
+from textual.widgets import Static, TextInput
+
+
+class DictionaryApp(App):
+ """Searches ab dictionary API as-you-type."""
+
+ def compose(self) -> ComposeResult:
+ yield TextInput(placeholder="Search for a word")
+ yield Vertical(Static(id="results", fluid=False), id="results-container")
+
+ async def on_text_input_changed(self, message: TextInput.Changed) -> None:
+ """A coroutine to handle a text changed message."""
+ if message.value:
+ # Look up the word in the background
+ asyncio.create_task(self.lookup_word(message.value))
+ else:
+ # Clear the results
+ self.query_one("#results", Static).update()
+
+ async def lookup_word(self, word: str) -> None:
+ """Looks up a word."""
+ url = f"https://api.dictionaryapi.dev/api/v2/entries/en/{word}"
+ async with httpx.AsyncClient() as client:
+ results = (await client.get(url)).text
+
+ if word == self.query_one(TextInput).value:
+ self.query_one("#results", Static).update(JSON(results))
+
+
+app = DictionaryApp(css_path="dictionary.css")
+if __name__ == "__main__":
+ app.run()
diff --git a/docs/examples/light_dark.py b/docs/examples/light_dark.py
deleted file mode 100644
index be4351258..000000000
--- a/docs/examples/light_dark.py
+++ /dev/null
@@ -1,19 +0,0 @@
-from textual.app import App
-from textual.widgets import Button
-
-
-class ButtonApp(App):
-
- DEFAULT_CSS = """
- Button {
- width: 100%;
- }
- """
-
- def compose(self):
- yield Button("Lights off")
-
- def on_button_pressed(self, event):
- self.dark = not self.dark
- self.bell()
- event.button.label = "Lights ON" if self.dark else "Lights OFF"
diff --git a/docs/getting_started.md b/docs/getting_started.md
index 0962c18c2..c2a4f3dab 100644
--- a/docs/getting_started.md
+++ b/docs/getting_started.md
@@ -2,7 +2,7 @@ All you need to get started building Textual apps.
## Requirements
-Textual requires Python 3.7 or later. Textual runs on Linux, MacOS, Windows and probably any OS where Python also runs.
+Textual requires Python 3.7 or later (if you have a choice, pick the most recent Python). Textual runs on Linux, MacOS, Windows and probably any OS where Python also runs.
!!! info inline end "Your platform"
diff --git a/docs/guide/events.md b/docs/guide/events.md
index 1eea90333..2ad1b7eff 100644
--- a/docs/guide/events.md
+++ b/docs/guide/events.md
@@ -1,13 +1,189 @@
-## Events
+# Events and Messages
-TODO: events docs
+We've used event handler methods in many of the examples in this guide. This chapter explores [events](../events/index.md) and messages (see below) in more detail.
-- What are events
-- Handling events
-- Auto calling base classes
-- Event bubbling
-- Posting / emitting events
+## Messages
+
+Events are a particular kind of *message* sent by Textual in response to input and other state changes. Events are reserved for use by Textual but you can also create custom messages for the purpose of coordinating between widgets in your app.
+
+More on that later, but for now keep in mind that events are also messages, and anything that is true of messages is true of events.
+
+## Message Queue
+
+Every [App][textual.app.App] and [Widget][textual.widget.Widget] object contains a *message queue*. You can think of a message queue as orders at a restaurant. The chef takes an order and makes the dish. Orders that arrive while the chef is cooking are placed in a line. When the chef has finished a dish they pick up the next order in the line.
+
+Textual processes messages in the same way. Messages are picked off a queue and processed (cooked) by a handler method. This guarantees messages and events are processed even if your code can not handle them right way.
+
+This processing of messages is done within an asyncio Task which is started when you mount the widget. The task monitors a queue for new messages and dispatches them to the appropriate handler when they arrive.
+
+!!! tip
+
+ The FastAPI docs have an [excellent introduction](https://fastapi.tiangolo.com/async/) to Python async programming.
+
+By way of an example, let's consider what happens if you were to type "Text" in to a `TextInput` widget. When you hit the ++t++ key, Textual creates a [key][textual.events.Key] event and sends it to the widget's message queue. Ditto for ++e++, ++x++, and ++t++.
+
+The widget's task will pick the first message from the queue (a key event for the ++t++ key) and call the `on_key` method with the event as the first argument. In other words it will call `TextInput.on_key(event)`, which updates the display to show the new letter.
---8<-- "docs/images/test.excalidraw.svg"
+--8<-- "docs/images/events/queue.excalidraw.svg"
+
+When the `on_key` method returns, Textual will get the next event from the the queue and repeat the process for the remaining keys. At some point the queue will be empty and the widget is said to be in an *idle* state.
+
+!!! note
+
+ This example illustrates a point, but a typical app will be fast enough to have processed a key before the next event arrives. So it is unlikely you will have so many key events in the message queue.
+
+
+--8<-- "docs/images/events/queue2.excalidraw.svg"
+
+
+
+## Default behaviors
+
+You may be familiar with Python's [super](https://docs.python.org/3/library/functions.html#super) function to call a function defined in a base class. You will not have to use this in event handlers as Textual will automatically call handler methods defined in a widget's base class(es).
+
+For instance, let's say we are building the classic game of Pong and we have written a `Paddle` widget which extends [Static][textual.widgets.Static]. When a [Key][textual.events.Key] event arrives, Textual calls `Paddle.on_key` (to respond to ++left++ and ++right++ keys), then `Static.on_key`, and finally `Widget.on_key`.
+
+### Preventing default behaviors
+
+If you don't want this behavior you can call [prevent_default()][textual.message.Message.prevent_default] on the event object. This tells Textual not to call any more handlers on base classes.
+
+!!! warning
+
+ You won't need `prevent_default` very often. Be sure to know what your base classes do before calling it, or you risk disabling some core features builtin to Textual.
+
+## Bubbling
+
+Messages have a `bubble` attribute. If this is set to `True` then events will be sent to a widget's parent after processing. Input events typically bubble so that a widget will have the opportunity to respond to input events if they aren't handled by their children.
+
+The following diagram shows an (abbreviated) DOM for a UI with a container and two buttons. With the "No" button [focused](#), it will receive the key event first.
+
+
+--8<-- "docs/images/events/bubble1.excalidraw.svg"
+
+
+After Textual calls `Button.on_key` the event _bubbles_ to the button's parent and will call `Container.on_key` (if it exists).
+
+
+--8<-- "docs/images/events/bubble2.excalidraw.svg"
+
+
+As before, the event bubbles to it's parent (the App class).
+
+
+--8<-- "docs/images/events/bubble3.excalidraw.svg"
+
+
+The App class is always the root of the DOM, so there is no where for the event to bubble to.
+
+### Stopping bubbling
+
+Event handlers may stop this bubble behavior by calling the [stop()][textual.message.Message.stop] method on the event or message. You might want to do this if a widget has responded to the event in an authoritative way. For instance when a text input widget responds to a key event it stops the bubbling so that the key doesn't also invoke a key binding.
+
+## Custom messages
+
+You can create custom messages for your application that may be used in the same way as events (recall that events are simply messages reserved for use by Textual).
+
+The most common reason to do this is if you are building a custom widget and you need to inform a parent widget about a state change.
+
+Let's look at an example which defines a custom message. The following example creates color buttons which—when clicked—send a custom message.
+
+=== "custom01.py"
+
+ ```python title="custom01.py" hl_lines="10-15 27-29 42-43"
+ --8<-- "docs/examples/events/custom01.py"
+ ```
+=== "Output"
+
+ ```{.textual path="docs/examples/events/custom01.py"}
+ ```
+
+
+Note the custom message class which extends [Message][textual.message.Message]. The constructor stores a [color][textual.color.Color] object which handler methods will be able to inspect.
+
+The message class is defined within the widget class itself. This is not strictly required but recommended, for these reasons:
+
+- It reduces the amount of imports. If you import `ColorButton`, you have access to the message class via `ColorButton.Selected`.
+- It creates a namespace for the handler. So rather than `on_selected`, the handler name becomes `on_color_button_selected`. This makes it less likely that your chosen name will clash with another message.
+
+
+## Sending events
+
+In the previous example we used [emit()][textual.message_pump.MessagePump.emit] to send an event to it's parent. We could also have used [emit_no_wait()][textual.message_pump.MessagePump.emit_no_wait] for non async code. Sending messages in this way allows you to write custom widgets without needing to know in what context they will be used.
+
+There are other ways of sending (posting) messages, which you may need to use less frequently.
+
+- [post_message][textual.message_pump.MessagePump.post_message] To post a message to a particular widget.
+- [post_message_no_wait][textual.message_pump.MessagePump.post_message_no_wait] The non-async version of `post_message`.
+
+
+## Message handlers
+
+Most of the logic in a Textual app will be written in message handlers. Let's explore handlers in more detail.
+
+### Handler naming
+
+Textual uses the following scheme to map messages classes on to a Python method.
+
+- Start with `"on_"`.
+- Add the messages namespace (if any) converted from CamelCase to snake_case plus an underscore `"_"`
+- Add the name of the class converted from CamelCase to snake_case.
+
+
+--8<-- "docs/images/events/naming.excalidraw.svg"
+
+
+### Handler arguments
+
+Message handler methods can be written with or without a positional argument. If you add a positional argument, Textual will call the handler with the event object. The following handler (taken from custom01.py above) contains a `message` parameter. The body of the code makes use of the message to set a preset color.
+
+```python
+ def on_color_button_selected(self, message: ColorButton.Selected) -> None:
+ self.screen.styles.animate("background", message.color, duration=0.5)
+```
+
+If the body of your handler doesn't require any information in the message you can omit it from the method signature. If we just want to play a bell noise when the button is clicked, we could write our handler like this:
+
+```python
+ def on_color_button_selected(self) -> None:
+ self.app.bell()
+```
+
+This pattern is a convenience that saves writing out a parameter that may not be used.
+
+### Async handlers
+
+Message handlers may be coroutines. If you prefix your handlers with the `async` keyword, Textual will `await` them. This lets your handler use the `await` keyword for asynchronous APIs.
+
+If your event handlers are coroutines it will allow multiple events to be processed concurrently, but bear in mind an individual widget (or app) will not be able to pick up a new message from its message queue until the handler has returned. This is rarely a problem in practice; as long has handlers return within a few milliseconds the UI will remain responsive. But slow handlers might make your app hard to use.
+
+!!! info
+
+ To re-use the chef analogy, if an order comes in for beef wellington (which takes a while to cook), orders may start to pile up and customers may have to wait for their meal. The solution would be to have another chef work on the wellington while the first chef picks up new orders.
+
+Network access is a common cause of slow handlers. If you try to retrieve a file from the internet, the message handler may take anything up to a few seconds to return, which would prevent the widget or app from updating during that time. The solution is to launch a new asyncio task to do the network task in the background.
+
+Let's look at an example which looks up word definitions from an [api](https://dictionaryapi.dev/) as you type.
+
+!!! note
+
+ You will need to install [httpx](https://www.python-httpx.org/) with `pip install httpx` to run this example.
+
+=== "dictionary.py"
+
+ ```python title="dictionary.py" hl_lines="26"
+ --8<-- "docs/examples/events/dictionary.py"
+ ```
+=== "dictionary.css"
+
+ ```python title="dictionary.css"
+ --8<-- "docs/examples/events/dictionary.css"
+ ```
+
+=== "Output"
+
+ ```{.textual path="docs/examples/events/dictionary.py" press="tab,t,e,x,t,_,_,_,_,_,_,_,_,_,_,_"}
+ ```
+
+Note the highlighted line in the above code which calls `asyncio.create_task` to run coroutine in the background. Without this you would find typing in to the text box to be unresponsive.
diff --git a/docs/guide/styles.md b/docs/guide/styles.md
index ecf337bbe..f2b12e39a 100644
--- a/docs/guide/styles.md
+++ b/docs/guide/styles.md
@@ -206,7 +206,7 @@ The same units may also be used to set limits on a dimension. The following styl
- [min-width](../styles/min_width.md) sets a minimum width.
- [max-width](../styles/max_width.md) sets a maximum width.
- [min-height](../styles/min_height.md) sets a minimum height.
-- [max-height](../styles/max_hright.md) sets a maximum height.
+- [max-height](../styles/max_height.md) sets a maximum height.
### Padding
diff --git a/docs/images/events/bubble1.excalidraw.svg b/docs/images/events/bubble1.excalidraw.svg
new file mode 100644
index 000000000..f4b79d101
--- /dev/null
+++ b/docs/images/events/bubble1.excalidraw.svg
@@ -0,0 +1,16 @@
+
+
+ eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1bbVPa2lx1MDAxNv7ur3C4X3pnarrfX85M54yioFSxVk+tPZ5xYlx1MDAxMiElJDRcdCDt9L/fXHUwMDE1UFx1MDAxMt5cdTAwMDIqcHBu80Eh2eysvfZ6nv2slZ2fW9vbhbjXclxuf2xcdTAwMTece8v0XFw7NLuFt8n5jlx1MDAxM0Zu4MMl0v9cdTAwMWVcdTAwMDXt0Oq3rMdxK/rj3bumXHUwMDE5Npy45ZmWY3TcqG16Udy23cCwguY7N3aa0Z/J36rZdN63gqZcdTAwMWSHRnqTXHUwMDFkx3bjIFx1MDAxY9zL8Zym48dcdTAwMTH0/jd8397+2f+bsc52zWbg2/3m/Vx1MDAwYql5nODxs9XA75uKOUKcMCT1sIVcdTAwMWLtw91ix4bLd2Cxk15JTlx1MDAxNXrRt6vuXHUwMDE34pu8yI/l/snt58reSXrbO9fzzuOeN3CEadXboZNejeIwaDiXrlx1MDAxZNeTu4+dXHUwMDFm/i5cbsBcdTAwMDfpr8KgXav7Tlx1MDAxNI38JmiZllx1MDAxYveSc1xiXHLPmn6t30d65j6ZIcVcciQ0JZprLDVVw6vJ77UhMeJcdTAwMTQrjSTmmo3bVVxmPJhcYrDrP6h/pJbdmlajXHUwMDA25vl22kZcdTAwMTFL48yYu4+jVdRgjFx1MDAxMlwiwVxmqlx1MDAxMeHDJnXHrdXjpFxyIYZCTCjJXHUwMDA3t8qY4vSnhGtFqVx1MDAxNul8JbdvXHUwMDFk2f3Q+GfcoXUzbD04rlx1MDAxMCVfMqYnVlx1MDAxZozHVTa2MpNOxFWl7Fx1MDAxZlQ+fyzvX1rfj3ul8/tw2NdIIMbOfVxcXHUwMDE4Xvj19ne3M7tcdTAwMWRp/XbRXHUwMDFiLmituL+6b1x1MDAxZvPDkPpnJdwrnXlfet3p1pphXHUwMDE4dDP9PnxKo6ndss1cdTAwMDEjYCEoSyiDS8SG1z3Xb8BFv+156bnAaqQkspUxeIK7RsafIS5G0fjZR+JcIohSXHUwMDA0WOApiOZcdTAwMTFX/vRtKnFplENcXFx1MDAwMlx1MDAxOVx1MDAwMlx1MDAxMyBcdTAwMGLBXHUwMDA2zPVcdTAwMTLiikPTj1pmXGJ8MIW85HzyXCJcdTAwMTNkRVx1MDAxMJFMJ3S2fLrKj05O5Vx1MDAxM6IzXHKCwI/P3Vx1MDAxZv2lUVx1MDAxOFx1MDAxYyuGiIBBaI24XHUwMDFjaVUym67XXHUwMDFimdd+XHUwMDE4g+W7rdab/2ZdXHUwMDFkOWDCYLlcdTAwMWRpvOu5tSTOXHUwMDBiXHUwMDE2XGbKXHRHIFx1MDAxMLsgXHUwMDA0hlxymq5te5lwtMBcdTAwMDJcdTAwMTP6XGaPXHUwMDE2WZOD0K25vuldjFx1MDAxOJhcdTAwMGLJXHUwMDAxJUzBpFwiszGJwfGYscyiNVx1MDAwZpP5JLWhmKRSXHUwMDFhhDIsZKJcdTAwMTVENjL6XHUwMDFkMGJwwCsgUilBJScrQyU1XHUwMDE0cCSTQlxugShXelxuKqk2XHUwMDE0xVopLjSGcJ5cdTAwMDAp5lxcwigofjpG+6Y+XHUwMDFio09bQTJ2mGG85/q269fgYrr0ParkRTDRR7HVTqzcXHUwMDAxhlx1MDAwNYBzjlxiU8BcdTAwMWNEZFx1MDAxYdXMVlx1MDAxMvRcdTAwMDZcdTAwMTeKSFx1MDAwNbHNlCZYPDRcdTAwMTiuwFx1MDAwNce355tUvPlcdTAwMDbS8NI8s8t2T/rt3a87++VZJjGsMdZIYyqJXHUwMDEyRLFcdKswg+mHmcNEXHUwMDEzglx1MDAwNPydMMszo7hcdTAwMTg0m25cZs7/XHUwMDE4uH487uS+N3dcdTAwMTO011x1MDAxZNNcdTAwMWW/XG7Dyl5cdTAwMWKnhVbS46h4TD9tp7Dpf1x1MDAxOX7+5+3U1juzozk5JuI47W8r+39cdTAwMTajhY5cdTAwMTVcdTAwMGbwPIXVXGK4eFx1MDAxNq1cdTAwMDGSXHRcdTAwMDaxsbjSyJ/nXHJlNaKUQSVcdTAwMTJIJ1x1MDAwYp5iZIzVNJBcdTAwMWWiSFx1MDAwM2q1TtbF1WlccpHOxZDGVKp8XHUwMDFleFx1MDAwYphVipHVZi2pkGp8iM5kpV5FOLBkLL+dWl9PXp5cXHjNXHUwMDFmn2/+wlx1MDAxZr2DYlxye3Xkur1ytJhcXM/t97LyudM9ZvsnxyG3yz3SJmxfLKFfcmlcdTAwMWZcdTAwMWSWXHUwMDFh1onaZfii6Z1cdTAwMWX4X2tL6HdF7n1d3TbE5VGn1PqEb9pRvdHhJXRXtf/vnPuCXGZ2vebOy+On33BBa0vlxoUon3+7u6yfdSp+3Tv+XHUwMDE27CzBXHUwMDBi91fki/zavjmpoHL5XHUwMDE2k2bN6Z0tqT7AJFx1MDAxMZCOrro+QIhW46dcdTAwMWZXbYq51ELRxXOR/LDY1FVb07xVXHUwMDFiUjJDrmnV5lNW7Uxq9LBqKyk4XHUwMDE4K+g6K1x1MDAwMkxohTR6QjxOr1xiLFpcdTAwMDEoPqbnb6795IJrv79OKvReULsuXFz704tcdTAwMDOZPHGkOOA5d6PR/6TSwFx1MDAxYy06Xlx1MDAxYZhr+fM1NkWKzkIrRlxcI0GzYTFcdTAwMGaunVx1MDAxYoJlLf7c2bPo0W3ZP2qflXv/Llxc+Ty0YkFcZqIxpDmSUsGoXHUwMDFhRSucMrhmSlx1MDAwMVx1MDAxMFx1MDAwNWFMrlx1MDAwZaxcdTAwMTkwpFx1MDAxMluMg5VgjDBkY5lq31o09sVheFOMnfaN3K1Wrq7qny5+XHUwMDFjfvitsZelsVfk3tfV7ao09uvywqo09uvygqf3iuq2XFxkRSGc84tcdTAwMGb3tVJpg72w/JRgXlx1MDAwNjN9IGm3XHUwMDBmn3JcdTAwMTSYwpqwpyiwXFyhMSsjoCSjcMc1XHUwMDA2wVRRgejiXHUwMDFhI3/+NlVjyHyNodelMdRcdTAwMTSNISc0htKYScroXG52NMxcdTAwMGJH/IRwfFlCsNeO48B/k5xcdTAwMWLo6uvClVx1MDAxM11cdTAwMTfeXHUwMDBlvnXM0DX9XHUwMDE4pHbUtixcdTAwMTjd7CxBjna+pCxhjphcdTAwMWXPXHUwMDEynjecXFxE56dcdTAwMGV49lNHjFx1MDAwNYQ8hPvimf7ljYjrxdZt1W+ffqrY9ztcdTAwMDeXZ/VNz/SpVlx1MDAwNoaoXHUwMDE1QkHSz4SczFx1MDAxZJCAbjjTjJOV7lx1MDAwNVgsecCISkQ5ZWtOXHUwMDFl0MfK4Un7qnL48axcdTAwMTL39lx1MDAwZXo8OPF/J1x1MDAwZstKXHUwMDFlVuTe19XtqpKH1+WFVSVcdTAwMGavy1x1MDAwYqtKXHUwMDFlXpdcdTAwMTde8DjhmTnJ9IGk3T58yntKwUEkp09cdTAwMTBWlpPgmTlcdFGCXHUwMDEzQcjie1x1MDAwYvKnb0O1XHUwMDBiQzRfu+i1aZdcdTAwMDWTXHUwMDEypSmiXHUwMDAyr0C6LDNcdTAwMWWXnpRUgylcIt5cdTAwMDG8huvOSOZo9Fx1MDAwNTKSeWPJXHUwMDA188z9j1jJmc9cdTAwMWMx0kJLxjPhPVx1MDAwZs75tLmhcKaKXHUwMDE5QiCtklx1MDAwMoLi2YpK/6Gjklx1MDAwNlx1MDAxNZJizYHeOFErrDFgXGaWXGJGXHUwMDE4p5RQwtkkulx1MDAwNTe45lopRGjyglx1MDAwN1x1MDAxZFx1MDAwNztnyXNi8ZyNRM/fXHUwMDAw+Vx1MDAwMrAvuFx1MDAwMXLh3YbIYJgqrFx1MDAwNeVIJvOVaTPYaUhcZlxmPoZlilxuLlx1MDAxNOTakztcclx1MDAxN9pcdTAwMDCZXHUwMDBm6lx1MDAxMZO4XHUwMDEwyVx1MDAwZUBcdTAwMDSrXHUwMDA1pJFcbk/YXHUwMDA0M4+0XHUwMDA0vIE9SMBcZuNcdJte0+7H2ZGcXHUwMDFjXHUwMDEzMZx2t5X9/1xmOpstTmBcdTAwMDKoktn8fVx1MDAxZZvlXHUwMDE3pjeVzSQxINDAXHUwMDEzXGYpxHXqj1x1MDAwMZkpQzCMOaeKXHUwMDBi/qJXw+ZQXHUwMDE5NVx1MDAxOMijxFx1MDAwNM4kKKUpVEZcZlx1MDAwMcJcdTAwMDR0iVJcdTAwMTIxltnv/Vh0oUpcYs1AvKyXzJgmXHUwMDE5sfQvktlcdTAwMGVQXHUwMDA3lVx1MDAwMCTMQEpKJsgkdYCjKbhZUVxuLCM0aM7n0Vl+1XTMqMQmXHUwMDA07UEkSEz0hFEw/UQgcCeiXHUwMDE45CdWr5rOdmaHc3JMXHUwMDA28lx1MDAxM1x0LbdcXCwzr7OOcVx1MDAxYeeYwaLCXHUwMDE3L1x1MDAxNvNcdTAwMWatfetL7XDvwlx1MDAxM7FC3S46vmttOqdcdEZcckWJgHDjXHUwMDEyKzZZK9ZUKFhQYGXNvlT2nPddmSWcO87YJKVcdTAwMTGR9pxcdTAwMTaKM1vQXHUwMDFlOEtCqqVhTp7xXGJoXHUwMDFlZ1xyw2pKyaLt69L9j6/V71cq+u53j3ixcVJ9eSWkKE87ptM+/G7+1Y0vT2k1qsYzXHUwMDFl+i6pXHUwMDEyMn0gabePiJrN36BcdTAwMDKUeMrjsFxccM6qhEiSkzrBIVx1MDAwNVx1MDAxNotcdTAwMDMzf/o2XHUwMDE2mCpcdTAwMGaYmsHStCRg5qpccsKnQJNMpEZcdTAwMThcdTAwMDNXcs7Uup/OPjFcdTAwMWPTWU9cdTAwMGIhmUeGI4WQdJCPhVx1MDAxMKeT2GR8cHpvXHUwMDFhTu/9deHiujDjXHUwMDA1Tj3y46W9wDlnkVx1MDAxOa92TDd4gMmtXHUwMDA3oFx1MDAxN8xW6zxcdTAwMDa/XHUwMDBlXHUwMDA1XGZMnWs/OCf1ZaHjOt29Kbx+1z+SXvs4T1x1MDAwMOUkXHUwMDEz9/PX1q//XHUwMDAxXHUwMDA3vCMgIn0=
+
+
+
+ App() Container( id="dialog" ) Button( "Yes", variant="success" ) Button( "No", variant="error" ) events.Key(key="T")
\ No newline at end of file
diff --git a/docs/images/events/bubble2.excalidraw.svg b/docs/images/events/bubble2.excalidraw.svg
new file mode 100644
index 000000000..e3e4d2079
--- /dev/null
+++ b/docs/images/events/bubble2.excalidraw.svg
@@ -0,0 +1,16 @@
+
+
+ eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXG1T4spcdTAwMTL+7q+wOF/2Vq3ZeX85VVu3XHUwMDE01PXdVVddr6e2YohcdTAwMTBcdFx0Jlx1MDAwMcSt/e+ngyxJeFx0iODi3U1ZXHUwMDAymaHT09P9zNOdXHTfV1ZXXHUwMDBiUadhXHUwMDE3/l4t2Fx1MDAwZpbpOuXAbFx1MDAxN97H51t2XHUwMDEwOr5cdTAwMDdNpPs59JuB1e1ZjaJG+PeHXHUwMDBmdTOo2VHDNS3baDlh03TDqFl2fMPy61x1MDAxZpzIrof/jf9cdTAwMWaadftjw6+Xo8BILrJml53IXHUwMDBmnq5lu3bd9qJcdTAwMTCk/1x1MDAwZj6vrn7v/k9pV3bMuu+Vu927XHKJekKiwbOHvtdVVWpMJNOc9js4YVx0Llx1MDAxNtllaL1cdTAwMDWF7aQlPlVwS+dccr0vNre3qvdRdHrepHf1teSqt47rnkZcdTAwMWT3yVx1MDAwZaZVbVx1MDAwNnbSXHUwMDFhRoFfsy+cclSFdjxwvv+90Fx1MDAwN1x1MDAxMyTfXG78ZqXq2WGY+Y7fMC0n6sTnUDI+06t0ZSRnXHUwMDFl4lx1MDAxZVx1MDAxOFx1MDAxYlgozjiTQlLBkvF2es1cXCiKNSWSQC86oFnRd2EmQLO/UPdIdLsxrVpcdTAwMDVcdTAwMTT0yklcdTAwMWZFLI1To27/XHUwMDFjr6JcdTAwMDZjlFx1MDAxMEmJplx1MDAxYVx1MDAxMd7vUrWdSjWK+1x1MDAxMGIoxISS/OlSKSPZ3UlRQlDCiEh0jK/f2Cl3neOfQZtWzaDRs10hjD+kdI/V3lx1MDAxY/SstHel5t1sX3ok2tza31x1MDAxMZfhiSutVl3gvqyMK0b2Q1ToN/x4nyf24XBcdTAwMTe7Zpl9uSi192osujQv9uhosWZcdTAwMTD47WnlLkjd31xcbKb3+2kvmIjtvUuctNkom09Yg8GtXHUwMDE54kRwOPrtruPVoNFrum5yzrdqXHQ8raT0XHUwMDFkXHUwMDAyxYyeKUTkaixcIjKlkYbwTHSYhIj5Vl5aRFx1MDAxNLmIKIjBJII5QfLliFx1MDAxOFx1MDAwNaZcdTAwMTc2zFx1MDAwMHBmXHUwMDA0KsrJqEiGUJAqzVxilkLPXHUwMDFmXHUwMDA15+mdiVx1MDAxN/hedOo82l1ZXHUwMDA2x4ohXCJcdTAwMTCRWiMuM722zLrjdjJcdTAwMTPbdWPQfL3RePeftKVDXHUwMDFiVOjK5JnO665Tif28YMGg7CBcdTAwMTNcdTAwMDKRXHUwMDAzXGaj36HulMtuylx1MDAxZi3QwFx1MDAwNJnBzjSrvVx1MDAxZjhcdTAwMTXHM92zjIK5IfmE4iNiUlx1MDAwYjYuJqmG6eaYTc9S8peVJY1JgpBBXHUwMDE0xKRElFx0hjHLxCSh2kCEMM41XHUwMDA355dcXCwsJpGhpeSKgzaMyVx1MDAxMVx1MDAwMcm4QVx1MDAxNVx1MDAxMlxuaU0wk1SKwVx1MDAwMMVUUIlcdTAwMTVHM/CUrqazRiggXGKZJULDyFxmolxyxys7Xlx1MDAwNVx1MDAxYZN17yf5niZcIroxbDXDrlxyXHUwMDExo1xu0JMpXHUwMDAwUoKFZDzVrWI24oXIoFx1MDAxOMGUY1x1MDAwNeingIj3OvRcdTAwMTfggu2VJyvFOo9cdTAwMWN92l5v75OrWqd0XCK+XFw0ySil1kArXHJTg5HATFxizaRcdTAwMWVWXG5TQ1x1MDAxMVx1MDAwNViHOcFYa4yHtHLNMCr69bpcdTAwMTOB9Y99x4tcdTAwMDat3DXnelx1MDAxY+xV2yxcdTAwMGa2wqjSbYOo0IglZilp8m41XHSb7of++3/ej+492pnjY9iNXHUwMDEzYSvp13FoXHUwMDE22Fb0XHUwMDE0zCNcdTAwMTCNUDpcdTAwMTbSMIQvl1qpXHUwMDA0KiZhWv4kLymmQXppYIUhX0GUUKF1lmdcdTAwMTCtXGZCMSyGXHUwMDE4QStTfECzOfJcZpFgVFx1MDAxZseUXHUwMDFhwi2CtITVJoV6r5Jfbd7W6N3mbadxb53csk7rlG6ffVre/Opi97zV3melg/2Al7c7pElYScxBLrko73zaqllcdTAwMDdqneGzunu06V1V5iB3QeZ9W2Jr4mKntdU4wd+aYbXW4lvo9rD8x7hLLfaRblx1MDAxZu/fsiNyXiu5XHUwMDFi9p44q1x1MDAxZOzOo0Bycllj1YOz/a/0+HHnq/ulxYLSi+ROKlx1MDAwZYw2UFwi9ueCm0PuuEB44cVcdTAwMDFC2fhlWyhcdTAwMTmTXGKS5J2Tlu18v1jWZZuSvGWbXHUwMDAyRZSvtGzzXHUwMDExy3YqZe4v20RLyqRIxvtcblx1MDAwNVx1MDAwMaZcdTAwMTTCXHUwMDFhP8MjR1x1MDAxN1x1MDAwNKYtXHUwMDAwXHUwMDE0f2bn7669uMEpf7yOK/+uX7kuXFx7o2tcdTAwMDOcZOT0U3/Xvs36/7MqXHUwMDAzXHUwMDEz2OhgZWCi5rPTbHDG8fc3XGLTXGLy0OnD9ZN9ZNPHc+fh6/bxSXX7xrNcdTAwMWXto19cdTAwMWKufGK0XHUwMDFhXHUwMDE4XHUwMDExXHUwMDAx2CgohFx1MDAwMYCTyEQrXHUwMDEz3Fx1MDAxMMCyIVx1MDAxOedap1x1MDAwYlhzXHUwMDBmVo2Gg1VcctdcdTAwMDY0xZhS9dr3ME7XnMvS/tq3b0FJ31xir3VPXHUwMDAzbP3h2PPi2Fx1MDAwYjLv21x1MDAxMrsojv22rOBeXHUwMDE2vfXO1n2FXHUwMDE3afXIosXjqIh+PyvojaK62S6yolx1MDAxMPbp2d5DZWurvbxWWFSqMXd1J2VcdTAwMWGjL5iI7b2bJ6/LpS/jMlxySphcdTAwMWE8nTBcdTAwMTeluKY0YbqTmEu+mZeTuYgsc8lmXHUwMDE5TKLX4i1qXHUwMDA0b1x1MDAxOXFPQ1NcdTAwMWRXilOT8n+YZGw0o8j33sXnnrj6deGrXHUwMDFkXlx1MDAxN94/fWqZgWN6XHUwMDEx0PewaVkwuvGZh8xcbp9T5jGBoVx1MDAwZmZcdTAwMWWzXHInN54npCNCjlx1MDAwYmrOXHUwMDE44/g5NzLXLiufxVWntLPjXHUwMDFjuvbnzm7n7mHpq1x1MDAwN4RcbkNThFx1MDAxNCVcXGlAuYG4hnxcdTAwMDTBeYw4U9BXysVcdTAwMDX2dFx0XHSDMVx0qVx1MDAxN1A7yKWK+uiIq8+HzZ3L5teaf2Fe3W3JP+nIvNKRXHUwMDA1mfeNiV1QOvK2rLCodOSNWWFB6cjbssL8b3wsSN1JWc7oXHUwMDBiJmJ775Ygy+Fjs1x1MDAxY6KB4Ovn3E7JN/OyXHUwMDEyXCKGc1x0XHUwMDExJDqvRYimzHRcdTAwMDRcdTAwMTJUKM5cdTAwMTdQoV3qTOfQXHUwMDFmkVx1MDAxOdiAXHUwMDAzwWunOVx1MDAxM5j/XHUwMDE0ac6kseRG89h9mlx1MDAwNOHxt0fBwbHkWj5j93QuXHUwMDFjL2s8XHUwMDEzajBcdLFEhGSMZm+3UKVcZsA0QZiIN/nSXHUwMDA1XHUwMDA2M8aGXHUwMDEwglx1MDAxMcYpJYAtbDi2IdeK94tCZFx1MDAwMdBcIonpUKgrgCNGOZmhqDH7Rs1cdTAwMTeE+pRcdTAwMWI1p95cdTAwMTOJXGaGYfhgXHUwMDAyKjhHhKhUp6dcdTAwMWSRxMBgZULiXHUwMDFlQilGSa/HM/dp5sd0RicuXHUwMDA0LFx1MDAxNTzeXHRMJUpcdTAwMTC6r1x1MDAxM8w90lJoXHT6IFx1MDAwMXP8tndpjvfl+Fx1MDAxOPLiRNxK+vXZaIY104Onkz2aSkpYtNn0ezTzS+jLWYMlYHkpkFx1MDAwNk+iUjCW2lx1MDAxM/lcdTAwMDRn2oh3XG5cdTAwMGLEqKZcdTAwMDIrNqDYPPFcZmBVXHUwMDExrVx1MDAxMEw2k0IlO1x1MDAxN1x1MDAxMjwjhlx1MDAwMColMFdKXCLGdKoq3Fx1MDAwMzREXHUwMDAwk1x1MDAxNVEzlHNmXHUwMDA3NPjHuUx86Vx1MDAxN1x1MDAwMtpcdTAwMWGgXHUwMDA3zKRgmDGAdSZIqtNcdTAwMTN4gJ0pWFlRXG44I7RmM248z6/FXHUwMDBl6Fx1MDAxNKuEgFx1MDAxZmDALZxQ/tXUvnNcIrrPXHUwMDFjUayUxupNXHUwMDAz2tp4b46PYT9+JqTlXHUwMDE2oWFix6NcdTAwMWFnXHUwMDA0ol1PX4Qu31x1MDAxY1/c3947l6XPx7e6yuT5oW3+WlSjk1BccixvSLA6XHUwMDAx6ytcdTAwMDbeNLwnRlx1MDAwYlx1MDAwZcu6XHUwMDEyWCP2omdp/mKWsG85Y8OQRkSCpklcdTAwMDE6wbVcdTAwMWVmcZhcdTAwMTNccvrMsOl8XHUwMDEyZPXdakTNorTl7IR8XHUwMDE37Z5cdTAwMWNcdTAwMWY+3lhHlebGWvHlJZaiPGqZdvPTvfmlXHUwMDFkXVx1MDAxY9HD8DDam0OJZe7qTiqxjL7glNo6n3evLm4qdrBn1qnliK90s/FtOiv8XHUwMDA0gDz6XGZ/iWstqHQj5djKXHJGgoLLajZ9qpc/fctcbiMyXHUwMDE3RjQ3WFx1MDAxYUZcdTAwMTaX7KWraMmDscPpXHUwMDFjQLtcdTAwMDI6J39B5Wam5+5SlVx1MDAxYoIyZ/uVm2QoPys3divWydizO+9qdufjdeHsujDmyVid+fLcnoydsCZcdTAwMGWWZ0YrPPtcdTAwMDKvUyvWYE1cdTAwMTWmgrDnZC3ty9ZR5+BTZJ5vr31ztrfq7EBtLntcclx1MDAwNlJcdTAwMTFDQqIo4u0jXFxcdTAwMTA+UIVBkDJcbowhhWNAhNGLXHUwMDAy8+VcdTAwMGI8dIOo1LM8r/6SXHUwMDA13lx1MDAxNlx1MDAxYid3ev2uuVtad+W3dus4OKsv71x1MDAwMr8gdecudlx1MDAxMm9cdTAwMTh9wd+HNyg9dkc+iZ+Fxlx1MDAxMLfT3/LJn76lhSeRXHUwMDBiT5RcdTAwMWJoXvA0XHUwMDE33iBjXHUwMDEywyVdwHOvf3hDwlx1MDAxYiastXPgXHJja52pZ6NcdTAwMDb3pXFcdTAwMDSrXHUwMDEzXHUwMDE208dkPkg9KybJq8UkV8JAkGjHv66VpfFcdTAwMWNcdTAwMTkqrktROX6TqS3iavDsgSjhXHUwMDFhXHUwMDA0UTzqXHUwMDA3brgwQC/IXHUwMDFmXHUwMDA0RfG2XzlcXNVkQmtMkX7d2zRwSZz6XHUwMDE1g/lXNfN59Gr6llxiXHUwMDAxnGRIi/hX0SBcdTAwMTVcdTAwMWLxc1x1MDAxYVx1MDAxOEBVXHUwMDAzmGI4YmuyXodnVjXzY3RAJ+B1Or6nT1x1MDAwNJNsSCNhXHUwMDAwwnVnlOk4W6ZDXHUwMDFhvama5rBcdTAwMGZ3T1x1MDAwZrtvXCJpJf36bFwiMb6MyblShKR/X2ZcdTAwMTJmSeteXHUwMDFkXFzV/eKRf3/X1vqiendcdTAwMTUuP2ZJXHUwMDAz+Fx1MDAwM9aKgWdjNlx1MDAwMFxcSFx1MDAxYZpJQYVWWDGxuC3yPFlcdTAwMWJcdTAwMTJcdTAwMTYxjFI0vlx1MDAxZFx0gfeqv8slXHUwMDA00UrNhFJTsIjhfSM3zZub9Fx1MDAxMp+mXHIq03vavSCR31x1MDAxOMdcdTAwMTgyo1x1MDAxOKRcdTAwMDc9TZ5ia6VcdTAwMTe3XHUwMDA1s9E4jcBCfYiDSXDKvWEm8lxuLcdub4zIdm+7Ryy1XHUwMDFir3Fk2PFcdTAwMTR8/7Hy419iJnwqIn0=
+
+
+
+ App() Container( id="dialog" ) Button( "Yes", variant="success" ) Button( "No", variant="error" ) events.Key(key="T") events.Key(key="T") bubble
\ No newline at end of file
diff --git a/docs/images/events/bubble3.excalidraw.svg b/docs/images/events/bubble3.excalidraw.svg
new file mode 100644
index 000000000..afc97dc2f
--- /dev/null
+++ b/docs/images/events/bubble3.excalidraw.svg
@@ -0,0 +1,16 @@
+
+
+ eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT4lhcdTAwMTP+7q+w2C/zVlxy2XO/bNXWW4p3XHUwMDFkXHUwMDFkXHUwMDA1dZzXLStAhFxmgWBcdTAwMTK8zNb+97dcdTAwMGYqXHS3XHUwMDEwlTgwO1QpkFx1MDAxYzqdPt1Pnu7Tyd8rq6uF6KHrXHUwMDE0/lgtOPc123PrgX1X+Gi23zpB6PpcdTAwMWTYRfrfQ79cdTAwMTfU+iObUdRccv/4/fe2XHUwMDFktJyo69k1x7p1w57thVGv7vpWzW//7kZOO/yv+X9ot50/u367XHUwMDFlXHUwMDA1VnyQolN3Iz94PJbjOW2nXHUwMDEzhSD9f/B9dfXv/v+EdnXXbvuden94f0esXHUwMDFl13p066Hf6auKmWBMak3jXHUwMDExbrhcdTAwMDFHi5w67L5cdTAwMDaNnXiP2VRAZVxc/LZ3vr7+5UpUrtTa3XkobuPDXrueV45cdTAwMWW8R0PYtWYvcOK9YVx1MDAxNPgt59ytR01z9JHtg9+FPtgg/lXg91x1MDAxYc2OXHUwMDEzhkO/8bt2zY1cdTAwMWXMNoRcdTAwMDZb7U6jLyPeclx1MDAwZt+KmEhLIaQ5ZZxJitRgd19cdTAwMDDllmJKI0a1YFxu61x1MDAxMcVKvlx1MDAwNzNcdTAwMDGK/Yb6r1i1ql1rNUC/Tj1cdTAwMWWjSE3jxEnfPZ+uolx1MDAxNmOUXHUwMDEwSVx0WFx1MDAxY1x1MDAxMT5cdTAwMTjSdNxGMzJjXGJcdTAwMDE9mVCSP1x1MDAxZSphI6c/J1hJolx05yreY1x1MDAxNOju1vve8deoTZt20H2yXSE0X1x1MDAxMspcdTAwMWK9N0ddK+leiXnvKSEu9q/0fveb+vL15vtR8M0hXHUwMDAzWUO+XHUwMDE4OfdRYbDjn4+/xP4kYodGf8x6wKzaXHUwMDFlRrf35Vx1MDAwYreoP92cVnfOTlx1MDAxZZwvXHUwMDA3k7W1g8C/S8h9+lx1MDAxNPt+r1u3XHUwMDFmIVxmXHUwMDBiQVx1MDAxOeJEUarkYL/ndlqws9PzvHibX2vFqLeSUHhcZmyHzj+JtEhMRVrEXHUwMDE4w0igOOhnIW369C0u0pI0pFXCklx1MDAxY1x1MDAxM1x1MDAwMFn2ZqSNXHUwMDAyu1x1MDAxM3btXHUwMDAw4GtcdTAwMDLaytloS8bRXHUwMDE1SSFcYvxcIlZsbug6T/eMvcDvRGX3e9/FhMWxYohcYkTgmo64XHUwMDFjXHUwMDFhtWW3Xe9haGL7flxmmq91u1x1MDAxZv6TNHXogFxufZl8aPCa5zaMo1x1MDAxN2pwUk4wXHUwMDE0XHUwMDAzkVx1MDAwYtRlMKDt1utewlx1MDAxZmuggVxyMoPdLCzCXHUwMDBm3Ibbsb3KkIKpMfmIXHRcdTAwMTOCXHUwMDEyI6KmRaVcIkozJjDOXHUwMDFllKkotahBSYVFXGJFhHCFNNA9OVx1MDAxNJREUPBcdTAwMWNcdTAwMDAnJoFYYIJZflFpSawxVlxcXHRkXFyejFx1MDAwNyUjXHUwMDE2XHUwMDE1lFJcYlxcRVx1MDAxNUpQ0+dcdTAwMTiVmFx1MDAxMcpwwjczx2hf1dfG6Fx1MDAxMJq9IEbDyFx1MDAwZaJ1t1N3O1xy2Fx1MDAxOV/7nnl9lpjoR3GtZ7QsXCJcdTAwMGJcIlxcMiVcdTAwMTUgLONcdTAwMWMmViXGNeyusaOFsWCYXHUwMDFhsFVgcfI0YHBcdTAwMTUuOJ36bK22909Pd13S+7z9cNw624nOTsrlL5O0XHUwMDAypVx1MDAwMDypQDA/iiNcdTAwMDPwMeZcdTAwMGW00lx1MDAxNlKUXHUwMDBiialWiFA5ppRnh1HJb7fdXGKs/9l3O9GolfvmXFwz4d507ProXjip5L5RXFzoXHUwMDFhicNkN/60XHUwMDFhx03/y+DzX1x1MDAxZieOLk51Z/NcdTAwMWFz5FjcSvJ9XHUwMDFholx1MDAwNU4teoznXHSoRijlo5ufUY0gpYngmtLMsJY+y4tcbmuYUEsyXG54QJnJ31hsXHUwMDEyI4FiZmkuIaWD2Vx1MDAxMZrlSDZETPxcdTAwMDZApmKweEIuXHKhylx1MDAxMCM5kIs0Zu2fXHUwMDE3T2+6p9WOOjhu3n1cdTAwMGbsi1wiZ29PL7pF50SSXHLt7jKt9nuHLba9s5eNsKfKPd87u707YFx1MDAxYp9cdTAwMGVcdTAwMDJe334gPcI2xFx1MDAxY+SS8/ruzlar9kmtMVxcaXtHm52vjTnIzcm8yyW2Jc53b7e6J/iqXHUwMDE3Nlu3fFx1MDAwYl1cdTAwMWbW/3XGfUNcdTAwMGX7XHUwMDEzWSHqXu00Nq+0s1x1MDAxOVRxsX5cdTAwMWKG3l4wXHUwMDA3KyCnsvnJ82XjqHm/s394sulT725cdTAwMTGtO6tOMvmAsdhnejCVjDLNgcfH5Dmnelx1MDAwNrDsqSRcdTAwMDNcdTAwMGItXHT8yewkI93OXHUwMDBiSzKwSiVcdTAwMTlcdTAwMTRZ7H1IXHUwMDA2n0AyXHUwMDEySf5cdTAwMTPJgFx1MDAxY85cdTAwMTQxWDwv71DBeHRI/Fx1MDAwMoecXFzByFqxKD2XXHUwMDEzPlxcdsxcdTAwMGW3/uelWVx1MDAwM/H8xmXhsjO5mMHJkJxBrcJzrofd/0WljFx1MDAxOdR5tJQxU/PUSE3NXHQopmRauCpIXyVjQmaO1kP3XHUwMDA2bzU66/dcdTAwMDeoev39SFKvVKr/2GjlM4OVMG0pXHUwMDAyXHUwMDE5L1wiWFxuotVwsDJcdTAwMDU5XHUwMDE505JJzjWwcZFfsGo0XHUwMDFlrEqMXHUwMDA2K1NcdTAwMDIyYczeOSNwTnmVVuAlO8Xt1s3DWsA3rn5lXHUwMDA088pcYnIy73KJzSsjWC4r5JVcdTAwMTEsl1x1MDAxNTy9XlLV7Vx1MDAxMitcdOGUK/v3ja2teTD3nNTNK4FZlkmblb9MPmAs9unTXHUwMDBmz18oYdNbXySmlFx1MDAwYqqzM6J0Oy8sI2LpjEi+XHUwMDE3I1JcdTAwMTNcdTAwMTiRXHUwMDFjY0RKaES1UD91+rLei1wiv/PBbHvMXHUwMDAyLlx1MDAwYlx1MDAxN054Wfj4+O3WXHUwMDBlXFy7XHUwMDEzQWJcdTAwMTD2ajU4u+k5jVx1MDAxY1x1MDAxNj6nnGZcdTAwMDb3XHUwMDFmzWledzqpIT0j0Vx1MDAxMVPjmmjNMKTj2fss1Oej3fXjXHUwMDBi965q22F5u/LlU/PsfvHLXHUwMDEy1IJ4RVxcYoI1XHUwMDExmqmRuMaWwtysWULSQ4XKL64zZjpCaa6QeOe2tWtSo7h3Ujyon8pcdTAwMTLueC1ug9Bfmc6cMp2czLtcXGLzynSWy1xueWU6y2WFvDKd5bJCXis1y2KFWVx01ORcdTAwMDPGYp8+LUBcdTAwMDLFU1x1MDAxMijJJWGSZb93IN3Oi8q01FxmoiXei2hlS6BcdTAwMTjTjCgt/m1cdNShPyHhcFx1MDAwMF2C986eZiRcdTAwMTRcdTAwMTmyp1nnklx1MDAxYcxTO2FcdMJpy7mYMcp59rwpXHUwMDFk5Fx1MDAxNzWaibRcdTAwMTinlEqJXHUwMDA0I5QmXG5ccv1wRtzChGAlsemkppLnXHUwMDE3z1x1MDAxOFtCgFx1MDAxMkZcdTAwMWZcdTAwMDJQy8bDW3CLa66V6ZXUSGI6XHUwMDFh7Vx1MDAwMExCICXly6P99b2wL7/6JPSY1lx1MDAwYlx1MDAxYveRMkw5XHUwMDAxX6RiSmsrsTCYjVx1MDAxMDNCKMVoou8yS/fq0+DZnbCxTmBlXHUwMDBlXHQsolxmfFx1MDAwMsWoO9BcdCZcdTAwMTNpKbRcdTAwMDR9kIBJw9N0mlxmXHUwMDBmYzotUyPsdFc2rzEnjsWtJN9f3tqvp9d3KTiQubsxO56lV/1cdTAwMTdcdTAwMTXPqDbBgFx1MDAxOdicXHUwMDEygHBcdTAwMWRfQ1x1MDAxZvFMWFRcdTAwMGJcYiNNNVx1MDAxNXnecIOpXHUwMDA1XGZIK1x1MDAwNJPNpFBcdTAwMTN6+1x1MDAwNbGEpkhcdTAwMDBfUlx1MDAxMoGyXHR0fWIvXFxcIlx1MDAwZVx1MDAwMPOKXHUwMDA18Vx1MDAwNcWzXCKAXHUwMDA3NVxyOTA5nEgmkmD1iFx1MDAxZGA4XG5mU2ZBQlxinWgxylx0z4xORiWzJoBcdTAwMDG2cNySXHUwMDFjXHUwMDAzXHUwMDFhtYhAYFx1MDAxZkSxUlx1MDAxYatpOk0uXHUwMDE2LzWeXHUwMDE1pzuzeY278Vx1MDAwYlx1MDAxMS21uq3o9LtcYvshTjDJjmqVXHUwMDA3t1k+uHPuSifOt/Jaw1x0i9/2fyyq0VmgRihcdTAwMWVes1x1MDAxYcm4jPmxJNLgXHUwMDE5SvY0veZ2bVZcdTAwMTPONWdsXHUwMDFj0UhcIpmLK9sxTDzfj4SVuWmKklx1MDAxY+5HXHUwMDFh+NWEqkXt+vz4QNb3mq1cdTAwMWLvXHUwMDBivjj8fmJvbb29XHUwMDE4UpJHt7bT27mxT++i8yN6XHUwMDE4XHUwMDFlRvuTxb6odpOTunNcdTAwMTc7q3Yz+YCx2GdcdTAwMDBIudpcdTAwMDDyJlx1MDAxNk1yqt1IOb10g1x1MDAwMdZcdTAwMTBcdTAwMDeyllx1MDAxOUbSzbyoMFwiUmBcdTAwMDRi1sJcdFx1MDAxOHlcdTAwMTOKpDIjwifgXGJcdTAwMTlL5bBkXFzBgX5A4eZV1CdRuCFoaOugcFx1MDAxM5/Kc+HGuTU6WfvOw4eW8/DnZaFyWZhy67FcdTAwMWX68dxuPZ5xQVx1MDAxY63OTFb49Vd3nUjzx8KSYE2xTjzaY1ZYejdl9nnz/qHZ3tpu672d43DXX1/wsFx1MDAwNPSxuGKacHPNXHUwMDE0hI801Fx1MDAxM2KZZmVI/Vx1MDAxOXBmJN90N/LbL+8ms9LoVVx1MDAwYtdvubpfXHR0UdtZP946p3vVs/2Tln/8eWNxr+45qbssYmeRhslcdTAwMDfMqG2vWj/fYdXKzV6RrYn2UbVabspsc5aBjEhNaO5PRlE65W5lSLA4ZSp7TpM+fYuKejxcdTAwMTX1OLbk3FBvXHUwMDFldISYslx1MDAwMEf8XZ+EXHUwMDAy7kg5euuTUJaJjsy4gudNR8wjiaZGJqZKcYNcdTAwMGaZI3N9jbZcdTAwMTTfaWzfn5XOfMlC7yxoLXpcclx1MDAxNZtcdTAwMWGpXHUwMDEwXHUwMDFjklx1MDAwMY20XHUwMDEymlxyhSbm3JJcXHJwTZO64eRcIsyPICRcXDNO2KtcdTAwMTZ430JIPt/qYD3c6V03v29ffN3arGzc3PdcdTAwMTaXkOSk7nKJ3f3aq5xViN495Vx1MDAxN2frd07P35XeXCJcdTAwMWF3XHUwMDE2f5p8wFx1MDAxZs+fKFVEXHUwMDEynHsxXHUwMDA3J59cdTAwMDQ5XG7TXHUwMDE0XHUwMDAwQSRJ3CyUTp++RUVpjFNRWnGLzFxypedSz4G0kSMk87i5c55cdTAwMGW57Fxmalx1MDAwNueYXHUwMDAzg0p5ttz09WdJXHRcdTAwMTOcveDRcqkw9aKoJO9cdTAwMTaV5vZcItPywKnCiGAx0lx1MDAxZEeRtFx1MDAwNMdSIVxykavV9NuLXHUwMDFjIeVbgtI8fkxRhDnlXGaSK8YxmfC4XHUwMDA0XHUwMDAxWVx1MDAxNoP9XHUwMDE0eC2nVNCx9jmTnUlcdTAwMDRcdTAwMTDznlx1MDAxZDVPUfuq/rmMT5dLzzNWh5/jXHUwMDA2zF9rJMCI2DzCLNHN8bw4zCxBuVx1MDAxNppIhVx1MDAxOWj+3NPxwqfLpcfu6tCKNaJEKTgq4qbpR3MxrpayXHUwMDAwdDVkrlxcKUSVYGNaLdUqdJpP91x1MDAwN4y7cyxzJfn+Yr6RuJyNXHUwMDAwXHUwMDFiU5pcIk1Zdrpx4GyfXpVON4vnVcq/ke1cdTAwMTLZrp0sPLBJYVx1MDAxMbP2jzhcdTAwMDZGQYZxjUjz5DlOzJ2KXG6ihOXXJpgowMRkY6xvxviAIFi9a7VcdTAwMDbYXHUwMDE45TSvxaPxrt9qr1pNXHUwMDEygSS5UEOjs3byRn53XHUwMDFhr1x1MDAxODqLUVx1MDAxMvGkyWNsrTxFcMHudstcdTAwMTFYaFx1MDAwMHgwXHRu/ek0Y3mFW9e5W59QXHUwMDFhuO6/jNR+vJrIcMxcdTAwMTT8/c/KP/9cdTAwMDeoXHUwMDAzMlx1MDAwNiJ9
+
+
+
+ App() Container( id="dialog" ) Button( "Yes", variant="success" ) Button( "No", variant="error" ) events.Key(key="T") events.Key(key="T") events.Key(key="T") bubble
\ No newline at end of file
diff --git a/docs/images/events/naming.excalidraw.svg b/docs/images/events/naming.excalidraw.svg
new file mode 100644
index 000000000..5a9a2fb4c
--- /dev/null
+++ b/docs/images/events/naming.excalidraw.svg
@@ -0,0 +1,16 @@
+
+
+ eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nNVaa0/byFx1MDAxYf7eX1x1MDAxMeV8OStcdTAwMTV37pdKq1x1MDAxNbC0hZSKXHUwMDE2SludripjT1x1MDAxMlx1MDAxN8c29oTLVvz3845cdLGdXHUwMDFiJFx1MDAwNJaNXHUwMDA0iWcm9ut3nud5L86vXHUwMDE3rVbbXmWm/brVNpeBXHUwMDFmR2HuX7RfuvFzk1x1MDAxN1GawFx1MDAxNCmPi3SYXHUwMDA35cq+tVnx+tWrgZ+fXHUwMDFhm8V+YLzzqFx1MDAxOPpxYYdhlHpBOnhcdTAwMTVZMyj+cP8/+Fx1MDAwM/N7llx1MDAwZUKbe9VFNkxcdTAwMTjZNL+5lonNwCS2gLP/XHUwMDBmjlutX+X/mnW5XHSsn/RiU36hnKpcZqSMT45+SJPSWEyEIEghQcYrouJPuJ41IUx3wWZTzbih9uHRWXbGf36Sxu/wY3HOWYfH1WW7UVx1MDAxY1x1MDAxZtqruDSrSOFuqrnC5ump+Vx1MDAxMoW27649MT7+VuhcdTAwMTd9U/tanlx1MDAwZXv9xFx1MDAxNO7+0Xg0zfwgslfuRKhcdTAwMWG9cUJ93WXpXHUwMDAx5mkqJEOSY0mVqlx1MDAxY+JOQFx1MDAxNfVcdTAwMTRiWlx1MDAxMy2xkpLwXHTTttNcdTAwMTj2XHUwMDAyTPtcdTAwMGYqX5VtJ35w2lx1MDAwM1x1MDAwM5OwWtP1OeHg2GrVxeiWufaI1FIqxqjQRHAxXtI3Ua9vYVxymMqphlx1MDAxZKlcdTAwMTlhyt2QREmMqVx1MDAxYY+7XHUwMDBiZ7thiYu/Jr3Z9/Ns5LR2aWDNaHe4U1x1MDAwM1X15WFcdTAwMTb6N3uPhaCMYiYwl3Q8XHUwMDFmR8kpTCbDOK7G0uC0gks5ev1yXHUwMDA1nHIh5uGUaoKpVETcXHUwMDFiprvKbH3K2LtT8/VL9mZjiFx1MDAwZnW8/8xhypDwsFx1MDAwMjcgXHUwMDAxb0hKOVx1MDAwMVPmwYZIqplmgmPxIJRicqKUmIVSgpCHXHUwMDA1lkpywrRAWC2DUsw1sEgyjNaP09FEXHUwMDA1rNqGZ2pPXHUwMDA1vv3z8it786M3/FZcdTAwMWO9XHUwMDFkRuNzNVDo53l60Vx1MDAxZc9cXI8+zWdcdTAwMDHilMHNPlx0XHUwMDBiXHUwMDE0V/NYoCRBVFx1MDAwYszuzYKtg86eke92XHUwMDBlXHUwMDA2W+Kk0z00XHUwMDE355vZM2eBQMqTXHUwMDFjIaEoXHUwMDA1KFwiPEVcdTAwMDLFXGIjXHUwMDFhlNyJwsNYwFx1MDAwMmG6fFx1MDAxNlx1MDAwYjDhXHUwMDFlgFx1MDAxOPM6xu+Bf65cdTAwMTQhgj6GTC+C//bnz2FHXuxcdTAwMDdcdTAwMWb3tnl+2T/svDtGa4M/k6qGulx1MDAwN8Lfmks7XHUwMDBi+Vx1MDAxOOm5XHUwMDAxXHUwMDAwXHUwMDEyXHUwMDE1XGKcXGYtgX1fXHUwMDFl51x1MDAwN/tZxFx1MDAwZtOf4uJIbnx7n+C1Yn/iW3Xo45WgT1x1MDAxMfVcdTAwMTjSWiHIWIRqyj+XIMtcdTAwMWMxqTlnXHUwMDFhXHUwMDA06bGAr+g03jmaxLnETElIY8TyOC/cwYo4XHUwMDE3Nk63szOqTj7GfPPqfNOc7H5dXHUwMDEzzlx0oYIqslx1MDAwNM4rNKWJPYz+NmX4bIy+8Vx1MDAwN1F81YBESVx1MDAwMDBw3z81Rcv2TWtgbD9ccr8nPnwqXG6/Z1p9P1x0Y5PXN7EwYJC7XHUwMDAyo41TbcZRz/GnXHUwMDFkm26TWDaCemI8bdOa01x1MDAwMzDNh9Plu+HkLaZ51ItcdTAwMTI/PlrCzJVcYi/lXFy+Q6AjIFx1MDAwN7yWRdzF9zefd97KLOb9y1x1MDAxZPb+7eCg8377p37efGeMe1x1MDAwNFx1MDAwM6khmDHBVDPUQcrhQSjhXHUwMDA0SSYg4j1apNOVqC4gPKFgiUtcdTAwMGKflvCPmddcdTAwMTFcdTAwMDI7oKpcdTAwMWJ6dMKPWJNAzV9cdTAwMDBOzPfkv+nQmrxcdTAwMTXEflH8tlx1MDAxNNtcdTAwMDPwXl0g1sf3u6xcXInsXHUwMDAyycnRMdlcdTAwMTXVUNjo+3M97n56XHUwMDFmn3X2985+fOufpztcdTAwMWaO9o7X24RYO9dcdTAwMDUlnlx1MDAwMFx1MDAxYbuyTihBmlxc54J6RFx1MDAxMq2g2Fx1MDAwNtFTXHUwMDBm60As4DqrrruA61hLXHJ/XHUwMDFjVcHwScj+mFksRHdcdTAwMDVC+2Rkd429Vtr9ntzGypI9z4Pic2xbSOxcdTAwMWKHz6pYiZ5cdTAwMWO9ZTaTpKyH7t9eXFyc3y3BbDKJ0Vx1MDAxNZkt70zahfa05sQ1ypieiOGcS09Csq6ohDBcdTAwMGbEnsvrUDOFuqtXq641XHUwMDA0nlaUKC2FnNFZxIR6XHUwMDFhMSpcdTAwMTVcdTAwMThcdTAwMDJcdTAwMDU0q1x1MDAwNPm2duVQ5nGxXHUwMDAy6VfvMN4k3ct0XHUwMDE4a3b4ud2KkjBKejBZ6cltx3z3XHUwMDFlhWBJ5GDorNxAXHUwMDFlRYxzjClcdTAwMTJQ84Jtsras52cjT3NcdTAwMDFcdTAwMWJcdTAwMGVBS1x1MDAxM4bxaMH12CyThHdcdTAwMWLV/Vx1MDAxNvTzqyP68biTXHUwMDExxTa2gy8mnmVcdTAwMTTyXHUwMDE0XHUwMDE4xFx1MDAxMFx1MDAxNH1cdTAwMTIkWVA9bVx1MDAxMvdcdTAwMTBsLFx1MDAxM6497HrYesomoLfdTlx1MDAwN4PIgu9cdTAwMGbSKLGTPi6duek43jf+lIDAPdXnJsUgc2dsqnv1qVVcdTAwMTGmPFx1MDAxOH/+6+XM1fOx7F5cdTAwMWLTMK5O+KL+vrSQQVx1MDAxMEeTw5WSXHTYdCnv339YnLg+RyXjWHuuv4ggzVx1MDAwN6+z6sJlOaKQx6FcIlx1MDAwM4oghvWChyQ80FxmhatKXHUwMDE5XHUwMDA1XHUwMDFiXHUwMDE4p5hcbsY10bXYUXXfqMcoXHUwMDE0RIpgxFx1MDAxMVx1MDAxMzVVXHUwMDFk5S+YKIFcdTAwMTnI8dNKXHUwMDE5g1x1MDAwZlUwXFy/lC2ucZtS5kpoTDjDXG70SkheY9FINzQkpJhqXHUwMDA0rlx1MDAwNDditpqSLX7S0rRcdEmCXHUwMDA1lLRKYoqRXHUwMDE0fMomXHUwMDA1abBEXHUwMDAyYVxydkGWPG3Uv0nKNuaCuZydwvHalIyrudVcdTAwMTZWIJ5Y1blxl5QtTsv/XHUwMDAxKVN3VltaeKrsW0OgRnDHXHUwMDEzWZlcdTAwMDAoUijFXHUwMDFj7sX8xlxubFs3kKsqXHUwMDE5cTVcdTAwMWRkN1x1MDAxYVx1MDAwNFWDINVcdTAwMTKuKinDwnNSi7iCilx1MDAwYik5lZRp95iB1DvfT5OVrVos3VPKXHUwMDE2l/CNXHUwMDA0XGLCsqZcXFNcbuVcdTAwMDSkZOCQXHUwMDFhjUa6IT1QXGbwn1x1MDAwMGAzwlx1MDAxOF1NzFx1MDAxNj8wa1olmGBaXHUwMDBipIWSkFxyztJXXHL7XHUwMDBmlTSDRIVCMf3v1rL5cC6np5G8pJrN61x1MDAxY1x1MDAxMTz3iSiBbFx1MDAwNMKJXFyidbQ48W5qWd9cdTAwMGb6w9zMU7N1NY/0nSUmV56mXHUwMDAwJii1QdpcdTAwMTVrylx1MDAxOVXSQ1gypLSm5IE/XGawuZ9cdTAwMTSZn1x1MDAwMyVm5GZcdTAwMTJcIlx1MDAxNilcdTAwMDFfnmlGbkaxJ1x1MDAxNSbAjNGrZs2oyoRbgJJ4lVx1MDAxZlxiPNcnR5hJcEu1tyv2loTHXHUwMDE0XHUwMDE0Nje+hZdsrFx1MDAxYfeamt1cImdwmvxcYtxcdTAwMDb+OFx1MDAxOVpcdTAwMGJcdTAwMDdcdTAwMDVQILCmkYOPu02Ez92hp3icNNfWXHUwMDE3t74u/dz2s+zQgpfHalxyMInCkauqK7TPI3OxNetnWOXLnbVcdTAwMTRcdTAwMWPHbONA8uv6xfX/XHUwMDAx2ibQXHUwMDAzIn0=
+
+
+
+ Makes the method a message handler Message namespace (outer class) Name of message class on_color_button_selected
\ No newline at end of file
diff --git a/docs/images/events/queue.excalidraw.svg b/docs/images/events/queue.excalidraw.svg
new file mode 100644
index 000000000..45230f41b
--- /dev/null
+++ b/docs/images/events/queue.excalidraw.svg
@@ -0,0 +1,16 @@
+
+
+ eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXGtT28hcdTAwMTL9zq+g2C97q4Iyj57XVm3dXG6Eh8NcdTAwMWJCSPbuXHUwMDE2JWzZViw/sGRcZknlv99cdTAwMWVcdTAwMDGWLEu2McaYutdcdFx1MDAxOEujUVvTp/ucnpF+rqyurkV3XHUwMDFkb+2P1TXvtuxcdTAwMDZ+pev2197Z7TdeN/TbLdzF4s9hu9ctxy3rUdRcdP94/77pdlx1MDAxYl7UXHTcsufc+GHPXHLCqFfx20653XzvR14z/Lf9feg2vT877WYl6jrJSda9ilx1MDAxZrW79+fyXHUwMDAyr+m1olx1MDAxMHv/XHUwMDBmfl5d/Vx1MDAxOf9OWVx1MDAxN/gtL25cdTAwMWJvTWzjhGW3XHUwMDFltluxnYxpJYFcbjlo4IdcdTAwMWbxTJFXwb1VtNZL9thNa3ew7a9v1GuNw6P92uXn453d/r5Mzlr1g+Asulx1MDAwYu4vgluu97opm8Ko2254XHUwMDE3fiWqP16z1PbBcVx1MDAxNTeso1x1MDAwMYPd3XavVm95of3udLC13XHLfnRnt1x1MDAxMTLY6rZqcSfJllv8XHUwMDA0TDlcXFFiuFx1MDAxMoNcdTAwMWT2UC7AoZRRZncxo1x1MDAxNM9cdTAwMTi12Vx1MDAwZXBcdTAwMDTQqN9I/EqsunLLjVx1MDAxYZrWqlxm2kRdt1x1MDAxNXbcLo5T0q7/+HVcdTAwMWRJQSpcbmBwREApXHUwMDE4NKl7fq1cdTAwMWVZczRzXHUwMDE4lZRcbs2pXHUwMDAyloxL6MVDXCK0XHUwMDA2LiE51FrQKVVit/gne0HrbrfzcN3WYktT1tuPWymfSlx1MDAwZe51Ku69XHUwMDAzUCk5XHUwMDEzaCmXLLmg6GdcctzZ6lx1MDAwNUGyrV1u5PhMXHUwMDE4ud1ow29V/FYte4jXqlx1MDAxNOxcdNww2mw3m36EZlx1MDAxY7f9VpRtXHUwMDEx9/uh2233655byem5cF/HdpeAyL6Sv1ZcdTAwMTO3iT9cZv7+511u6+Ihta+RwUy6W0m//3r3RDxLkt36iGdcdTAwMDVUXHUwMDEyTVJccibhueyT7cMvnXWz8dm/8b5cdTAwMDU7p+ftT0uPZ0Ul4llcdTAwMWJcIllcdTAwMTbP3MGQxlx0XHUwMDA3/Mf0y8HZOIRxjfiQglBcbjRcdTAwMGbNyjhMMcE5XHUwMDA1wVjyVVx1MDAxZsBMNTWMS6lcdTAwMTKY/1x1MDAxZs6vXGLnwiG1r+xgPlx1MDAxMcxdr1x1MDAxY937clx1MDAwZaKFVEWIplxuXHUwMDA3jFx1MDAwYlx1MDAwNXpqSJ9/b1xis8v5XHUwMDA1bFx1MDAxZVx1MDAxZV1Hd5dHSjZngzTNuuDjcWFcdTAwMWIpylxcMzRwR2mBVCSDaClExognYfg3KEuvKlx1MDAwMHJcdTAwMTKyTK7pXHUwMDAwszpcdTAwMTXFXHUwMDFlUMqBMMFcdTAwMDQkXHUwMDA2z1xypVx1MDAwMyf6mfK0gc9E3m1cdTAwMTJ4Ulx1MDAwM1xcPWq4ncjb0Xe1T0dbknxcdTAwMDH6w19cdTAwMWK0+/Uuv9v7gzfV0Y3r9Xav3fN+dHHEXHUwMDBmw8Nob/gsj+d3LepS/T46+lx1MDAxY0PLWMxcZn3/NFxcaCFcXDDVcmGQ1k6NlvyLufRo0Vx1MDAwNWjR4DxcdTAwMGIv4ymsyEFcZuNZxFx1MDAwMKXKMMlnSGuh/bDotFZtt6Iz/0csiMjQ1m236Vx1MDAwNzGvXHUwMDE4bI6d0mrBXHUwMDFia5Oz59393vDu/vx77fPfa/9KX9rQi1x0XHUwMDFj2meGXHUwMDBl/lx1MDAxMPi1Vky9sFx1MDAwM6875OCRj9pv0KDpVyrphFFGi1xc7LNbmibOt7t+zW+5weexXHUwMDA2z560kPNcdTAwMTYmLcGUXCKYJNnUMCTVjdb2xkWTXHUwMDFk7PbPvm9dnVx1MDAxZJWbfPlhSFx1MDAxZKo5Q6bJjaaSXHUwMDBmYVFcYuEg61dcdTAwMDb5qFx1MDAwNinUc3A5hzymKCVcblxy0U+H5Wx57H5kw89cdTAwMDcnXHUwMDFmLjpy0z24U7J1XHUwMDFhfe3fVvNcdTAwMTNOjK2JeWxSesw/4fKlMfSeQlx1MDAwMCHTXHUwMDA0LZWeXsiNv8xLXHUwMDBiIDlcdTAwMGVAmMzMvFx1MDAwMDSPxEa1llx1MDAwNNW+nIFcbr7hzOYtOrNNSFx1MDAwNlx1MDAxMzObNzGz3VPbXHUwMDFjUFwiqSpcdTAwMDIlXHUwMDAwXHUwMDAzxSVMXHLJ8VR7SSEpNHU4IZwrKrVG2TNcdTAwMDRJhTnN4GZNWTHNxGtULavx6azqoqRiUo5iXHUwMDExUypcdTAwMDDmKq2I1Pa/XHUwMDE4hSaAY00kWnMlXHUwMDA1g5HSikBcdTAwMWLwXHUwMDFi0DdaWUny3WPdf1x1MDAxYcpcdTAwMTdDu9yzVq5cdTAwMTNcdTAwMDdcdTAwMDNcdTAwMTWOlK3uXHUwMDBiW1xiXHUwMDAzwVPtam4njmeDwXzYNci5w/WcXCJ7dvrkR61xcvDtU/PM6NBcdTAwMWNdnlx1MDAxZbM8e9BcdTAwMWPCLP1AUqRMbFx1MDAxNchcdTAwMTF7XHUwMDE4sVU9Jlx1MDAwNGZcdTAwMDKQXHUwMDFj4/6IWXMuJmVcdTAwMDPBXFzrScWebF8jPpx0t5J+n4mcayOzW1x1MDAxM26BmVRSdIqpXHUwMDAz2aHZuNBcdTAwMDY2TrpcdTAwMDem8uV6//r6Q+922Vx1MDAwM1x1MDAxOVx1MDAwMHFQgiB70KhGbVx1MDAxMW0okiFcdTAwMWVcdTAwMWNFiFx1MDAxMdxcdTAwMDBcdTAwMGVcdTAwMDFJz7W8XHUwMDBlPVx1MDAxN1x1MDAxOHpcdTAwMTFcdTAwMWJcdTAwMGIrM92Prdzp175931xc3708//bps/6q6mqDPYeev1C3k1h//lx0p7T2W2f/ekdvVIOvXHUwMDE3f7ntvV23tHnWfltFMVxyxTVkQe0sr2HTU5fxw7e0iFx1MDAxN2NcdTAwMTGvucPmhvh56Fx0rVx1MDAwNDpH+ov9L8iJ20XLiVx06WuinLidKCdcbivVKchlQGlcYqXUwPRcdTAwMDJfbrPaycc72DpcdTAwMTW9nql978nLzt2yQ1JcdTAwMTnioGRcdTAwMWWpU1x1MDAwYtxupFYvNbeD3DdcdTAwMDeAXCJcdTAwMGJANEzb4MhcdTAwMTZcXFx1MDAxM1uufPNcdTAwMTR80yGIWlx1MDAwM1x1MDAwZvB6uDVv9brn9bx8XFzroYNcdTAwMDawXHK8ajRcdTAwMDbVUbtTXHUwMDA06aEvk8XvsEFjcVtYXHUwMDA2oHRMOqXcIJtcdTAwMTdPwO748V5S7GqgXHUwMDBlXHUwMDAwXHUwMDE4SbmmXFyZXGaCNThcZlx1MDAxOH1BXGZT7lCFSoZcYsZcdTAwMDQjyYBcZlx1MDAxMG2UwzhcdTAwMDGJTYhSSo+sl1x1MDAwMkzzgmj2XHUwMDAypPo161x1MDAwMONzwWq2XHUwMDBlgNFXgWGUaaF5stZg9VF3S0ehKJSzVlx1MDAwMcbn12FrcDhccjNKcCEwL+SWXHUwMDAwXGJcdTAwMDAj2MagXHUwMDFlXHUwMDAypkdsekslgPVCJ473jvhv0t9K+r0oflV8t9lOe2lqdkFcdTAwMTSuXHUwMDEyY4Rb5snp9Ms+x1x1MDAxN3qWNIBh8HK0XHUwMDE0dnEnXHUwMDE1SpiMXHUwMDFlwKjgMGUwglx1MDAwMTJcdTAwMTHgJmPY0+LYfUEzt1x1MDAwMKByuFxiZcaRoCG9IPUhZiFOXHUwMDE5oF2zyILnkJJnrFxmeZff7yTNLi5PXCLYgNOrvd3u7dFx+aJeOjmeVrP/pc7Pt672zlx1MDAwZvC6d3+cd8PN2+rB/DiUVjzh7i+k2XnxQlx1MDAxNiaBaOtPU0M0/2IuPUTNWIgqjvKBXHUwMDAzkZZoPFx1MDAxN6LjanR5cmF0/lx1MDAwZrRWXHUwMDEyg/lbWX89k2Bvty5R9/5cdTAwMWXL4MVcbvVcdFkmS/SHXHKdXHSBjFx1MDAxNM/BI/9QWpjpk+TJlemTm6PNXHUwMDEyLdPti7vatquDcNlcdTAwMTGokIMgK2RcXFKquExcdTAwMTWm4/k+TVx1MDAxZGOsXG5cdTAwMDDQ3OiXypGU58zyjep1ZVxiVUy/XHUwMDAw/F4x0yxUrW9ZsKzW3Vx1MDAxNuKwm1x1MDAwZu7FqvVhg8aCuFCtKz6O6zKM2IRNL9bHXHUwMDBm97LCWHNcdTAwMDcpP1hcdTAwMWOPwlhcdTAwMTPqXGKhha1+XHUwMDEzolPMZr4wNlxmo1x1MDAwNWpNlN2a4agksXNcdTAwMDBqQVx1MDAxZFwiXHUwMDA0xWCj8Vx1MDAwN1LceLDIRtgpU/1cdTAwMDIludeU7OOTw2p6qlxcoTI2wOyEoFxyeCzV6GHeXHUwMDFlXHUwMDFjylx1MDAxNzNtz/GyKM5cdGpx1KlKiFFjhMM1XHUwMDAwupZUWinJzYhRb0qxXHUwMDE3+rB9jXhv0t1K+n2mSXtKivVcdTAwMDBcdTAwMDVcdTAwMTTtXHUwMDA0zZk+jqldz5elXm1cdTAwMDM2LkNZ+Ytz9/Ro2eNcdTAwMThyfMdII6XAK0+0XHUwMDFjjmNcXChcdTAwMDe4jitIhEry2ktqhTBcdTAwMDQlXHUwMDAxWfD0Qalx2bioXHUwMDA2/CvtnqhcdTAwMGa3lZ0621x1MDAwZZ4/Z/9Wup1UVsg/4YuSsrGgL1x1MDAxMlx1MDAxZkZcdTAwMTXSXHUwMDE2VJqc2rtKp7+RZfxlXla4XHUwMDAzjIO7lo6ZXHUwMDE33OcxYc+IXHUwMDE0KJhmwftcdTAwMWKesI9cdTAwMTY9YT8hc02csI+ed2eLLr6zhVx1MDAxOUzDVlx1MDAwZk9ccstcdTAwMDNSql5cdTAwMWNdRKWQ7ZQvvG+eOP9SKoBludtcdTAwMGXD9bpcdTAwMWKV669cdTAwMGZNpHNcdTAwMGUyPs24Xb+YWmJcdTAwMWJ7XHJoh1x1MDAxMW0pIVx1MDAxNUSl65TzhqZQXGbZruFcdTAwMDaZJSbr1PrsoVx1MDAxYq1cdMdcdTAwMTbI2URcXLdcdTAwMTlcdTAwMDUuoFx1MDAwZeTmXHUwMDE1bkmjT1x1MDAwMO7sPitk4UM+7O3wXHUwMDFhuez0qaTSb7tl3W5tXHUwMDA3VyGr1Fp998dOUSrJ+N2Uj1x1MDAwNHhcdTAwMTFvxcG3t0pcdTAwMWJOhcy6q33+XHUwMDA3XHUwMDExhkrQRKpcdTAwMTdcXPolXHUwMDE0cVx1MDAwMKhRQJhGRZ6TVzhx7FJoSbhBXHUwMDExh/pqhFcqXHUwMDAzXHUwMDAyMM+8wsKwubmrXHUwMDE3XHUwMDA0fifMd1ZerHNcYlx1MDAxN1ZdmelXJ1+VTndcci25n8pcdTAwMDErl1x1MDAwM6M/qkZvXHUwMDE2b11gbMWAhY5cbkQwpDU8VVa9VzlcdTAwMWElNXqytM8jXHUwMDAwMY9qTd5cdTAwMTIphyiD0TteXHUwMDFmQSCnVkPtgklbXHUwMDE2tus8XHUwMDE4KtBRXHUwMDA1JCVSXCLD2VxmJdk34ammcH5AKo5xRD1hXHUwMDEyvXlrbrauv3/8us+jq1x1MDAxYrfqXHUwMDFk7+1cdTAwMTXd47okjootlIP5X2AsI4qAyD5uRWEoI1xc2ck5JVKqeTZPvVwiRLyQp1x1MDAwMrpcdTAwMGXG2te4dW9cdTAwMTGOKkFcdTAwMTQ5KqPx04fQW6f21HOXlEo/tpplJk5O9XW9XFzz5e6yeyrHXHUwMDFjT1x1MDAxOUFMYlx1MDAwZeFcIsNcdTAwMDCEdOzDkYjUklx1MDAxMmDPm8ii7ErrvHvX5lx1MDAxMlNcdTAwMDHiqDpLXHUwMDA1fGlcXHX8o1x1MDAwM3Rx4UNrJGmM8enDqiq3dvfDm1x1MDAxZF1vymr3MvhQqvpmtsLH4vgqRUnlUKGZNMo+XHUwMDA3avg2S8GIozVFSYNcdTAwMTRcdTAwMDFkXHUwMDE2RfNjq9xcdTAwMTBHWSdcdTAwMTSA0VvTvFx0XHUwMDFi7iBcdTAwMTNcdTAwMDVqn+oh7TrQrL9yaiTmhtd43Fx1MDAwN1+Iu45Zxc9cdTAwMDE4t3Cd2lt31zuNnb1bV1x1MDAxZl/pfr9zXHUwMDFjnFx1MDAxZpr9ZVx1MDAwZq2KO0rZKVx1MDAxMeuvOlWHi52VY9RcdTAwMDP0JFx1MDAwZZpcdTAwMTIqnuWtXHUwMDBmRfmc0KpcdTAwMWNcdTAwMTR3qGONQHVl1ySPuirTjp2HQkuJoExcdTAwMTgyqqwk2FuDXHUwMDA0vEJsfbqzrjxcdTAwMTSp19xO5yzCLtdcdTAwMWXn9NBqv/JQ2Uu6Wbvxvf5GXHUwMDFls4pftiRcdTAwMTZcdTAwMDPAeplnbf75a+XXf1x1MDAwMfpa2G0ifQ==
+
+
+
+ events.Key(key="T") events.Key(key="e") events.Key(key="x") Message queue on_key(event) Event handler events.Key(key="t")
\ No newline at end of file
diff --git a/docs/images/events/queue2.excalidraw.svg b/docs/images/events/queue2.excalidraw.svg
new file mode 100644
index 000000000..d4ed6be00
--- /dev/null
+++ b/docs/images/events/queue2.excalidraw.svg
@@ -0,0 +1,16 @@
+
+
+ eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1daXPbOLb93r9cIpX+8l5Vi1xy3Fx1MDAwYlxcXHUwMDAwUzX1yrvlxI5cdTAwMTfF25splyxRiy1LskSvXf3f50JxLGohJVlL5ExUldgmaVx1MDAxMCbP3Vx1MDAwZi7++u3Dh4/RUzP8+I9cdTAwMGZcdTAwMWbDx0K+Vi228lx1MDAwZlx1MDAxZv/wx+/DVrvaqPMp6Pzcbty1XG6dKytR1Gz/488/b/Kt6zBq1vKFMLivtu/ytXZ0V6w2gkLj5s9qXHUwMDE03rT/z/+/l79cdP/ZbNxcdTAwMTSjVtC9SSYsVqNG69u9wlp4XHUwMDEz1qM2j/7//POHXHUwMDBmf3X+j82uVq2HnWs7R7tzU6D7j+416p15XCKR4tOye0G1vc53isJcIp8t8WzD7lx1MDAxOX/oY+FY1pu721x1MDAwN42709rGTqV1+bTXyHTvWqrWakfRU+3bQ8hcdTAwMTcqd63YnNpRq3FcdTAwMWSeVItR5fszi1x1MDAxZH/9vWK+XeFcdLyebjXuypV62PZ/u3w92mjmXHUwMDBi1ejJXHUwMDFmXHUwMDEz4vVovl7uXGbSPfLIP2VcdTAwMDBFYFx1MDAxZFx1MDAxOaW1QjSWXk/7XHUwMDAxMnxSKyc0WWONUYawb25rjVx1MDAxYb9cYp7b76Lz6U7uMl+4LvNcZuvF12uiVr7ebuZb/Lq61z18/6tcdTAwMDOSioxUyqFcdTAwMDDFd3u9pFx1MDAxMlbLlci/XHUwMDE2XHUwMDBiXHUwMDAxSJJSW5RGQXe27bDzZow2xlxup8zrXHQ/hWa22IHHv/tcdTAwMWZsJd9qvjy/j52pxqbvf9yIYav7y3fNYv5cdTAwMWJcdTAwMTAkXHUwMDExgjZcdTAwMWFcdTAwMTGlfT3PeLvmk/W7Wq17rFG4XHUwMDFlgp12lG9Fq9V6sVov9/9KWC8mnKnl29Fa4+amXHUwMDFh8TT2XHUwMDFi1XrUf0Vn3JVWq/FQXHTzxSEjJ55r+uG6wuQ/3e8+dOHT+eH1+3//MfTq5HfqP1x1MDAwM2+zO9xv8a9//zGZXFzHxbZPrqU1XHUwMDEy/VvrXHUwMDAyZJRgXHUwMDE3XHUwMDFmt+uHNbm/cqLXilLKp1P8urX0gk1cdTAwMTiAQaeVllx1MDAwNqxm+e5cdTAwMTVsXHUwMDE5KFx1MDAwM1JoaYGUk6J/arOTa1xmLFx0x4IpXHUwMDE0KiMsdoW2K9fGXHUwMDA1pNFJLdFcYsDYbL7LtZaSQHfVzy+5/oFynfxOO2f73+aEct1cblx1MDAwYtE3VFx1MDAwZlx1MDAxMW5cdTAwMGKq/+h34TYgyFkruiBcdTAwMTkl23pcdTAwMTez6vhuf0tcdTAwMWWXXHUwMDBln45WN6urXHUwMDBme2+TbdmPwe+/126w0zJbmy1VQGCsklpb/qe74uJHXHUwMDAwZ1x1MDAwMudcdTAwMDRcdTAwMTFYh85p0zeziUT7d1WgsKSVXHUwMDFhYrCpK1x1MDAxYa+SbFx1MDAwN0TXXHUwMDE5XCJWMNrNXnRfcfVXXGZ9L6/2+jS7cnZcdTAwMWGFZ1x1MDAwZW9Xwp2zbPSw1vxcdTAwMTiH6SveovAx+vh64u8/foZhe67+Y9xcdTAwMWJ2h/0uqDNUjqky3zPPmLhcdTAwMWIjksRdXHUwMDFhUsiuKcmx5T39MS+tvFx1MDAwYpcm71xiJlCzkvd0XHUwMDE3XVx1MDAwZpF4wH6JZ/3EXHUwMDEzVSrmc4wt8m3/w6KtdalRj46qz/7Rg+g5upm/qdY6XHUwMDBm+fVwXHUwMDA3qT7mvfdzXG4+hU//c1x1MDAxZD79819cdTAwMWbDf3383/izbYdcdTAwMWRcdTAwMDeV5+d6fnmlVi3XOyEjXHUwMDBmXHUwMDEwtnpQXHUwMDFmVTnGfb3gplosxq1ggWeU5zFb2XGsV6NVLVfr+VoudcJvt8RSOpckmyDY9+T34cZcdTAwMGagm0BQyX6y95VTKp5+NjuGtnaWXzalXHUwMDBljJLkUKFjV1x1MDAwN/pssVCBs8ZZJVxmsG+ippHN6W0xsVtG1mo5uWBOY4tLXHUwMDE2Tyh7sEVCXHUwMDFlZTZcdTAwMGLbUT17tT290fwvXHUwMDFmdpSJXHUwMDFmfsPlM/FSxtI1/TZeXHUwMDE44jBC4vg+ffpzXl49XCJS9VxiqkDNSo/MxMZrhWTi7+W/wcQ/LtrEjzCKI03845QmXHUwMDFlY2++XzSVcFx1MDAxY+lrM777fWLv7k5LVXyqf3Lbd+XqMUVN/Vx1MDAwZURTXHUwMDA11pJBpYXSZGLa6ttcYi4wXHUwMDE2vOdttXFcdTAwMTLtNLI5vY2X6KQlqWBcdTAwMGU58DT7tpYt3lZutrPQus3kSoXyVrNcdTAwMDJcdTAwMGbTm81fw85j2FG+w/BcdTAwMWIuoe9cdTAwMDAmMVx1MDAxZFxiXHUwMDAyyLDcqq5uXHUwMDFlpaDSn/PSKijWQGlcblxuXVx1MDAwMDNTULNwXHUwMDFlkDg45Hm8ISX4jp2HaNHOw1xiczvSeYimdFx1MDAxZYSEJNmUvqpsSajx81x1MDAwM6JcXCg+fd543nzOrZ6a1np0YrYuXHUwMDEzZLPQarTbmUo+KlQmrsXNXFw+Ob5cdKRcdTAwMDGSTrGEOid7xVNcdTAwMDdWXHUwMDBiw+60clx1MDAwNlx1MDAwNcr5pe/Yq1xiWFx1MDAxMtBnTaWMXHUwMDE1Sbt1OFx1MDAxMoFlh0YpQuzUXHUwMDA2+0WXWMU4K/Fcclx1MDAxOYRpRJescjSB6L5cdTAwMWS1XHUwMDA2XHUwMDEyXHUwMDEzzmA58lwimKB2/PDl7Ph+t+lobbN+vXffzl2VaDdcdTAwMDGzfbj7cWjFwFxuzViUgpW0xD6wXHUwMDAyaTYhPi5nXHUwMDE42XmCXHUwMDE1XHUwMDAzIUn74rU0zlxmMyw2IFx1MDAxMqhYj1x1MDAwMCFcdTAwMDNlXHUwMDAwrdJcIlnygcpyW5pUuIa1WrXZXHUwMDFlXG5W0olMXHUwMDA3p4W39+P7Puu3bq0sXHUwMDFh1fUoV6GV+pdqWTxfvVx1MDAwNauL83wk6MBcYumENlx1MDAwNlx1MDAxND952Vx1MDAwM1apXHUwMDAzjUaQY8xqXHUwMDA2K01Fcvi9lNegYVx1MDAxMKksMEpcdTAwMDBoR+xxgoonZ16hKiHQRMqxUlx1MDAxNYBcYjFcdTAwMTftO1RcdTAwMWRJY1x1MDAxNDtoPydUjUgsXHUwMDE2+EJcdTAwMDJpJeT4Sb6TxtZOY2vvYHf/5jh7lFx1MDAxN7lneX605GDV4K1vJzRX6ND2eekqQKk1Y4RcdTAwMDVcdTAwMTdcZsXM3dvAeimEnlx1MDAxYljRSkOCZe8nXHUwMDA1KyWnvdjYgEOYgGWSoULrRu+F1fPTs8v80VWrjodPS1x1MDAwZVYrXHUwMDAy0pbh4Yz3XHUwMDA2bS9WkVxyL1tV7SyHcYyT6VJeXHUwMDEyLtmvmlx1MDAxN1ZZliSHxPie9Wqqx0o6UbNqUFx1MDAxMlmnjFx1MDAxZmWd5MzVYSV/U9k938k837ab1y6iXHUwMDA0rL6V7ThztIKgXHUwMDAwpFJAXHUwMDA2vVbqJTFLclx1MDAwMTgvs6y1PMV5jlxcRyNcdTAwMDPHYZZX4GRUTD2+XHUwMDAyVstcdTAwMDDNNzWPXG6MjnHQvytX45xcdTAwMDWcS23l5cTQJOP9cVbVVm+fNr82M/fb59tfT7ZKZ/NMMlx1MDAwZb9hd9iX7354klx1MDAxMZO9bClYN1x1MDAxMlx1MDAxODF+TJj+mJc0x1xiUqZJmKFAWWG0L1xisveC81x1MDAwYlx1MDAwYpFGSlx1MDAxOFx1MDAwZZhcdTAwMDBcdTAwMDaLs07rd8hH8sszXHUwMDE4Y2jIXHUwMDAya1x1MDAwYqN7LkpJP+aGplx1MDAxYVH0XFz4mkmshaVe6E+WaEw3XHUwMDFh/YnG3Fx1MDAxNElFJWWSLJJcdTAwMDEhrFx1MDAxNuOHvMeZ6PK2urlXOz0pn12VVk4zN/nscjtmLFuBJasth6LaOWN7ef3SYoDs7CiUgFx1MDAxY/xOtVxc56VcdTAwMTY5xDEzgWGnT7BMKVx1MDAxZrfi8OSMXHUwMDEywnFIKzTH6U5cZjpmyidtOEpZbqlMxWryXHUwMDEylORo11x1MDAxYZRKqFx0XHUwMDAyiIddsV68P195PG89Xrebh1FUeWjN2Cmby9oy1tVWO4UgjZZcdTAwMWPi92BVkVx1MDAwZZBDXGb5Ld6FfiFasqVlUmhfTsS3xLy/1qB0zv1cdTAwMDRryyhZsI2w1lx1MDAxOFx1MDAwYuPzYS42L53UT7BfrFx1MDAxZcv1c7neLlx1MDAxZp4svVxcXHUwMDEz+Fx1MDAxNaPgWIU5xyFMb9LVSzU/dDZR5Dx+xfyoalx1MDAxOEjl2CfloE5rXHUwMDAwXHUwMDE4YoX8UiQgskpY9lx1MDAxNy1cckg1O1fOL2Waw+qUX0LtP5MuLEt4pZ2T/S9zQplcdTAwMWVBdVOJnqVcdTAwMTRoXHUwMDA1mHh9YZRor+7fXVx1MDAxY8r26flDTWy3rlx1MDAwZlx0sVx1MDAwMctcdTAwMWXlZVhjXHUwMDA2noPKVpmkYC+lN84z2lx1MDAwNb6K7UChXHUwMDE22s3Cu5yG6SZYs/ty5IKZboXWYeZi5XRtu1x1MDAwNNW7jWN+zc/H+9OTvH5ccjuPYUcloYbfsDvsd82yqIhcIpnpZm3/4S6bXHUwMDA2lNPG2lx02lWkPufl1U8yVT9ZXHUwMDFi0Kz00yyIbpI9VH415i39KH505uk90eRHWNu50+S1SF7B4pRcdTAwMTakXHUwMDEwx09LRe58y17WWpXN58+5q0+5i82tKImJsUyyyY4/kSSQVkiUvYkpPlx1MDAxMXSWt4DlmExN10dmetfBXGKNPnhcXLDnXHUwMDEwfn740l5dfb4o7aysRcdcdTAwMWKHub3bcHqj+WvYdzTsKIdk+Fxyl9AhUTpR6ZGViJMszE9/ysur8kSaynNcInCzUnkz8Ua01Vx1MDAwNMLJJc+4z9hcdTAwMWJZOO9+hP2eO+9cdTAwMWUokXfv0Fx1MDAxOHJajC+ZT1dP5d3jXG6gK2Tz+0dcctkw2fz7oN3rXHUwMDAwkP1cdTAwMDF2v1x1MDAxZItnf57SYEBWKOUkkmDJmF+eUmtcdTAwMTlcYoNgXHUwMDEwWVx1MDAxM0DM6YhcdTAwMTHvNV9iXHUwMDFjkTZcdTAwMWPokVx1MDAxOFJ+UKCs027BoYRcdTAwMDGn1Fx1MDAwNML7dty6WGewfthKUlx1MDAxYeI07pFd29a/NL9cdTAwMWWph3ZOZa5lTX6+XFy/uFh25r3HXHUwMDAwaWLAcrTvpO1cdTAwMDMsXHUwMDA0YKywXGZcdTAwMDGNen7VMq1cXKDQovJcdTAwMGLGKL6ONF7cdc5cdTAwMDFbXHUwMDEyy3hGUv1oRY7OeziSXHUwMDBiwapcdTAwMDJQM1slkkJcdTAwMGa1NpFcdTAwMWVcboJDPclcbmV8XHL7aaWZrZePi5vnj7uVtdrGp690t+QsXHUwMDA0NjGBdVx1MDAxNlx1MDAwMY10IJXp5TIri1x1MDAwMVx1MDAwZqJQa4NcdTAwMWNo4bRcXOZE4r0mzzpSgr84I4d0XHUwMDE2lFx1MDAxMFx1MDAxOKklq1/tXHUwMDFjuXjrk1dcdTAwMWFcdTAwMDKAdKhcdTAwMTesV1x1MDAxN4VVh8mpXHRcdTAwMTZRYmtcdTAwMDPjpybOro4q2Vx1MDAxM1co1Vx1MDAwYitcdTAwMDeZ3U27+1x1MDAxNZeed69cdTAwMDKPUCNAsONDivqwKlx1MDAwM9ZyymotSKrp8lx1MDAxMims+1x1MDAxOSCVpc5cdTAwMTH/XHUwMDE1uGD/fWFQdYlcdTAwMTU4VEJIXHUwMDAxMD7N8su5OVxcKa1cdTAwMWPU90pfi632Sq7cLN4tOVItXHUwMDA0WmhALaxfx1xyXHUwMDAzQFx1MDAwNb8kz1x1MDAxYlxcS1O2Yk4j3c9cdTAwMDCqRiqrLL2BKrM0QFx1MDAxZOGrJrZcdTAwMWSQmpBgolx1MDAxOOvgYCVcdTAwMTNlbr/uPt6b/U+nlXpNbL+xXHLpXCJJ9zbo8Pek0X49f1/HXCJCXHUwMDFikFGsblx1MDAxOcxg5Pz8VTRcdTAwMTSwl+GZhOBLwkNcdTAwMDCrPVx1MDAxMY1naDtsIVx1MDAxMFx1MDAwM/6qNJZxTKRcdTAwMTbMub+9P6jIkthcdTAwMTD7N7vV0+yXyu7Jp+5b6sHjJEnLmVx1MDAwZjsqaTn8ht1hX75cdTAwMWIlvHNPWpJJ5mVcdTAwMDJcdTAwMTkt0NnxbUz6Y17SrCWbj1S5VTogXCIgwYrMoJnjYlx1MDAxOVx1MDAxYSm38VYlL4LK8bFmV1xyXHUwMDE3767Hqkhv5PLLQFx1MDAxYcdxXHUwMDExsNUkNp+q56o0Mn9cdTAwMTh/zHNm84+wRlx1MDAwM2z+cIpcXKWRid1cdTAwMTaMXHUwMDA1/uBcdTAwMDTiWL86XHUwMDE3XHUwMDBlz8zuZeuomTvcKOWz0cZyu3ygfdHU8lx1MDAxN5IgXHUwMDA0qD5Z9JlcdTAwMThAJdnP8vHJVFx1MDAxZV9cbptcdTAwMWZcYtHPQrGDXHUwMDE505DxfI/hXHUwMDBiNMuqRf5ucNFcdTAwMWFcYt/01yyc6eCthptALlOhmsjmd4lcdTAwMGLAQLKDXHUwMDAziGp8mJrjzY2mOP1aKT2stHdcdTAwMTGuXHUwMDFmSup+6Vm/nZ1iiP/zvTbQ8S/0dlx1MDAwNnHCXHUwMDA1gFKC8ett3Vx1MDAxYzeUmFxym99cdTAwMGbgJP5cIv4uXHUwMDA38fdcdTAwMDex+V1ipYyjXG5jhJ2gJ8Xh5Vx1MDAxNT5cItjbp88n7UyYscfl+vrSyzVh4Fh/WVx1MDAwZehZtEH0eoNeqn3mRYBcdTAwMDZcdTAwMTNfXHUwMDA3O3suv7K+14+z7Fx1MDAxNzlcdTAwMTVPxCWS+c1ghVtpYJy8qS/FL6nunJsxnT/prXbOXHUwMDBlvM9cdMU6vVxmTsmdvKTfzcw5sFx1MDAxM3ScuXiWpcszudW42C192s/WcpWd99G7Vvt9kzjqY1x1MDAwZlxydN/CbemMX4PnwDdQ0qzyZuBhTkHLXHUwMDAz4djnXHUwMDA1WjAtb1/kLteal+p0o3L7eFx1MDAxODZcdTAwMGJPutTtstxcdTAwMDO5SbIwv4b9NeyoxNnwXHUwMDFidof9rlx1MDAwN2dofFJValwi209TYubMt4OUksZffJD+lJdWl7IvlKZLwVx1MDAxN8VnpUtnwvdcdTAwMTNcdTAwMWOzcyxml7xLV/fFv0++31xi12BcdTAwMDF8v+RilFG+i9dcdTAwMDR+XHUwMDBlbd5dXHUwMDE3zvbWqfglX4n29s/3dlx1MDAxM1uWLlx1MDAxN99cdTAwMGZE4FxmXGKjhe9MKmNdsTqRjPeE/Fx1MDAxZbdW+35mMD82rla+RYe0VnC8KmxM+mJ0P1xiXHUwMDFjz5M0XHREgYP1KIlcbv062Fx1MDAwNYuu8f06ZmVL0iuoyV3LJOtQ313WjV9B3dws2Mdy9sneX8rdtdXSefnpxC053Vx1MDAwZnyvZd+e1oKxMr4v6je8YmB8/zZcdTAwMGXBnW9cZjlHvFJcdTAwMDDI01CgXHUwMDFjuWHL6MFcdTAwMDZcdTAwMTZcdTAwMDU4w+FcdTAwMWNcdTAwMDdxclx1MDAxMK+ao1xiJFx0i6amWICZ4TWNmpKywMuT01x1MDAxY6hcdJrsrWx9Pmt8LbSL5nzncdvIjcuzXFz0XHUwMDE2tC6Qm4K+0Vwi61dcdTAwMDPot1x1MDAxMOjrXsp/f1x1MDAwMM5cbuf33o5b/1k32mV/XHUwMDA2pee/alx1MDAxYq9cdTAwMDHGqSmkpG88pFl76njm/rUntFwiYlxys3By6qKgSoksKraBrN7dXHUwMDA0u9qf4Vnt071dWa3uX1x1MDAxZdRcdTAwMWWbd4XjZpKnvixI1a7TXHUwMDE23PBLVtag6stoXHUwMDAyXHUwMDA2orPNXHUwMDE2P1x0RtN0O/KltdmdXHUwMDAxVFx02Vwiszgtmke1IKhKkbJTu2CsXHUwMDAyXHUwMDFim/FcdTAwMGJra7dnj2H2aKNw0FxcvTtcbqN2e+UmKVx1MDAwMb8sYLXsK7K2s8Yho9U521x1MDAwN1ZcYpRU7Eii9WCdikSV2md3XHUwMDA2YDVglVx1MDAxNvGC/ftcdTAwMDNrusuarFn5PVx1MDAwMitcdTAwMWRN41x1MDAwN1rR7v6FuSiXTu7yrvX5oZy5XFw3XHUwMDA3S0/665CHtGVb70j5/d178CqFsYHjqMY3aFx1MDAxMHK69oMjSH8qkMR4XHUwMDA08MyJYYtUtPRcdTAwMGK8wCm/XHUwMDE3sVSDi1RYu0jPXHUwMDFmgDm0hn45MTTJuHef39v7slx1MDAwZke3mYeHwu1D+2v1tjF97vK9XGY7KiU6/IbdYV++XHUwMDFipVx1MDAxM3BWOiFxa3KV2JBcdTAwMDVcdTAwMTjbXHUwMDFjSdP4XHUwMDBiK9Kf8pKmREHadG1gtd9Lxlx1MDAwN4ZcdTAwMWHQzrNcdTAwMTVcdTAwMWONVFx1MDAwN8O4hFx1MDAxY15r86adXHUwMDEyp7NYXHUwMDE4S5a/uS+wY1fW51x1MDAwZXhAXHUwMDE3V7UjuYSPXHUwMDBiJFx1MDAxM46wcoNkwsdp2IRp7F70q7xgXHUwMDAyPkflrPJ8eYqVK5cp5FpHn3dL9XJ5ud1JXHUwMDA2XHUwMDAzXHUwMDA3N563Yp3xLYJVv0D6XHUwMDEyhjWecKuJY/qp/MlcdTAwMTRCIYuWIa2VUsbK2HL0eEZJd1x1MDAxYTmBYdUh41x1MDAxYkl9zyhJQyB/SOwzs/XOibyj5Iy95qjUM9HHhmmzoj+3r0ru6GrroJJTh3hw/by29LSjXGaA8cuZlFx1MDAxM35xiO03XHUwMDFk6L03v+LL75dn58c7mlx0mZA63YTe5EdOyzqahPtcdTAwMWGbx0/NOvoxXFxCflx1MDAxZonuIN/MeUU3vlRHVysnbnPzZrN+9OX86Gz1dOP8aHXppdrIQHg2l187KGz/JvZcdTAwMWShdlxuXHRcdTAwMWRcdTAwMTA//DluxFwi/G5cdTAwMTVcdTAwMWOFalwi8LtFqGE2XGI5WGXH1SpU7Fx1MDAxYmhcdTAwMWOQa09qd7pni/Nfgv1cdTAwMDNcdTAwMDU7k/Ja/WfghU4o2iPK7GmbLfL9/Fx1MDAxMo2x5Xun0ag8rjdk5n5/7aZyer5xXHUwMDFh3W++jzK7XHRYvK1Fllx1MDAwZYfxXHUwMDFkKF9k3O/J6Jv+k1x1MDAxMobN99xk3PcpXHUwMDAxLYxfy2ZcdTAwMDTqYYxhwsDybKzwsZ52XHUwMDAzIaBf1sUgolx1MDAwNW9cdTAwMGVmJbpJXCLAt6PWqcSQXGL4Vfq93cavsl9X7E21JU736qtHxbtnVXu8v3xTgn2xcFx1MDAwNe3/Ut3pKY5cdTAwMDMmSTFcXK3SSrJTXHUwMDAwen6kLU9cdTAwMGLhgFx1MDAwNpTPXHUwMDEzW6GG0EJ8W1x1MDAxZOFcdTAwMTkqwneCwngg8lx1MDAxYVx1MDAxNfl9j1x1MDAwNIpcdTAwMDWnLCa1SKmATeus41x1MDAxMuvsfomCJ++MX1x1MDAwZrpoP118udtsVWBlz62V98rm4K603Fx1MDAwMTzrhYBcdTAwMTHg9SqrWCn7o1wi0lx1MDAwMVjR2fC4t0nYjNvqsL8qXHUwMDFjKE/NxyHrXHUwMDAxfTXIoNDaoensXHQ2WFxyQmfYu47npX4qoDqdXFxcdTAwMGLyPVx1MDAxNk18O4GRXHUwMDFkoGzt881u5ejE1Y+b+TD6VMmJJc808fNcdTAwMGV8Po3YzKPyPn0/Ulx1MDAxNYdcdTAwMDLWOWPQTFu4TGurMz1SwTdcdTAwMDNmQ/iTXCJVxnfY6ocqR8BW9qzaXHUwMDFkzbTbyVx1MDAxZEa3ollcXL9ccq9BrV/Jh+aSY9WpQGnyvo6RxJI7oFUx4JDUNyxjZ9HAdGo1rbHO1GBcdTAwMDVgpLr4XHUwMDFlQ+9cdTAwMGarI2ihKVxcZn5cIuArumOD9TjKStrP5chd01x1MDAxOYX526eVqkhcdTAwMDDrXHUwMDEy1dhd4DpcdTAwMTU1wSGnjL3rb5vag1xiUDFI+Jx05KZSrSNq7DqQ7GyA51OzN+KGRFhaXHUwMDA27KZ4rq5veyjt4EJr3+uCT8/DY305MbRsfV3BXHUwMDFjfcpcdTAwMWTa7fVjzK5uhZtccnszfTX8v3zYUbX74TfsXHUwMDBl+/LdwnRNYlx1MDAxZiCZzOf1IZiRQo+vZtJcdTAwMWbzslx1MDAxNu9BpatcdTAwMTlcdTAwMGWcXHUwMDE1XHUwMDA3rEJcdTAwMTjfXHUwMDFicY5qhkarmSHFe3ROk1Y/YvvQN+Vme1x1MDAxYlx1MDAwMVx0tvNGKfZcdTAwMDaI/1xi6rkqvXhcdTAwMWbFn/Scq/cj7OeQ6n00RfneQvJcdTAwMGVHXHUwMDE2pfKZj/EzrNnzfFttnn2l/f1wd0OYnZvPoV1uR1x1MDAxNYVcbsjvU+1cdTAwMTe/KG1s31xuQ41s+i1pY3zLrFx1MDAxZVx1MDAwZeaM+1x1MDAwMVx0XHUwMDAyo3zlnuLNe+OJKl+0l4o/woe6XHUwMDAzjqpB1Fx1MDAxNlx1MDAxMN5FUPXbi0X6mG82j1wiXHUwMDFlkk9/gy7Pulp8kdruMFx1MDAxZu+r4cPqsEC18/FcItBcdTAwMTFcdTAwMDBcdTAwMGay0M/5r79/+/s/t9XlXHUwMDAwIn0=
+
+
+
+ events.Key(key="e") events.Key(key="x") events.Key(key="t") T events.Key(key="x") events.Key(key="t") Te events.Key(key="t") Tex Text
\ No newline at end of file
diff --git a/docs/images/test.excalidraw.svg b/docs/images/test.excalidraw.svg
deleted file mode 100644
index 2e1b19e21..000000000
--- a/docs/images/test.excalidraw.svg
+++ /dev/null
@@ -1,16 +0,0 @@
-
-
- eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1cXFtz2shcdTAwMTJ+z69weV92q4wy90uqTp3y3Y4vcYJ9nOTslkuRXHUwMDA0yCCJlYSxSeW/n1x1MDAxNnbQXHUwMDA1JFxiXHUwMDE3m+xcdFx1MDAwZlx1MDAwZcxcZjOtnv66v+lp8vXVxsZm/NB1Nt9sbDr3ltlx7dDsb24l7XdOXHUwMDE4uYFcdTAwMGZdZPg5XG56oTVcdTAwMWPZiuNu9Ob1a89cZttO3O2YlmPcuVHP7ERxz3ZcdTAwMDPDXG68127seNG/k7/npuf8q1x1MDAxYnh2XHUwMDFjXHUwMDFh6VwiNcd24yB8XFzL6Tie48dcdTAwMTHM/l/4vLHxdfg3I13oWLHpNzvO8Fx1MDAwYsOujIBaXHUwMDE0W89cdTAwMDN/KCwnjEmmhVx1MDAxY1xycKM9WC52bOhtgMhO2pM0bV5uXHUwMDFmuHyv6+1aonvpfMDdnbdHrXTVhtvp1OOHzqMmTKvVXHUwMDBiMzJFcVx1MDAxOLSda9eOW9CPXHUwMDBi7aPvRVx1MDAwMSgh/VZcdTAwMTj0mi3fiaLcd4KuabnxQ9KG0Kj1UVx0bzbSlnv4pKSBXHUwMDA0RopwgqjGio16k+9cdTAwMGJuXGLOhUBaXHUwMDEwipDSXHUwMDA1uXaDXHUwMDBl7Fx1MDAwNMj1XHUwMDFiXHUwMDFhvlLJvphWu1x04vl2OoZZwmnwdEz/6WlcdOZcdTAwMDaC1ZEgfNTZctxmK4ZeRrChcKYncoZboFx1MDAxMGVcdTAwMTjJVKRkue6xPbSFv4pcbmyZYfdJUZtR8iEjalwi5X7RkLLGlNnk652bz5Z3KFx1MDAwZq/9vVx1MDAwYvfCa+/ti4fRXFw5yzPDMOhvjnq+Pb1LRet1bfPRnDCoXHUwMDE4M0mpRCx9oI7rt6HT73U6aVtgtVNcdTAwMGJcdTAwMWO2ftuaw/I55mWWT5hgiEvFZ7b8zifvuP+f29bhwfZpZHduoqbZqJdYfsGCZ7R7O4iT5Zdo+Fx1MDAxOGEjUTqTXHUwMDE4UUmy+kgmoFJcdTAwMWJMcc1cdTAwMDFcdTAwMWNcdTAwMTgrLVx1MDAxN7L8xvA1bvmAN1x1MDAwM1OSM++R4UOfkmNmjzVcdTAwMDUsaime2fC3z7vyulbf/9gjtUE9Olx1MDAxYSjW6E02/Ni5jzN2v/Vr2tJpc6O3Zl3w5XxKTs6MO2FcdTAwMDJcdTAwMTVbv7tcdTAwMTOssVx1MDAwNDvHJMXpNH9SreY1jaRcdTAwMTiJKofCkDY0oWwpXHUwMDBlJVx1MDAwZU0/6pohXHUwMDAwd4JTkWlcdTAwMTBcdTAwMWY5XHUwMDEzQsdcdTAwMWNcdGNcdTAwMDKEwSztWZojWaY9pttcdTAwMWX4cd1cdTAwMWRcZkNcdTAwMTTKtVx1MDAxZZie23nI7dzQUEHS3Y5rtX//I6vNyIFFh5Ypc8O3O24zseVNXHUwMDBiXHUwMDFlw1x0c2ZcdTAwMWW7QD9HXHUwMDAzPNe2s2HVXHUwMDAyXHUwMDE5TJgzPJ4lXHUwMDFjXHUwMDA2odt0fbNzWVx1MDAxMLFcdTAwMTJ4tmt6gW9Pwp6kpaFcdTAwMWMzpVx04lx1MDAxOM+OvV3zdK/zaad5Ojij5Gj/4vYqeLDWXHUwMDFke4pcdTAwMWFcdTAwMTJcdTAwMTGqIFxcM8SIIDnoccpcclwiXHUwMDE1XHUwMDE1QmHOJCeLQO83zE3zy4RYTjJcdTAwMTBcdTAwMWLBXHUwMDBlc1iaXHUwMDE3qO13XHUwMDAwckIw1oiuXHUwMDAwgFVBjO/Qh1x1MDAwYuo1dunpgWbNt1x1MDAwN/fbf6PFY+PPMu20kDt5wfVcdTAwMGK5gpaGXFzBXGLCcHSlM6O+WsvrinpViXpcdTAwMDVcZlx1MDAxZXGKtYbeXHUwMDA1UV9cdTAwMTlwXHSegHwmingnICvSROLlw3194u1OL45cdTAwMDP/T1x1MDAxZqyh6cRcdTAwMTPDLkO5by0t7E6JXFzFsFuQtFx1MDAxMoOVR2mge6RcZolcdTAwMWN8vNSa6JmReGH3XHUwMDBl6M6gf3c5XHUwMDE43Hw6vYvPXHUwMDFh+4MlI9E2o9ZyT9NMXHUwMDEwQ1x1MDAwYo0pXHUwMDEyXHUwMDE0QizOIVx1MDAxMSNuMKmRhFxijCTYpFhcdTAwMTlcdTAwMTTnOVBDbFx1MDAxNpLoTL7jWcJwYH48OlwiXHUwMDE3ylxud+JQmuYh6tTdxePliqalvcG7XGLdxadcdTAwMTdn9t/xp+7JzUldzpb3elx0cVx1MDAxN0jTvYS4S592XHUwMDFhyZm84PqRXHUwMDFjnUlIXHUwMDE3zzZKXGKqMdKzZ+ir1bymLIdcdFnhWqkwXHUwMDE4XHUwMDE2/DlcXOusaVx1MDAwNU1cdCNcbqXb8lx1MDAwZqQ5L5FWmMJcZuZKK5ThXHUwMDBlk8xdT1x1MDAxMXj0kXLr2UnN/Ye9Njras9TliXN7ftmv+WK3M1x1MDAxZvCKNH6mK1x1MDAwMjJcdTAwMWbyXHUwMDEwMlx1MDAwMDJUTUJcdTAwMWWc6lxy0IKmijA4XyjEXHUwMDE3QV5pVoFiZEglleCMgN7lOFx1MDAwNFx1MDAxOTUoQnLSXHUwMDE1XHUwMDE5ZUpjLl9cdTAwMDCJakEkYmVcdTAwMTBKwMaUhpMspngyMOlcdTAwMTgwbaexXHUwMDEx+DfW0PhcdTAwMDGSja1ccudcdTAwMGWk/uPNn34yMGkyXHUwMDFjz41/f+T/xkVcYo/s2JOhTPW4bnOY7jiNuFx1MDAwMtFx0C2Dc04hRezO/1x1MDAxNJVof6Q6XHUwMDEz4C4zhlVAu6REXG6Wtf5pYK/mXj9cdTAwMDR2Vlx1MDAwNvaKKDtcdTAwMWbW4WRuKFxyXHUwMDA3dCmxUkk2IYd2XHUwMDA2KMNJUoUo0EY26i1cdTAwMTHrcHAxNFx1MDAwMVmFZsOXXHUwMDE4RzvF4HbgtFx1MDAwMkMkXHUwMDE4Jlx1MDAxYsO8IFxmXHUwMDFjNKVznGaGYj53+I1iM4x3XFzfdv0mdKYsXHUwMDE2kG71knVcdTAwMTFsXGbDmHJMmaCY8ZH2k4czu4mRXHUwMDFhikiKYVxcctGU2byNUYnIcUWNxtPgXHUwMDExmd50fHuKSFx1MDAxY3aHMVwiidBcdTAwMTJcXCxcdTAwMWVcdTAwMTOJIFx1MDAwM3OuMIfdSl7p8bIo0+S4PiZTx4zi3cBcdTAwMDPQg+YvXHUwMDAy14+LXHUwMDFhXHUwMDFlqnI7wXjLMcd8XGY8U7av6FxmusmM+UNr+m4jRcvww+j9X1tcdTAwMTNHU2RcYlxim1x1MDAwNKnEXHUwMDE0KeEq+/VcdTAwMWHlXHUwMDA2hm1cdTAwMDKrUYRKjjCfOiE1OOwuelImXHUwMDEy+fmQNFx1MDAxMCFcdTAwMTjiMWKJwqdNV460x/mKIEvne5X994dvSUlpuVx1MDAxMeZCSs4on73q4lx1MDAxM5f1xsByXCJzr/5esr633W/K5zvNzOdnXHUwMDEzzUtNhUZcZiVcdTAwMWEm+VvSXHUwMDFh0Fx1MDAxZMIoQIvDMYLTXHUwMDA172pK6y4yXHUwMDE5u9S1jmVsXHUwMDE52FxiXHUwMDAwWM9xQfNcIr40e5RRudaKo8xcdTAwMTlIbDadaFwiXHUwMDAxembeM5KlXHUwMDEyXpXZWEZKk7FcdTAwMTBcdTAwMThcdTAwMTKvrWZPXHUwMDE4nLv2W7ttdY/fXHUwMDFlXHUwMDFk9z427XpcdTAwMTddX6x7wkBx8L5cXFBEaUJoRFx1MDAxZWFCXHUwMDFhVEhcdTAwMDRndFxyzFbjXCLFesmSPiySolx1MDAwNMnlM6diV5UtXHUwMDFjXHUwMDFjbL/r35xfvcdXTbone6dcdTAwMGY1b8ak6fc4s0Q3UYmpivpcdTAwMDIlyqNcdTAwMTbTXHUwMDEwblx1MDAwNVwis0et41x1MDAwZjuHjasjtN9Q+/zgeF9fb3/21lx1MDAxZVJMXHUwMDFhXHUwMDA0XHUwMDFlXHUwMDE0I4jQmst8lSynwoCDqqSKsmHQWsnp4MfrXHUwMDBiNEXAcTh/5vqCL6fb6KRR+0y9a+fgrFY/uLliavFcdTAwMWP5//m00zL6k1x1MDAxN3w5h1LGgWV5Rp8gXHUwMDAydJyo2VNcctVaXldnwkmFM1x1MDAwMWdqXGLYXHUwMDExiMxCLepMfrxsYTyhT1x04kIh9Y/O59et0HH8Z07oT1x0hUVyPJJxfnJcZiGqXGZ8XHUwMDEwvjjnmMxOju2GXGI+P7iXtzfmg31tXtyG5u1RXHT45qv6Xz70hDKIguMnREyFpc4n+ZKafyUo04pcYqqUWugubak1/5zAyYVKulx1MDAwMlxmVlx1MDAwNbGT5lm/drh31eN3l/37y755f2e+XTw2/pp2XHUwMDE1004jXGKTXHUwMDE3XFxDglCeJKOE0iQszk5cdTAwMTCqtbyuXHUwMDA0QdJcbi/FMEoupfTISy10XHUwMDE5sYwrf1x1MDAwNa5cdM5cdTAwMTl4XHUwMDA1v0haXHUwMDFmhpC/aHtmpjAl1E4ubczIOj9jwFx1MDAxNJVcdTAwMTdcdTAwMDIgzZRcdTAwMTCEzl5nbHnv2uK8fflBvP9cdTAwMTjX1Oll6513+Fx1MDAxM1Q3MoNzklxcXHUwMDA3XGJMeeZcdTAwMTczQ9qguCGRgsM2eKfkyn11eJyDOihcdPRcdTAwMWTrVVx1MDAxNFx1MDAwMVSFN1prvI/FXHSY+cdcdTAwMGb9Qe3Q69LPrcWj5qqmXVF144rEXVW+8ifbtGVPO41BTV5w/Vx1MDAxOFx1MDAxNCa69Fx1MDAwZVx1MDAwNIOL0ljMzqCqtbymXGaKXHRd4bBcdTAwMTlcdTAwMTZcdTAwMDZmXFw9g8OejUBJrSWRmv9cIlCrXCJQU3jHYlx1MDAwNKq0rFxuXHUwMDEzXFxcbkSJwDLZXHUwMDBmUKfqy6Q1LatcdTAwMTKaXHUwMDFiYGZcIvlcdCrwXHUwMDEwVKyqwlx1MDAwNsFMSUE5YZyzxTIuK62r4oiQ5P+EmePXW+tQV1UsXHUwMDA1mlLeXHUwMDA0XHUwMDBiI6ZcdTAwMThcdTAwMDFcdTAwMWIlmVx1MDAwM+jGqLqJXHUwMDE4VFx1MDAwMC3mICBcdTAwMDVBOctcZslVN02+Qn9cdTAwMWH8q7rpccL1rG569bTCptnt1mMwzJG1gO279lNcdTAwMDRIt2HzznX6O+Wp0FdPXHUwMDFinvgqJ9mMr99efftcdTAwMWZFQFx1MDAxMlx1MDAxYyJ9
-
-
-
- Click() Button Widget Click() def on_click(self, event): self.emit(Button.Pressed) Messages Screen() Button.Pressed() Button.Pressed()
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
index 37a32dd30..a8b17e54f 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -59,7 +59,7 @@ Textual is a framework for building applications that run within your terminal.
-```{.textual path="examples/calculator.py" columns=100 lines=40}
+```{.textual path="examples/calculator.py" columns=100 lines=41 press="3,.,1,4,5,9,2,_,_"}
```
@@ -70,6 +70,9 @@ Textual is a framework for building applications that run within your terminal.
```{.textual path="docs/examples/tutorial/stopwatch.py" press="tab,enter,_,_"}
```
+```{.textual path="docs/examples/guide/layout/combining_layouts.py"}
+```
+
```{.textual path="docs/examples/app/widgets01.py"}
```
diff --git a/docs/reference/message.md b/docs/reference/message.md
new file mode 100644
index 000000000..fcb6f76c3
--- /dev/null
+++ b/docs/reference/message.md
@@ -0,0 +1 @@
+::: textual.message.Message
diff --git a/docs/reference/static.md b/docs/reference/static.md
new file mode 100644
index 000000000..709b442ef
--- /dev/null
+++ b/docs/reference/static.md
@@ -0,0 +1 @@
+::: textual.widgets.Static
diff --git a/docs/tutorial.md b/docs/tutorial.md
index 86cb2ee1a..6a62b427e 100644
--- a/docs/tutorial.md
+++ b/docs/tutorial.md
@@ -6,7 +6,7 @@ By the end of this page you should have a solid understanding of app development
!!! quote
- I've always thought the secret sauce in making a popular framework is for it to be fun.
+ If you want people to build things, make it fun.
— **Will McGugan** (creator of Rich and Textual)
@@ -329,7 +329,7 @@ The `on_button_pressed` method is an *event handler*. Event handlers are methods
If you run "stopwatch04.py" now you will be able to toggle between the two states by clicking the first button:
-```{.textual path="docs/examples/tutorial/stopwatch04.py" title="stopwatch04.py" press="tab,tab,tab,enter,_,_"}
+```{.textual path="docs/examples/tutorial/stopwatch04.py" title="stopwatch04.py" press="tab,tab,tab,_,enter,_,_,_"}
```
## Reactive attributes
diff --git a/examples/code_browser.css b/examples/code_browser.css
index aca48c127..e342b7a00 100644
--- a/examples/code_browser.css
+++ b/examples/code_browser.css
@@ -16,10 +16,6 @@ CodeBrowser.-show-tree #tree-view {
background: $surface;
}
-CodeBrowser{
- background: $background;
-}
-
DirectoryTree {
padding-right: 1;
padding-right: 1;
diff --git a/mkdocs.yml b/mkdocs.yml
index ee8bb75cc..92829cf76 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -92,16 +92,20 @@ nav:
- "widgets/text_input.md"
- "widgets/tree_control.md"
- Reference:
- - "reference/index.md"
- "reference/app.md"
- "reference/button.md"
- "reference/color.md"
- "reference/dom_node.md"
- "reference/events.md"
- "reference/geometry.md"
+ - "reference/index.md"
- "reference/message_pump.md"
- - "reference/timer.md"
+ - "reference/message.md"
- "reference/query.md"
+ - "reference/reactive.md"
+ - "reference/screen.md"
+ - "reference/static.md"
+ - "reference/timer.md"
- "reference/widget.md"
diff --git a/old examples/README.md b/old examples/README.md
deleted file mode 100644
index 0a60ffba4..000000000
--- a/old examples/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-These examples probably don't rub. We will be back-porting them to the examples dir
-
-# Examples
-
-Run any of these examples to demonstrate a Textual features.
-
-The example code will generate a log file called "textual.log". Tail this file to gain insight in to what Textual is doing.
-
-```
-tail -f textual
-```
diff --git a/old examples/animation.py b/old examples/animation.py
deleted file mode 100644
index 1fbff9e9d..000000000
--- a/old examples/animation.py
+++ /dev/null
@@ -1,38 +0,0 @@
-from textual.app import App
-from textual.reactive import Reactive
-from textual.widgets import Footer, Placeholder
-
-
-class SmoothApp(App):
- """Demonstrates smooth animation. Press 'b' to see it in action."""
-
- async def on_load(self) -> None:
- """Bind keys here."""
- await self.bind("b", "toggle_sidebar", "Toggle sidebar")
- await self.bind("q", "quit", "Quit")
-
- show_bar = Reactive(False)
-
- def watch_show_bar(self, show_bar: bool) -> None:
- """Called when show_bar changes."""
- self.bar.animate("layout_offset_x", 0 if show_bar else -40)
-
- def action_toggle_sidebar(self) -> None:
- """Called when user hits 'b' key."""
- self.show_bar = not self.show_bar
-
- async def on_mount(self) -> None:
- """Build layout here."""
- footer = Footer()
- self.bar = Placeholder(name="left")
-
- await self.screen.dock(footer, edge="bottom")
- await self.screen.dock(Placeholder(), Placeholder(), edge="top")
- await self.screen.dock(self.bar, edge="left", size=40, z=1)
-
- self.bar.layout_offset_x = -40
-
- # self.set_timer(10, lambda: self.action("quit"))
-
-
-SmoothApp.run(log_path="textual.log")
diff --git a/old examples/big_table.py b/old examples/big_table.py
deleted file mode 100644
index 7bfc428d7..000000000
--- a/old examples/big_table.py
+++ /dev/null
@@ -1,33 +0,0 @@
-from rich.table import Table
-
-from textual import events
-from textual.app import App
-from textual.widgets import ScrollView
-
-
-class MyApp(App):
- """An example of a very simple Textual App"""
-
- async def on_load(self, event: events.Load) -> None:
- await self.bind("q", "quit", "Quit")
-
- async def on_mount(self, event: events.Mount) -> None:
-
- self.body = body = ScrollView(auto_width=True)
-
- await self.screen.dock(body)
-
- async def add_content():
- table = Table(title="Demo")
-
- for i in range(20):
- table.add_column(f"Col {i + 1}", style="magenta")
- for i in range(100):
- table.add_row(*[f"cell {i},{j}" for j in range(20)])
-
- await body.update(table)
-
- await self.call_later(add_content)
-
-
-MyApp.run(title="Simple App", log_path="textual.log")
diff --git a/old examples/borders.css b/old examples/borders.css
deleted file mode 100644
index f27374927..000000000
--- a/old examples/borders.css
+++ /dev/null
@@ -1,59 +0,0 @@
-Screen {
- /* text-background: #212121; */
-}
-
-#borders {
- layout: vertical;
- background: #212121;
- overflow-y: scroll;
-}
-
-Lorem.border {
- height: 12;
- margin: 2 4;
- background: #303f9f;
-}
-
-Lorem.round {
- border: round #8bc34a;
-}
-
-Lorem.solid {
- border: solid #8bc34a;
-}
-
-Lorem.double {
- border: double #8bc34a;
-}
-
-Lorem.dashed {
- border: dashed #8bc34a;
-}
-
-Lorem.heavy {
- border: heavy #8bc34a;
-}
-
-Lorem.inner {
- border: inner #8bc34a;
-}
-
-Lorem.outer {
- border: outer #8bc34a;
-}
-
-Lorem.hkey {
- border: hkey #8bc34a;
-}
-
-Lorem.vkey {
- border: vkey #8bc34a;
-}
-
-Lorem.tall {
- border: tall #8bc34a;
-}
-
-Lorem.wide {
- border: wide #8bc34a;
-}
diff --git a/old examples/borders.py b/old examples/borders.py
deleted file mode 100644
index 62e4d296e..000000000
--- a/old examples/borders.py
+++ /dev/null
@@ -1,57 +0,0 @@
-from rich.padding import Padding
-from rich.style import Style
-from rich.text import Text
-
-from textual.app import App
-from textual.renderables.gradient import VerticalGradient
-from textual.widget import Widget
-
-lorem = Text.from_markup(
- """[#C5CAE9]Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """,
- justify="full",
-)
-
-
-class Lorem(Widget):
- def render(self) -> Text:
- return Padding(lorem, 1)
-
-
-class Background(Widget):
- def render(self):
- return VerticalGradient("#212121", "#212121")
-
-
-class BordersApp(App):
- """Sandbox application used for testing/development by Textual developers"""
-
- def on_load(self):
- self.bind("q", "quit", "Quit")
-
- def on_mount(self):
- """Build layout here."""
-
- borders = [
- Lorem(classes={"border", border})
- for border in (
- "round",
- "solid",
- "double",
- "dashed",
- "heavy",
- "inner",
- "outer",
- "hkey",
- "vkey",
- "tall",
- "wide",
- )
- ]
- borders_view = Background(*borders)
- borders_view.show_vertical_scrollbar = True
-
- self.mount(borders=borders_view)
-
-
-app = BordersApp(css_path="borders.css", log_path="textual.log")
-app.run()
diff --git a/old examples/calculator.py b/old examples/calculator.py
deleted file mode 100644
index 7f4bbe3cc..000000000
--- a/old examples/calculator.py
+++ /dev/null
@@ -1,216 +0,0 @@
-"""
-
-A Textual app to create a fully working calculator, modelled after MacOS Calculator.
-
-"""
-
-from decimal import Decimal
-
-from rich.align import Align
-from rich.console import Console, ConsoleOptions, RenderResult, RenderableType
-from rich.padding import Padding
-from rich.style import Style
-from rich.text import Text
-
-from textual.app import App
-from textual.reactive import Reactive
-from textual.views import GridView
-from textual.widget import Widget
-from textual.widgets import Button
-
-try:
- from pyfiglet import Figlet
-except ImportError:
- print("Please install pyfiglet to run this example")
- raise
-
-
-class FigletText:
- """A renderable to generate figlet text that adapts to fit the container."""
-
- def __init__(self, text: str) -> None:
- self.text = text
-
- def __rich_console__(
- self, console: Console, options: ConsoleOptions
- ) -> RenderResult:
- """Build a Rich renderable to render the Figlet text."""
- size = min(options.max_width / 2, options.max_height)
- if size < 4:
- yield Text(self.text, style="bold")
- else:
- if size < 7:
- font_name = "mini"
- elif size < 8:
- font_name = "small"
- elif size < 10:
- font_name = "standard"
- else:
- font_name = "big"
- font = Figlet(font=font_name, width=options.max_width)
- yield Text(font.renderText(self.text).rstrip("\n"), style="bold")
-
-
-class Numbers(Widget):
- """The digital display of the calculator."""
-
- value = Reactive("0")
-
- def render(self) -> RenderableType:
- """Build a Rich renderable to render the calculator display."""
- return Padding(
- Align.right(FigletText(self.value), vertical="middle"),
- (0, 1),
- style="white on rgb(51,51,51)",
- )
-
-
-class Calculator(GridView):
- """A working calculator app."""
-
- DARK = "white on rgb(51,51,51)"
- LIGHT = "black on rgb(165,165,165)"
- YELLOW = "white on rgb(255,159,7)"
-
- BUTTON_STYLES = {
- "AC": LIGHT,
- "C": LIGHT,
- "+/-": LIGHT,
- "%": LIGHT,
- "/": YELLOW,
- "X": YELLOW,
- "-": YELLOW,
- "+": YELLOW,
- "=": YELLOW,
- }
-
- display = Reactive("0")
- show_ac = Reactive(True)
-
- def watch_display(self, value: str) -> None:
- """Called when self.display is modified."""
- # self.numbers is a widget that displays the calculator result
- # Setting the attribute value changes the display
- # This allows us to write self.display = "100" to update the display
- self.numbers.value = value
-
- def compute_show_ac(self) -> bool:
- """Compute show_ac reactive value."""
- # Condition to show AC button over C
- return self.value in ("", "0") and self.display == "0"
-
- def watch_show_ac(self, show_ac: bool) -> None:
- """When the show_ac attribute change we need to update the buttons."""
- # Show AC and hide C or vice versa
- self.c.display = not show_ac
- self.ac.display = show_ac
-
- def on_mount(self) -> None:
- """Event when widget is first mounted (added to a parent view)."""
-
- # Attributes to store the current calculation
- self.left = Decimal("0")
- self.right = Decimal("0")
- self.value = ""
- self.operator = "+"
-
- # The calculator display
- self.numbers = Numbers()
- self.numbers.style_border = "bold"
-
- def make_button(text: str, style: str) -> Button:
- """Create a button with the given Figlet label."""
- return Button(FigletText(text), style=style, name=text)
-
- # Make all the buttons
- self.buttons = {
- name: make_button(name, self.BUTTON_STYLES.get(name, self.DARK))
- for name in "+/-,%,/,7,8,9,X,4,5,6,-,1,2,3,+,.,=".split(",")
- }
-
- # Buttons that have to be treated specially
- self.zero = make_button("0", self.DARK)
- self.ac = make_button("AC", self.LIGHT)
- self.c = make_button("C", self.LIGHT)
- self.c.display = False
-
- # Set basic grid settings
- self.grid.set_gap(2, 1)
- self.grid.set_gutter(1)
- self.grid.set_align("center", "center")
-
- # Create rows / columns / areas
- self.grid.add_column("col", max_size=30, repeat=4)
- self.grid.add_row("numbers", max_size=15)
- self.grid.add_row("row", max_size=15, repeat=5)
- self.grid.add_areas(
- clear="col1,row1",
- numbers="col1-start|col4-end,numbers",
- zero="col1-start|col2-end,row5",
- )
- # Place out widgets in to the layout
- self.grid.place(clear=self.c)
- self.grid.place(
- *self.buttons.values(), clear=self.ac, numbers=self.numbers, zero=self.zero
- )
-
- def handle_button_pressed(self, message: ButtonPressed) -> None:
- """A message sent by the button widget"""
-
- assert isinstance(message.sender, Button)
- button_name = message.sender.name
-
- def do_math() -> None:
- """Does the math: LEFT OPERATOR RIGHT"""
- self.log(self.left, self.operator, self.right)
- try:
- if self.operator == "+":
- self.left += self.right
- elif self.operator == "-":
- self.left -= self.right
- elif self.operator == "/":
- self.left /= self.right
- elif self.operator == "X":
- self.left *= self.right
- self.display = str(self.left)
- self.value = ""
- self.log("=", self.left)
- except Exception:
- self.display = "Error"
-
- if button_name.isdigit():
- self.display = self.value = self.value.lstrip("0") + button_name
- elif button_name == "+/-":
- self.display = self.value = str(Decimal(self.value or "0") * -1)
- elif button_name == "%":
- self.display = self.value = str(Decimal(self.value or "0") / Decimal(100))
- elif button_name == ".":
- if "." not in self.value:
- self.display = self.value = (self.value or "0") + "."
- elif button_name == "AC":
- self.value = ""
- self.left = self.right = Decimal(0)
- self.operator = "+"
- self.display = "0"
- elif button_name == "C":
- self.value = ""
- self.display = "0"
- elif button_name in ("+", "-", "/", "X"):
- self.right = Decimal(self.value or "0")
- do_math()
- self.operator = button_name
- elif button_name == "=":
- if self.value:
- self.right = Decimal(self.value)
- do_math()
-
-
-class CalculatorApp(App):
- """The Calculator Application"""
-
- async def on_mount(self) -> None:
- """Mount the calculator widget."""
- await self.screen.dock(Calculator())
-
-
-CalculatorApp.run(title="Calculator Test", log_path="textual.log")
diff --git a/old examples/code_viewer.py b/old examples/code_viewer.py
deleted file mode 100644
index 6c9e4ce91..000000000
--- a/old examples/code_viewer.py
+++ /dev/null
@@ -1,70 +0,0 @@
-import os
-import sys
-from rich.console import RenderableType
-
-from rich.syntax import Syntax
-from rich.traceback import Traceback
-
-from textual.app import App
-from textual.widgets import Header, Footer, FileClick, ScrollView, DirectoryTree
-
-
-class MyApp(App):
- """An example of a very simple Textual App"""
-
- async def on_load(self) -> None:
- """Sent before going in to application mode."""
-
- # Bind our basic keys
- await self.bind("b", "view.toggle('sidebar')", "Toggle sidebar")
- await self.bind("q", "quit", "Quit")
-
- # Get path to show
- try:
- self.path = sys.argv[1]
- except IndexError:
- self.path = os.path.abspath(
- os.path.join(os.path.basename(__file__), "../../")
- )
-
- async def on_mount(self) -> None:
- """Call after terminal goes in to application mode"""
-
- # Create our widgets
- # In this a scroll view for the code and a directory tree
- self.body = ScrollView()
- self.directory = DirectoryTree(self.path, "Code")
-
- # Dock our widgets
- await self.screen.dock(Header(), edge="top")
- await self.screen.dock(Footer(), edge="bottom")
-
- # Note the directory is also in a scroll view
- await self.screen.dock(
- ScrollView(self.directory), edge="left", size=48, name="sidebar"
- )
- await self.screen.dock(self.body, edge="top")
-
- async def handle_file_click(self, message: FileClick) -> None:
- """A message sent by the directory tree when a file is clicked."""
-
- syntax: RenderableType
- try:
- # Construct a Syntax object for the path in the message
- syntax = Syntax.from_path(
- message.path,
- line_numbers=True,
- word_wrap=True,
- indent_guides=True,
- theme="monokai",
- )
- except Exception:
- # Possibly a binary file
- # For demonstration purposes we will show the traceback
- syntax = Traceback(theme="monokai", width=None, show_locals=True)
- self.app.sub_title = os.path.basename(message.path)
- await self.body.update(syntax)
-
-
-# Run our app class
-MyApp.run(title="Code Viewer", log_path="textual.log")
diff --git a/old examples/colours.txt b/old examples/colours.txt
deleted file mode 100644
index c96d59ffd..000000000
--- a/old examples/colours.txt
+++ /dev/null
@@ -1,10 +0,0 @@
-header blue white on #173f5f
-
-sidebar #09312e on #3caea3
-sidebar border #09312e
-
-content blue white #20639b
-content border #0f2b41
-
-footer border #0f2b41
-footer yellow #3a3009 on #f6d55c;
diff --git a/old examples/easing.py b/old examples/easing.py
deleted file mode 100644
index e70620e05..000000000
--- a/old examples/easing.py
+++ /dev/null
@@ -1,45 +0,0 @@
-from textual._easing import EASING
-from textual.app import App
-from textual.reactive import Reactive
-
-from textual.views import DockView
-from textual.widgets import Placeholder, TreeControl, ScrollView, TreeClick
-
-
-class EasingApp(App):
- """An app do demonstrate easing."""
-
- side = Reactive(False)
- easing = Reactive("linear")
-
- def watch_side(self, side: bool) -> None:
- """Animate when the side changes (False for left, True for right)."""
- width = self.easing_view.outer_size.width
- animate_x = (width - self.placeholder.outer_size.width) if side else 0
- self.placeholder.animate(
- "layout_offset_x", animate_x, easing=self.easing, duration=1
- )
-
- async def on_mount(self) -> None:
- """Called when application mode is ready."""
-
- self.placeholder = Placeholder()
- self.easing_view = DockView()
- self.placeholder.style = "white on dark_blue"
-
- tree = TreeControl("Easing", {})
- for easing_key in sorted(EASING.keys()):
- await tree.add(tree.root.id, easing_key, {"easing": easing_key})
- await tree.root.expand()
-
- await self.screen.dock(ScrollView(tree), edge="left", size=32)
- await self.screen.dock(self.easing_view)
- await self.easing_view.dock(self.placeholder, edge="left", size=32)
-
- async def handle_tree_click(self, message: TreeClick[dict]) -> None:
- """Called in response to a tree click."""
- self.easing = message.node.data.get("easing", "linear")
- self.side = not self.side
-
-
-EasingApp().run(log_path="textual.log")
diff --git a/old examples/example.css b/old examples/example.css
deleted file mode 100644
index 2ccd53034..000000000
--- a/old examples/example.css
+++ /dev/null
@@ -1,34 +0,0 @@
-App > View {
- layout: dock;
- docks: side=left/1;
-}
-
-#header {
- text: on #173f5f;
- height: 3;
- border: hkey white;
-}
-
-#content {
- text: on #20639b;
-}
-
-#footer {
- height: 3;
- border-top: hkey #0f2b41;
- text: #3a3009 on #f6d55c;
-}
-
-#sidebar {
- text: #09312e on #3caea3;
- dock: side;
- width: 30;
- border-right: outer #09312e;
- offset-x: -100%;
- transition: offset 400ms in_out_cubic;
-}
-
-#sidebar.-active {
- offset-x: 0;
- transition: offset 400ms in_out_cubic;
-}
diff --git a/old examples/grid.py b/old examples/grid.py
deleted file mode 100644
index 23873c406..000000000
--- a/old examples/grid.py
+++ /dev/null
@@ -1,34 +0,0 @@
-from textual.app import App
-from textual.widgets import Placeholder
-
-
-class GridTest(App):
- async def on_mount(self) -> None:
- """Make a simple grid arrangement."""
-
- grid = await self.screen.dock_grid(edge="left", name="left")
-
- grid.add_column(fraction=1, name="left", min_size=20)
- grid.add_column(size=30, name="center")
- grid.add_column(fraction=1, name="right")
-
- grid.add_row(fraction=1, name="top", min_size=2)
- grid.add_row(fraction=2, name="middle")
- grid.add_row(fraction=1, name="bottom")
-
- grid.add_areas(
- area1="left,top",
- area2="center,middle",
- area3="left-start|right-end,bottom",
- area4="right,top-start|middle-end",
- )
-
- grid.place(
- area1=Placeholder(name="area1"),
- area2=Placeholder(name="area2"),
- area3=Placeholder(name="area3"),
- area4=Placeholder(name="area4"),
- )
-
-
-GridTest.run(title="Grid Test", log_path="textual.log")
diff --git a/old examples/grid_auto.py b/old examples/grid_auto.py
deleted file mode 100644
index 7a738670a..000000000
--- a/old examples/grid_auto.py
+++ /dev/null
@@ -1,22 +0,0 @@
-from textual.app import App
-from textual import events
-from textual.widgets import Placeholder
-
-
-class GridTest(App):
- async def on_mount(self, event: events.Mount) -> None:
- """Create a grid with auto-arranging cells."""
-
- grid = await self.screen.dock_grid()
-
- grid.add_column("col", fraction=1, max_size=20)
- grid.add_row("row", fraction=1, max_size=10)
- grid.set_repeat(True, True)
- grid.add_areas(center="col-2-start|col-4-end,row-2-start|row-3-end")
- grid.set_align("stretch", "center")
-
- placeholders = [Placeholder() for _ in range(20)]
- grid.place(*placeholders, center=Placeholder())
-
-
-GridTest.run(title="Grid Test", log_path="textual.log")
diff --git a/old examples/richreadme.md b/old examples/richreadme.md
deleted file mode 100644
index 880d2544d..000000000
--- a/old examples/richreadme.md
+++ /dev/null
@@ -1,444 +0,0 @@
-[](https://pepy.tech/project/rich)
-[](https://badge.fury.io/py/rich)
-[](https://codecov.io/gh/willmcgugan/rich)
-[](https://www.willmcgugan.com/tag/rich/)
-[](https://twitter.com/willmcgugan)
-
-
-
-[中文 readme](https://github.com/willmcgugan/rich/blob/master/README.cn.md) • [Lengua española readme](https://github.com/willmcgugan/rich/blob/master/README.es.md) • [Deutsche readme](https://github.com/willmcgugan/rich/blob/master/README.de.md) • [Läs på svenska](https://github.com/willmcgugan/rich/blob/master/README.sv.md) • [日本語 readme](https://github.com/willmcgugan/rich/blob/master/README.ja.md) • [한국어 readme](https://github.com/willmcgugan/rich/blob/master/README.kr.md)
-
-Rich is a Python library for _rich_ text and beautiful formatting in the terminal.
-
-The [Rich API](https://rich.readthedocs.io/en/latest/) makes it easy to add color and style to terminal output. Rich can also render pretty tables, progress bars, markdown, syntax highlighted source code, tracebacks, and more — out of the box.
-
-
-
-For a video introduction to Rich see [calmcode.io](https://calmcode.io/rich/introduction.html) by [@fishnets88](https://twitter.com/fishnets88).
-
-See what [people are saying about Rich](https://www.willmcgugan.com/blog/pages/post/rich-tweets/).
-
-## Compatibility
-
-Rich works with Linux, OSX, and Windows. True color / emoji works with new Windows Terminal, classic terminal is limited to 16 colors. Rich requires Python 3.6.1 or later.
-
-Rich works with [Jupyter notebooks](https://jupyter.org/) with no additional configuration required.
-
-## Installing
-
-Install with `pip` or your favorite PyPi package manager.
-
-```
-pip install rich
-```
-
-Run the following to test Rich output on your terminal:
-
-```
-python -m rich
-```
-
-## Rich Print
-
-To effortlessly add rich output to your application, you can import the [rich print](https://rich.readthedocs.io/en/latest/introduction.html#quick-start) method, which has the same signature as the builtin Python function. Try this:
-
-```python
-from rich import print
-
-print("Hello, [bold magenta]World[/bold magenta]!", ":vampire:", locals())
-```
-
-
-
-## Rich REPL
-
-Rich can be installed in the Python REPL, so that any data structures will be pretty printed and highlighted.
-
-```python
->>> from rich import pretty
->>> pretty.install()
-```
-
-
-
-## Using the Console
-
-For more control over rich terminal content, import and construct a [Console](https://rich.readthedocs.io/en/latest/reference/console.html#rich.console.Console) object.
-
-```python
-from rich.console import Console
-
-console = Console()
-```
-
-The Console object has a `print` method which has an intentionally similar interface to the builtin `print` function. Here's an example of use:
-
-```python
-console.print("Hello", "World!")
-```
-
-As you might expect, this will print `"Hello World!"` to the terminal. Note that unlike the builtin `print` function, Rich will word-wrap your text to fit within the terminal width.
-
-There are a few ways of adding color and style to your output. You can set a style for the entire output by adding a `style` keyword argument. Here's an example:
-
-```python
-console.print("Hello", "World!", style="bold red")
-```
-
-The output will be something like the following:
-
-
-
-That's fine for styling a line of text at a time. For more finely grained styling, Rich renders a special markup which is similar in syntax to [bbcode](https://en.wikipedia.org/wiki/BBCode). Here's an example:
-
-```python
-console.print("Where there is a [bold cyan]Will[/bold cyan] there [u]is[/u] a [i]way[/i].")
-```
-
-
-
-You can use a Console object to generate sophisticated output with minimal effort. See the [Console API](https://rich.readthedocs.io/en/latest/console.html) docs for details.
-
-## Rich Inspect
-
-Rich has an [inspect](https://rich.readthedocs.io/en/latest/reference/init.html?highlight=inspect#rich.inspect) function which can produce a report on any Python object, such as class, instance, or builtin.
-
-```python
->>> my_list = ["foo", "bar"]
->>> from rich import inspect
->>> inspect(my_list, methods=True)
-```
-
-
-
-See the [inspect docs](https://rich.readthedocs.io/en/latest/reference/init.html#rich.inspect) for details.
-
-# Rich Library
-
-Rich contains a number of builtin _renderables_ you can use to create elegant output in your CLI and help you debug your code.
-
-Click the following headings for details:
-
-
-Log
-
-The Console object has a `log()` method which has a similar interface to `print()`, but also renders a column for the current time and the file and line which made the call. By default Rich will do syntax highlighting for Python structures and for repr strings. If you log a collection (i.e. a dict or a list) Rich will pretty print it so that it fits in the available space. Here's an example of some of these features.
-
-```python
-from rich.console import Console
-console = Console()
-
-test_data = [
- {"jsonrpc": "2.0", "method": "sum", "params": [None, 1, 2, 4, False, True], "id": "1",},
- {"jsonrpc": "2.0", "method": "notify_hello", "params": [7]},
- {"jsonrpc": "2.0", "method": "subtract", "params": [42, 23], "id": "2"},
-]
-
-def test_log():
- enabled = False
- context = {
- "foo": "bar",
- }
- movies = ["Deadpool", "Rise of the Skywalker"]
- console.log("Hello from", console, "!")
- console.log(test_data, log_locals=True)
-
-
-test_log()
-```
-
-The above produces the following output:
-
-
-
-Note the `log_locals` argument, which outputs a table containing the local variables where the log method was called.
-
-The log method could be used for logging to the terminal for long running applications such as servers, but is also a very nice debugging aid.
-
-
-
-Logging Handler
-
-You can also use the builtin [Handler class](https://rich.readthedocs.io/en/latest/logging.html) to format and colorize output from Python's logging module. Here's an example of the output:
-
-
-
-
-
-
-Emoji
-
-To insert an emoji in to console output place the name between two colons. Here's an example:
-
-```python
->>> console.print(":smiley: :vampire: :pile_of_poo: :thumbs_up: :raccoon:")
-😃 🧛 💩 👍 🦝
-```
-
-Please use this feature wisely.
-
-
-
-
-Tables
-
-Rich can render flexible [tables](https://rich.readthedocs.io/en/latest/tables.html) with unicode box characters. There is a large variety of formatting options for borders, styles, cell alignment etc.
-
-
-
-The animation above was generated with [table_movie.py](https://github.com/willmcgugan/rich/blob/master/examples/table_movie.py) in the examples directory.
-
-Here's a simpler table example:
-
-```python
-from rich.console import Console
-from rich.table import Table
-
-console = Console()
-
-table = Table(show_header=True, header_style="bold magenta")
-table.add_column("Date", style="dim", width=12)
-table.add_column("Title")
-table.add_column("Production Budget", justify="right")
-table.add_column("Box Office", justify="right")
-table.add_row(
- "Dev 20, 2019", "Star Wars: The Rise of Skywalker", "$275,000,000", "$375,126,118"
-)
-table.add_row(
- "May 25, 2018",
- "[red]Solo[/red]: A Star Wars Story",
- "$275,000,000",
- "$393,151,347",
-)
-table.add_row(
- "Dec 15, 2017",
- "Star Wars Ep. VIII: The Last Jedi",
- "$262,000,000",
- "[bold]$1,332,539,889[/bold]",
-)
-
-console.print(table)
-```
-
-This produces the following output:
-
-
-
-Note that console markup is rendered in the same way as `print()` and `log()`. In fact, anything that is renderable by Rich may be included in the headers / rows (even other tables).
-
-The `Table` class is smart enough to resize columns to fit the available width of the terminal, wrapping text as required. Here's the same example, with the terminal made smaller than the table above:
-
-
-
-
-
-
-Progress Bars
-
-Rich can render multiple flicker-free [progress](https://rich.readthedocs.io/en/latest/progress.html) bars to track long-running tasks.
-
-For basic usage, wrap any sequence in the `track` function and iterate over the result. Here's an example:
-
-```python
-from rich.progress import track
-
-for step in track(range(100)):
- do_step(step)
-```
-
-It's not much harder to add multiple progress bars. Here's an example taken from the docs:
-
-
-
-The columns may be configured to show any details you want. Built-in columns include percentage complete, file size, file speed, and time remaining. Here's another example showing a download in progress:
-
-
-
-To try this out yourself, see [examples/downloader.py](https://github.com/willmcgugan/rich/blob/master/examples/downloader.py) which can download multiple URLs simultaneously while displaying progress.
-
-
-
-
-Status
-
-For situations where it is hard to calculate progress, you can use the [status](https://rich.readthedocs.io/en/latest/reference/console.html#rich.console.Console.status) method which will display a 'spinner' animation and message. The animation won't prevent you from using the console as normal. Here's an example:
-
-```python
-from time import sleep
-from rich.console import Console
-
-console = Console()
-tasks = [f"task {n}" for n in range(1, 11)]
-
-with console.status("[bold green]Working on tasks...") as status:
- while tasks:
- task = tasks.pop(0)
- sleep(1)
- console.log(f"{task} complete")
-```
-
-This generates the following output in the terminal.
-
-
-
-The spinner animations were borrowed from [cli-spinners](https://www.npmjs.com/package/cli-spinners). You can select a spinner by specifying the `spinner` parameter. Run the following command to see the available values:
-
-```
-python -m rich.spinner
-```
-
-The above command generate the following output in the terminal:
-
-
-
-
-
-
-Tree
-
-Rich can render a [tree](https://rich.readthedocs.io/en/latest/tree.html) with guide lines. A tree is ideal for displaying a file structure, or any other hierarchical data.
-
-The labels of the tree can be simple text or anything else Rich can render. Run the following for a demonstration:
-
-```
-python -m rich.tree
-```
-
-This generates the following output:
-
-
-
-See the [tree.py](https://github.com/willmcgugan/rich/blob/master/examples/tree.py) example for a script that displays a tree view of any directory, similar to the linux `tree` command.
-
-
-
-
-Columns
-
-Rich can render content in neat [columns](https://rich.readthedocs.io/en/latest/columns.html) with equal or optimal width. Here's a very basic clone of the (MacOS / Linux) `ls` command which displays a directory listing in columns:
-
-```python
-import os
-import sys
-
-from rich import print
-from rich.columns import Columns
-
-directory = os.listdir(sys.argv[1])
-print(Columns(directory))
-```
-
-The following screenshot is the output from the [columns example](https://github.com/willmcgugan/rich/blob/master/examples/columns.py) which displays data pulled from an API in columns:
-
-
-
-
-
-
-Markdown
-
-Rich can render [markdown](https://rich.readthedocs.io/en/latest/markdown.html) and does a reasonable job of translating the formatting to the terminal.
-
-To render markdown import the `Markdown` class and construct it with a string containing markdown code. Then print it to the console. Here's an example:
-
-```python
-from rich.console import Console
-from rich.markdown import Markdown
-
-console = Console()
-with open("README.md") as readme:
- markdown = Markdown(readme.read())
-console.print(markdown)
-```
-
-This will produce output something like the following:
-
-
-
-
-
-
-Syntax Highlighting
-
-Rich uses the [pygments](https://pygments.org/) library to implement [syntax highlighting](https://rich.readthedocs.io/en/latest/syntax.html). Usage is similar to rendering markdown; construct a `Syntax` object and print it to the console. Here's an example:
-
-```python
-from rich.console import Console
-from rich.syntax import Syntax
-
-my_code = '''
-def iter_first_last(values: Iterable[T]) -> Iterable[Tuple[bool, bool, T]]:
- """Iterate and generate a tuple with a flag for first and last value."""
- iter_values = iter(values)
- try:
- previous_value = next(iter_values)
- except StopIteration:
- return
- first = True
- for value in iter_values:
- yield first, False, previous_value
- first = False
- previous_value = value
- yield first, True, previous_value
-'''
-syntax = Syntax(my_code, "python", theme="monokai", line_numbers=True)
-console = Console()
-console.print(syntax)
-```
-
-This will produce the following output:
-
-
-
-
-
-
-Tracebacks
-
-Rich can render [beautiful tracebacks](https://rich.readthedocs.io/en/latest/traceback.html) which are easier to read and show more code than standard Python tracebacks. You can set Rich as the default traceback handler so all uncaught exceptions will be rendered by Rich.
-
-Here's what it looks like on OSX (similar on Linux):
-
-
-
-
-
-All Rich renderables make use of the [Console Protocol](https://rich.readthedocs.io/en/latest/protocol.html), which you can also use to implement your own Rich content.
-
-# Rich for enterprise
-
-Available as part of the Tidelift Subscription.
-
-The maintainers of Rich and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source packages you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact packages you use. [Learn more.](https://tidelift.com/subscription/pkg/pypi-rich?utm_source=pypi-rich&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)
-
-# Project using Rich
-
-Here are a few projects using Rich:
-
-- [BrancoLab/BrainRender](https://github.com/BrancoLab/BrainRender)
- a python package for the visualization of three dimensional neuro-anatomical data
-- [Ciphey/Ciphey](https://github.com/Ciphey/Ciphey)
- Automated decryption tool
-- [emeryberger/scalene](https://github.com/emeryberger/scalene)
- a high-performance, high-precision CPU and memory profiler for Python
-- [hedythedev/StarCli](https://github.com/hedythedev/starcli)
- Browse GitHub trending projects from your command line
-- [intel/cve-bin-tool](https://github.com/intel/cve-bin-tool)
- This tool scans for a number of common, vulnerable components (openssl, libpng, libxml2, expat and a few others) to let you know if your system includes common libraries with known vulnerabilities.
-- [nf-core/tools](https://github.com/nf-core/tools)
- Python package with helper tools for the nf-core community.
-- [cansarigol/pdbr](https://github.com/cansarigol/pdbr)
- pdb + Rich library for enhanced debugging
-- [plant99/felicette](https://github.com/plant99/felicette)
- Satellite imagery for dummies.
-- [seleniumbase/SeleniumBase](https://github.com/seleniumbase/SeleniumBase)
- Automate & test 10x faster with Selenium & pytest. Batteries included.
-- [smacke/ffsubsync](https://github.com/smacke/ffsubsync)
- Automagically synchronize subtitles with video.
-- [tryolabs/norfair](https://github.com/tryolabs/norfair)
- Lightweight Python library for adding real-time 2D object tracking to any detector.
-- [ansible/ansible-lint](https://github.com/ansible/ansible-lint) Ansible-lint checks playbooks for practices and behaviour that could potentially be improved
-- [ansible-community/molecule](https://github.com/ansible-community/molecule) Ansible Molecule testing framework
-- +[Many more](https://github.com/willmcgugan/rich/network/dependents)!
-
-
diff --git a/old examples/simple.py b/old examples/simple.py
deleted file mode 100644
index 0d75c5190..000000000
--- a/old examples/simple.py
+++ /dev/null
@@ -1,51 +0,0 @@
-from rich.markdown import Markdown
-
-from textual.app import App
-from textual.widgets import Header, Footer, Placeholder, ScrollView
-
-
-class MyApp(App):
- """An example of a very simple Textual App"""
-
- stylesheet = """
-
- App > View {
- layout: dock
- }
-
- #body {
- padding: 1
- }
-
- #sidebar {
- edge left
- size: 40
- }
-
- """
-
- async def on_load(self) -> None:
- """Bind keys with the app loads (but before entering application mode)"""
- await self.bind("b", "view.toggle('sidebar')", "Toggle sidebar")
- await self.bind("q", "quit", "Quit")
-
- async def on_mount(self) -> None:
- """Create and dock the widgets."""
-
- body = ScrollView()
- await self.screen.mount(
- Header(),
- Footer(),
- body=body,
- sidebar=Placeholder(),
- )
-
- async def get_markdown(filename: str) -> None:
- with open(filename, "rt") as fh:
- readme = Markdown(fh.read(), hyperlinks=True)
- await body.update(readme)
-
- await self.call_later(get_markdown, "richreadme.md")
-
-
-MyApp.run(title="Simple App", log_path="textual.log")
diff --git a/old examples/theme.css b/old examples/theme.css
deleted file mode 100644
index 3f852c16f..000000000
--- a/old examples/theme.css
+++ /dev/null
@@ -1,7 +0,0 @@
-Header {
- border: solid #122233;
-}
-
-App > View > Widget {
- display: none;
-}
diff --git a/sandbox/darren/file_search.py b/sandbox/darren/file_search.py
index c008b3d17..ab93b29fb 100644
--- a/sandbox/darren/file_search.py
+++ b/sandbox/darren/file_search.py
@@ -58,7 +58,7 @@ class FileSearchApp(App):
self.mount(file_table_wrapper=Widget(self.file_table))
self.mount(search_bar=self.search_bar)
- def on_text_widget_base_changed(self, event: TextWidgetBase.Changed) -> None:
+ def on_text_input_changed(self, event: TextInput.Changed) -> None:
self.file_table.filter = event.value
diff --git a/sandbox/input.py b/sandbox/input.py
index 5cfba8edc..5b09e1364 100644
--- a/sandbox/input.py
+++ b/sandbox/input.py
@@ -48,7 +48,7 @@ class InputApp(App[str]):
)
self.mount(text_area=TextArea())
- def on_text_widget_base_changed(self, event: TextWidgetBase.Changed) -> None:
+ def on_text_input_changed_changed(self, event: TextInput.Changed) -> None:
try:
value = float(event.value)
except ValueError:
diff --git a/sandbox/will/basic.css b/sandbox/will/basic.css
index 88de0d535..e69cdf021 100644
--- a/sandbox/will/basic.css
+++ b/sandbox/will/basic.css
@@ -13,8 +13,7 @@
}
App > Screen {
-
- background: $background;
+
color: $text;
layers: base sidebar;
layout: vertical;
@@ -22,10 +21,11 @@ App > Screen {
}
#tree-container {
+ background: $panel;
overflow-y: auto;
height: 20;
margin: 1 2;
- background: $surface;
+
padding: 1 2;
}
@@ -36,13 +36,18 @@ DirectoryTree {
}
-
+#table-container {
+ background: $panel;
+ height: auto;
+ margin: 1 2;
+}
DataTable {
/*border:heavy red;*/
/* tint: 10% green; */
/* text-opacity: 50%; */
- padding: 1;
+ background: $surface;
+ padding: 1 2;
margin: 1 2;
height: 24;
}
@@ -101,7 +106,7 @@ Tweet {
/* border: outer $primary; */
padding: 1;
border: wide $panel;
- overflow: auto;
+
/* scrollbar-gutter: stable; */
align-horizontal: center;
box-sizing: border-box;
@@ -138,8 +143,14 @@ TweetBody {
padding: 0 1 0 0;
}
+Tweet.scroll-horizontal {
+
+ overflow-x: auto;
+}
+
Tweet.scroll-horizontal TweetBody {
width: 350;
+
}
.button {
@@ -182,7 +193,7 @@ Tweet.scroll-horizontal TweetBody {
#sidebar .content {
- layout: vertical
+ layout: vertical;
}
OptionItem {
diff --git a/sandbox/will/basic.py b/sandbox/will/basic.py
index 47d9b23a6..a4adb9d76 100644
--- a/sandbox/will/basic.py
+++ b/sandbox/will/basic.py
@@ -7,7 +7,7 @@ from textual.app import App, ComposeResult
from textual.reactive import Reactive
from textual.widget import Widget
from textual.widgets import Static, DataTable, DirectoryTree, Header, Footer
-from textual.layout import Container
+from textual.layout import Container, Vertical
CODE = '''
from __future__ import annotations
@@ -68,38 +68,38 @@ lorem_short_text = Text.from_markup(lorem_short)
lorem_long_text = Text.from_markup(lorem * 2)
-class TweetHeader(Widget):
+class TweetHeader(Static):
def render(self) -> RenderableType:
return Text("Lorem Impsum", justify="center")
-class TweetBody(Widget):
+class TweetBody(Static):
short_lorem = Reactive(False)
def render(self) -> Text:
return lorem_short_text if self.short_lorem else lorem_long_text
-class Tweet(Widget):
+class Tweet(Vertical):
pass
-class OptionItem(Widget):
+class OptionItem(Static):
def render(self) -> Text:
return Text("Option")
-class Error(Widget):
+class Error(Static):
def render(self) -> Text:
return Text("This is an error message", justify="center")
-class Warning(Widget):
+class Warning(Static):
def render(self) -> Text:
return Text("This is a warning message", justify="center")
-class Success(Widget):
+class Success(Static):
def render(self) -> Text:
return Text("This is a success message", justify="center")
@@ -120,17 +120,22 @@ class BasicApp(App, css_path="basic.css"):
table = DataTable()
self.scroll_to_target = Tweet(TweetBody())
- yield Container(
+ yield Vertical(
Tweet(TweetBody()),
- Widget(
+ Container(
Static(
- Syntax(CODE, "python", line_numbers=True, indent_guides=True),
+ Syntax(
+ CODE,
+ "python",
+ line_numbers=True,
+ indent_guides=True,
+ ),
classes="code",
),
classes="scrollable",
),
- table,
- Widget(DirectoryTree("~/"), id="tree-container"),
+ Container(table, id="table-container"),
+ Container(DirectoryTree("~/"), id="tree-container"),
Error(),
Tweet(TweetBody(), classes="scrollbar-size-custom"),
Warning(),
@@ -143,12 +148,12 @@ class BasicApp(App, css_path="basic.css"):
Tweet(TweetBody(), classes="scroll-horizontal"),
)
yield Widget(
- Widget(classes="title"),
- Widget(classes="user"),
+ Static("Title", classes="title"),
+ Static("Content", classes="user"),
OptionItem(),
OptionItem(),
OptionItem(),
- Widget(classes="content"),
+ Static(classes="content"),
id="sidebar",
)
yield Footer()
diff --git a/sandbox/will/scroll.py b/sandbox/will/scroll.py
deleted file mode 100644
index d4b102201..000000000
--- a/sandbox/will/scroll.py
+++ /dev/null
@@ -1,44 +0,0 @@
-from textual import layout, events
-from textual.app import App, ComposeResult
-from textual.widgets import Button
-
-
-class ButtonsApp(App[str]):
- def compose(self) -> ComposeResult:
- yield layout.Vertical(
- Button("default", id="foo"),
- Button("Where there is a Will"),
- Button("There is a Way"),
- Button("There can be only one"),
- Button.success("success", id="bar"),
- layout.Horizontal(
- Button("Where there is a Will"),
- Button("There is a Way"),
- Button("There can be only one"),
- Button.warning("warning", id="baz"),
- Button("Where there is a Will"),
- Button("There is a Way"),
- Button("There can be only one"),
- id="scroll",
- ),
- Button.error("error", id="baz"),
- Button("Where there is a Will"),
- Button("There is a Way"),
- Button("There can be only one"),
- )
-
- def on_button_pressed(self, event: Button.Pressed) -> None:
- self.app.bell()
-
- async def on_key(self, event: events.Key) -> None:
- await self.dispatch_key(event)
-
- def key_d(self):
- self.dark = not self.dark
-
-
-app = ButtonsApp(log_path="textual.log", css_path="buttons.css", watch_css=True)
-
-if __name__ == "__main__":
- result = app.run()
- print(repr(result))
diff --git a/sandbox/will/scrolly.py b/sandbox/will/scrolly.py
new file mode 100644
index 000000000..d97c1ea4f
--- /dev/null
+++ b/sandbox/will/scrolly.py
@@ -0,0 +1,32 @@
+from rich.text import Text
+from textual.app import App, ComposeResult
+from textual.widgets import Static
+
+text = "\n".join("FOO BAR bazz etc sdfsdf " * 20 for n in range(1000))
+
+
+class Content(Static):
+ DEFAULT_CSS = """
+ Content {
+ width: auto;
+ }
+ """
+
+ def render(self):
+ return Text(text, no_wrap=False)
+
+
+class ScrollApp(App):
+ CSS = """
+ Screen {
+ overflow: auto;
+ }
+ """
+
+ def compose(self) -> ComposeResult:
+ yield Content()
+
+
+app = ScrollApp()
+if __name__ == "__main__":
+ app.run()
diff --git a/src/textual/_animator.py b/src/textual/_animator.py
index 2467b0efe..f4df6089f 100644
--- a/src/textual/_animator.py
+++ b/src/textual/_animator.py
@@ -117,7 +117,7 @@ class BoundAnimator:
def __call__(
self,
attribute: str,
- value: float,
+ value: float | Animatable,
*,
final_value: object = ...,
duration: float | None = None,
diff --git a/src/textual/_cache.py b/src/textual/_cache.py
index f025a08b4..2f9bdd49d 100644
--- a/src/textual/_cache.py
+++ b/src/textual/_cache.py
@@ -45,6 +45,14 @@ class LRUCache(Generic[CacheKey, CacheValue]):
self._lock = Lock()
super().__init__()
+ @property
+ def maxsize(self) -> int:
+ return self._maxsize
+
+ @maxsize.setter
+ def maxsize(self, maxsize: int) -> None:
+ self._maxsize = maxsize
+
def __bool__(self) -> bool:
return bool(self._cache)
diff --git a/src/textual/_doc.py b/src/textual/_doc.py
index b70ce67fc..9bd3b99ca 100644
--- a/src/textual/_doc.py
+++ b/src/textual/_doc.py
@@ -73,7 +73,7 @@ def rich(source, language, css_class, options, md, attrs, **kwargs) -> str:
exec(source, globals)
except Exception:
error_console.print_exception()
- console.bell()
+ # console.bell()
if "output" in globals:
console.print(globals["output"])
diff --git a/src/textual/_types.py b/src/textual/_types.py
index 7158e31a4..1dd59297c 100644
--- a/src/textual/_types.py
+++ b/src/textual/_types.py
@@ -17,7 +17,7 @@ class MessageTarget(Protocol):
async def post_message(self, message: "Message") -> bool:
...
- async def post_priority_message(self, message: "Message") -> bool:
+ async def _post_priority_message(self, message: "Message") -> bool:
...
def post_message_no_wait(self, message: "Message") -> bool:
diff --git a/src/textual/app.py b/src/textual/app.py
index de4a90ac0..c507958ab 100644
--- a/src/textual/app.py
+++ b/src/textual/app.py
@@ -579,7 +579,7 @@ class App(Generic[ReturnType], DOMNode):
filename (str | None, optional): Filename of SVG screenshot, or None to auto-generate
a filename with the date and time. Defaults to None.
path (str, optional): Path to directory for output. Defaults to current working directory.
- time_format(str, optional): Time format to use if filename is None. Defaults to "%Y-%m-%d %X %f".
+ time_format (str, optional): Time format to use if filename is None. Defaults to "%Y-%m-%d %X %f".
Returns:
str: Filename of screenshot.
@@ -1209,6 +1209,8 @@ class App(Generic[ReturnType], DOMNode):
apply_stylesheet = self.stylesheet.apply
for widget_id, widget in name_widgets:
+ if not isinstance(widget, Widget):
+ raise AppError(f"Can't register {widget!r}; expected a Widget instance")
if widget not in self._registry:
if widget_id is not None:
widget.id = widget_id
@@ -1299,21 +1301,6 @@ class App(Generic[ReturnType], DOMNode):
self._end_update()
console.file.flush()
- def measure(self, renderable: RenderableType, max_width=100_000) -> int:
- """Get the optimal width for a widget or renderable.
-
- Args:
- renderable (RenderableType): A renderable (including Widget)
- max_width ([type], optional): Maximum width. Defaults to 100_000.
-
- Returns:
- int: Number of cells required to render.
- """
- measurement = Measurement.get(
- self.console, self.console.options.update(max_width=max_width), renderable
- )
- return measurement.maximum
-
def get_widget_at(self, x: int, y: int) -> tuple[Widget, Region]:
"""Get the widget under the given coordinates.
diff --git a/src/textual/cli/previews/borders.py b/src/textual/cli/previews/borders.py
index d2d4123fe..68b4d3a10 100644
--- a/src/textual/cli/previews/borders.py
+++ b/src/textual/cli/previews/borders.py
@@ -18,6 +18,7 @@ class BorderButtons(layout.Vertical):
BorderButtons {
dock: left;
width: 24;
+ overflow-y: scroll;
}
BorderButtons > Button {
diff --git a/src/textual/cli/previews/easing.css b/src/textual/cli/previews/easing.css
index 3f602b656..83277d566 100644
--- a/src/textual/cli/previews/easing.css
+++ b/src/textual/cli/previews/easing.css
@@ -3,7 +3,7 @@ EasingButtons > Button {
}
EasingButtons {
dock: left;
- overflow: auto auto;
+ overflow-y: scroll;
width: 20;
}
diff --git a/src/textual/cli/previews/easing.py b/src/textual/cli/previews/easing.py
index a8703fce1..56399ddde 100644
--- a/src/textual/cli/previews/easing.py
+++ b/src/textual/cli/previews/easing.py
@@ -111,7 +111,7 @@ class EasingApp(App):
self.animated_bar.position = value
self.opacity_widget.styles.opacity = 1 - value / END_POSITION
- def on_text_widget_base_changed(self, event: TextWidgetBase.Changed):
+ def on_text_input_changed(self, event: TextInput.Changed):
if event.sender.id == "duration-input":
new_duration = _try_float(event.value)
if new_duration is not None:
diff --git a/src/textual/css/styles.py b/src/textual/css/styles.py
index 64c636501..0c94e445c 100644
--- a/src/textual/css/styles.py
+++ b/src/textual/css/styles.py
@@ -10,8 +10,8 @@ from typing import TYPE_CHECKING, Any, Iterable, NamedTuple, cast
import rich.repr
from rich.style import Style
-from textual._types import CallbackType
-from .._animator import Animation, EasingFunction
+from .._types import CallbackType
+from .._animator import Animation, EasingFunction, BoundAnimator
from ..color import Color
from ..geometry import Offset, Spacing
from ._style_properties import (
@@ -850,6 +850,7 @@ class RenderStyles(StylesBase):
self.node = node
self._base_styles = base
self._inline_styles = inline_styles
+ self._animate: BoundAnimator | None = None
@property
def base(self) -> Styles:
@@ -867,6 +868,23 @@ class RenderStyles(StylesBase):
assert self.node is not None
return self.node.rich_style
+ @property
+ def animate(self) -> BoundAnimator:
+ """Get an animator to animate style.
+
+ Example:
+ ```python
+ self.animate("brightness", 0.5)
+ ```
+
+ Returns:
+ BoundAnimator: An animator bound to this widget.
+ """
+ if self._animate is None:
+ self._animate = self.node.app.animator.bind(self)
+ assert self._animate is not None
+ return self._animate
+
def __rich_repr__(self) -> rich.repr.Result:
for rule_name in RULE_NAMES:
if self.has_rule(rule_name):
diff --git a/src/textual/design.py b/src/textual/design.py
index 9a3749b1d..36b01a622 100644
--- a/src/textual/design.py
+++ b/src/textual/design.py
@@ -174,8 +174,6 @@ class ColorSystem:
for name, color in COLORS:
is_dark_shade = dark and name in DARK_SHADES
spread = luminosity_spread
- if name == "panel":
- spread /= 2
for shade_name, luminosity_delta in luminosity_range(spread):
if is_dark_shade:
dark_background = background.blend(color, 0.15)
@@ -188,8 +186,8 @@ class ColorSystem:
colors[f"{name}{shade_name}"] = shade_color.hex
colors["text"] = "auto 95%"
- colors["text-muted"] = "auto 80%"
- colors["text-disabled"] = "auto 60%"
+ colors["text-muted"] = "auto 50%"
+ colors["text-disabled"] = "auto 30%"
return colors
diff --git a/src/textual/events.py b/src/textual/events.py
index d58c9c649..a110fd142 100644
--- a/src/textual/events.py
+++ b/src/textual/events.py
@@ -20,13 +20,12 @@ if TYPE_CHECKING:
@rich.repr.auto
class Event(Message):
+ """The base class for all events."""
+
def __rich_repr__(self) -> rich.repr.Result:
return
yield
- def __init_subclass__(cls, bubble: bool = True, verbose: bool = False) -> None:
- super().__init_subclass__(bubble=bubble, verbose=verbose)
-
@rich.repr.auto
class Callback(Event, bubble=False, verbose=True):
diff --git a/src/textual/message.py b/src/textual/message.py
index 63be90749..237874a1a 100644
--- a/src/textual/message.py
+++ b/src/textual/message.py
@@ -6,7 +6,7 @@ import rich.repr
from . import _clock
from .case import camel_to_snake
-from ._types import MessageTarget
+from ._types import MessageTarget as MessageTarget
@rich.repr.auto
@@ -36,7 +36,7 @@ class Message:
def __init__(self, sender: MessageTarget) -> None:
self.sender = sender
- self.name = camel_to_snake(self.__class__.__name__.replace("Message", ""))
+ self.name = camel_to_snake(self.__class__.__name__)
self.time = _clock.get_time_no_wait()
self._forwarded = False
self._no_default_action = False
@@ -71,10 +71,11 @@ class Message:
@property
def handler_name(self) -> str:
+ """The name of the handler associated with this message."""
# Property to make it read only
return self._handler_name
- def set_forwarded(self) -> None:
+ def _set_forwarded(self) -> None:
"""Mark this event as being forwarded."""
self._forwarded = True
@@ -90,7 +91,8 @@ class Message:
return False
def prevent_default(self, prevent: bool = True) -> Message:
- """Suppress the default action.
+ """Suppress the default action(s). This will prevent handlers in any base classes
+ from being called.
Args:
prevent (bool, optional): True if the default action should be suppressed,
diff --git a/src/textual/message_pump.py b/src/textual/message_pump.py
index 664546c79..c53a68373 100644
--- a/src/textual/message_pump.py
+++ b/src/textual/message_pump.py
@@ -364,7 +364,7 @@ class MessagePump(metaclass=MessagePumpMeta):
if isinstance(message, Event):
await self.on_event(message)
else:
- await self.on_message(message)
+ await self._on_message(message)
def _get_dispatch_methods(
self, method_name: str, message: Message
@@ -390,9 +390,9 @@ class MessagePump(metaclass=MessagePumpMeta):
Args:
event (events.Event): An Event object.
"""
- await self.on_message(event)
+ await self._on_message(event)
- async def on_message(self, message: Message) -> None:
+ async def _on_message(self, message: Message) -> None:
"""Called to process a message.
Args:
@@ -444,7 +444,7 @@ class MessagePump(metaclass=MessagePumpMeta):
# TODO: This may not be needed, or may only be needed by the timer
# Consider removing or making private
- async def post_priority_message(self, message: Message) -> bool:
+ async def _post_priority_message(self, message: Message) -> bool:
"""Post a "priority" messages which will be processes prior to regular messages.
Note that you should rarely need this in a regular app. It exists primarily to allow
@@ -494,6 +494,14 @@ class MessagePump(metaclass=MessagePumpMeta):
await invoke(event.callback)
def emit_no_wait(self, message: Message) -> bool:
+ """Send a message to the _parent_, non async version.
+
+ Args:
+ message (Message): A message object.
+
+ Returns:
+ bool: True if the message was posted successfully.
+ """
if self._parent:
return self._parent._post_message_from_child_no_wait(message)
else:
@@ -506,7 +514,7 @@ class MessagePump(metaclass=MessagePumpMeta):
message (Message): A message object.
Returns:
- bool: _True if the message was posted successfully.
+ bool: True if the message was posted successfully.
"""
if self._parent:
return await self._parent._post_message_from_child(message)
diff --git a/src/textual/messages.py b/src/textual/messages.py
index e744e19c2..2b1ff4792 100644
--- a/src/textual/messages.py
+++ b/src/textual/messages.py
@@ -30,7 +30,7 @@ class Update(Message, verbose=True):
def can_replace(self, message: Message) -> bool:
# Update messages can replace update for the same widget
- return isinstance(message, Update) and self == message
+ return isinstance(message, Update) and self.widget == message.widget
@rich.repr.auto
diff --git a/src/textual/reactive.py b/src/textual/reactive.py
index 7859ec784..53694076a 100644
--- a/src/textual/reactive.py
+++ b/src/textual/reactive.py
@@ -94,8 +94,9 @@ class Reactive(Generic[ReactiveType]):
for key in obj.__class__.__dict__.keys():
if startswith(key, "_init_"):
name = key[6:]
- default = getattr(obj, key)
- setattr(obj, name, default() if callable(default) else default)
+ if not hasattr(obj, name):
+ default = getattr(obj, key)
+ setattr(obj, name, default() if callable(default) else default)
def __set_name__(self, owner: Type[MessageTarget], name: str) -> None:
diff --git a/src/textual/render.py b/src/textual/render.py
new file mode 100644
index 000000000..5de558857
--- /dev/null
+++ b/src/textual/render.py
@@ -0,0 +1,21 @@
+from rich.console import Console, RenderableType
+from rich.protocol import rich_cast
+
+
+def measure(console: Console, renderable: RenderableType, default: int) -> int:
+ """Measure a rich renderable.
+
+ Args:
+ console (Console): A console object.
+ renderable (RenderableType): Rich renderable.
+ default (int): Default width to use if renderable does not expose dimensions.
+
+ Returns:
+ int: Width in cells
+ """
+ renderable = rich_cast(renderable)
+ get_console_width = getattr(renderable, "__rich_measure__", None)
+ if get_console_width is not None:
+ render_width = get_console_width(console, console.options).normalize().maximum
+ return max(0, render_width)
+ return default
diff --git a/src/textual/screen.py b/src/textual/screen.py
index eab12c4f1..c1a1e66e5 100644
--- a/src/textual/screen.py
+++ b/src/textual/screen.py
@@ -220,6 +220,7 @@ class Screen(Widget):
self, unclipped_region.size, virtual_size, container_size
)
)
+
except Exception as error:
self.app._handle_exception(error)
return
@@ -279,13 +280,13 @@ class Screen(Widget):
screen_y=event.screen_y,
style=event.style,
)
- mouse_event.set_forwarded()
+ mouse_event._set_forwarded()
await widget._forward_event(mouse_event)
async def _forward_event(self, event: events.Event) -> None:
if event.is_forwarded:
return
- event.set_forwarded()
+ event._set_forwarded()
if isinstance(event, (events.Enter, events.Leave)):
await self.post_message(event)
@@ -310,7 +311,7 @@ class Screen(Widget):
return
event.style = self.get_style_at(event.screen_x, event.screen_y)
if widget is self:
- event.set_forwarded()
+ event._set_forwarded()
await self.post_message(event)
else:
await widget._forward_event(event.offset(-region.x, -region.y))
diff --git a/src/textual/scroll_view.py b/src/textual/scroll_view.py
index 34eb72987..dc0842ce1 100644
--- a/src/textual/scroll_view.py
+++ b/src/textual/scroll_view.py
@@ -68,6 +68,25 @@ class ScrollView(Widget):
"""
return self.virtual_size.height
+ def watch_virtual_size(self, virtual_size: Size) -> None:
+ self._scroll_update(virtual_size)
+
+ def watch_show_horizontal_scrollbar(self, value: bool) -> None:
+ """Watch function for show_horizontal_scrollbar attribute.
+
+ Args:
+ value (bool): Show horizontal scrollbar flag.
+ """
+ self.refresh(layout=True)
+
+ def watch_show_vertical_scrollbar(self, value: bool) -> None:
+ """Watch function for show_vertical_scrollbar attribute.
+
+ Args:
+ value (bool): Show vertical scrollbar flag.
+ """
+ self.refresh(layout=True)
+
def _size_updated(
self, size: Size, virtual_size: Size, container_size: Size
) -> None:
@@ -78,27 +97,12 @@ class ScrollView(Widget):
virtual_size (Size): New virtual size.
container_size (Size): New container size.
"""
+
virtual_size = self.virtual_size
if self._size != size:
self._size = size
- self._container_size = container_size
-
- self._refresh_scrollbars()
- width, height = self.container_size
- if self.show_vertical_scrollbar:
- self.vertical_scrollbar.window_virtual_size = virtual_size.height
- self.vertical_scrollbar.window_size = (
- height - self.scrollbar_size_horizontal
- )
- if self.show_horizontal_scrollbar:
- self.horizontal_scrollbar.window_virtual_size = virtual_size.width
- self.horizontal_scrollbar.window_size = (
- width - self.scrollbar_size_vertical
- )
-
- self.scroll_x = self.validate_scroll_x(self.scroll_x)
- self.scroll_y = self.validate_scroll_y(self.scroll_y)
- self.refresh(layout=False)
+ self._container_size = size
+ self._scroll_update(virtual_size)
self.scroll_to(self.scroll_x, self.scroll_y)
def render(self) -> RenderableType:
diff --git a/src/textual/scrollbar.py b/src/textual/scrollbar.py
index c223ca73b..d5b989d32 100644
--- a/src/textual/scrollbar.py
+++ b/src/textual/scrollbar.py
@@ -225,7 +225,9 @@ class ScrollBar(Widget):
scrollbar_style = Style.from_color(color.rich_color, background.rich_color)
return ScrollBarRender(
virtual_size=self.window_virtual_size,
- window_size=self.window_size,
+ window_size=(
+ self.window_size if self.window_size < self.window_virtual_size else 0
+ ),
position=self.position,
thickness=self.thickness,
vertical=self.vertical,
diff --git a/src/textual/timer.py b/src/textual/timer.py
index 32edb3886..d99a016da 100644
--- a/src/textual/timer.py
+++ b/src/textual/timer.py
@@ -167,4 +167,4 @@ class Timer:
count=count,
callback=self._callback,
)
- await self.target.post_priority_message(event)
+ await self.target._post_priority_message(event)
diff --git a/src/textual/widget.py b/src/textual/widget.py
index ea5edc37f..dcd079091 100644
--- a/src/textual/widget.py
+++ b/src/textual/widget.py
@@ -7,8 +7,13 @@ from operator import attrgetter
from typing import TYPE_CHECKING, ClassVar, Collection, Iterable, NamedTuple, cast
import rich.repr
-from rich.console import Console, ConsoleRenderable, JustifyMethod, RenderableType
-from rich.measure import Measurement
+from rich.console import (
+ Console,
+ ConsoleRenderable,
+ RichCast,
+ JustifyMethod,
+ RenderableType,
+)
from rich.segment import Segment
from rich.style import Style
from rich.styled import Styled
@@ -30,6 +35,7 @@ from .geometry import Offset, Region, Size, Spacing, clamp
from .layouts.vertical import VerticalLayout
from .message import Message
from .reactive import Reactive
+from .render import measure
if TYPE_CHECKING:
from .app import App, ComposeResult
@@ -61,7 +67,9 @@ class RenderCache(NamedTuple):
@rich.repr.auto
class Widget(DOMNode):
"""
- A Widget is the base class for Textual widgets. Extent this class (or a sub-class) when defining your own widgets.
+ A Widget is the base class for Textual widgets.
+
+ See also [static][textual.widgets._static.Static] for starting point for your own widgets.
"""
@@ -71,7 +79,7 @@ class Widget(DOMNode):
scrollbar-background-hover: $panel-darken-2;
scrollbar-color: $primary-lighten-1;
scrollbar-color-active: $warning-darken-1;
- scrollbar-corner-color: $panel-darken-3;
+ scrollbar-corner-color: $panel-darken-1;
scrollbar-size-vertical: 2;
scrollbar-size-horizontal: 1;
}
@@ -80,6 +88,7 @@ class Widget(DOMNode):
can_focus: bool = False
can_focus_children: bool = True
+ fluid = Reactive(True)
def __init__(
self,
@@ -338,14 +347,12 @@ class Widget(DOMNode):
return self._content_width_cache[1]
console = self.app.console
- renderable = self.post_render(self.render())
+ renderable = self._render()
+
+ width = measure(console, renderable, container.width)
+ if self.fluid:
+ width = min(width, container.width)
- measurement = Measurement.get(
- console,
- console.options.update_width(container.width),
- renderable,
- )
- width = measurement.maximum
self._content_width_cache = (cache_key, width)
return width
@@ -458,6 +465,7 @@ class Widget(DOMNode):
self._vertical_scrollbar = scroll_bar = ScrollBar(
vertical=True, name="vertical", thickness=self.scrollbar_size_vertical
)
+ self._vertical_scrollbar.display = False
self.app._start_widget(self, scroll_bar)
return scroll_bar
@@ -475,6 +483,7 @@ class Widget(DOMNode):
self._horizontal_scrollbar = scroll_bar = ScrollBar(
vertical=False, name="horizontal", thickness=self.scrollbar_size_horizontal
)
+ self._horizontal_scrollbar.display = False
self.app._start_widget(self, scroll_bar)
return scroll_bar
@@ -846,7 +855,7 @@ class Widget(DOMNode):
y (int | None, optional): Y coordinate (row) to scroll to, or None for no change. Defaults to None.
animate (bool, optional): Animate to new scroll position. Defaults to True.
speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
- duration (float | None, optional): Duration of animation, if animate is True and speed is False.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if the scroll position changed, otherwise False.
@@ -888,8 +897,6 @@ class Widget(DOMNode):
scroll_y = self.scroll_y
self.scroll_target_y = self.scroll_y = y
scrolled_y = scroll_y != self.scroll_y
- if scrolled_x or scrolled_y:
- self.refresh(repaint=False, layout=True)
return scrolled_x or scrolled_y
@@ -909,7 +916,7 @@ class Widget(DOMNode):
y (int | None, optional): Y distance (rows) to scroll, or ``None`` for no change. Defaults to None.
animate (bool, optional): Animate to new scroll position. Defaults to False.
speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
- duration (float | None, optional): Duration of animation, if animate is True and speed is False.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if the scroll position changed, otherwise False.
@@ -922,143 +929,258 @@ class Widget(DOMNode):
duration=duration,
)
- def scroll_home(self, *, animate: bool = True) -> bool:
+ def scroll_home(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll to home position.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
- return self.scroll_to(0, 0, animate=animate, duration=1)
+ if speed is None and duration is None:
+ duration = 1.0
+ return self.scroll_to(0, 0, animate=animate, speed=speed, duration=duration)
- def scroll_end(self, *, animate: bool = True) -> bool:
+ def scroll_end(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll to the end of the container.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
- return self.scroll_to(0, self.max_scroll_y, animate=animate, duration=1)
+ if speed is None and duration is None:
+ duration = 1.0
+ return self.scroll_to(
+ 0, self.max_scroll_y, animate=animate, speed=speed, duration=duration
+ )
- def scroll_left(self, *, animate: bool = True) -> bool:
+ def scroll_left(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll one cell left.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
- return self.scroll_to(x=self.scroll_target_x - 1, animate=animate)
+ return self.scroll_to(
+ x=self.scroll_target_x - 1, animate=animate, speed=speed, duration=duration
+ )
- def scroll_right(self, *, animate: bool = True) -> bool:
+ def scroll_right(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll on cell right.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
- return self.scroll_to(x=self.scroll_target_x + 1, animate=animate)
+ return self.scroll_to(
+ x=self.scroll_target_x + 1, animate=animate, speed=speed, duration=duration
+ )
- def scroll_down(self, *, animate: bool = True) -> bool:
+ def scroll_down(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll one line down.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
- return self.scroll_to(y=self.scroll_target_y + 1, animate=animate)
+ return self.scroll_to(
+ y=self.scroll_target_y + 1, animate=animate, speed=speed, duration=duration
+ )
- def scroll_up(self, *, animate: bool = True) -> bool:
+ def scroll_up(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll one line up.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
- return self.scroll_to(y=self.scroll_target_y - 1, animate=animate)
+ return self.scroll_to(
+ y=self.scroll_target_y - 1, animate=animate, speed=speed, duration=duration
+ )
- def scroll_page_up(self, *, animate: bool = True) -> bool:
+ def scroll_page_up(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll one page up.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
return self.scroll_to(
- y=self.scroll_target_y - self.container_size.height, animate=animate
+ y=self.scroll_target_y - self.container_size.height,
+ animate=animate,
+ speed=speed,
+ duration=duration,
)
- def scroll_page_down(self, *, animate: bool = True) -> bool:
+ def scroll_page_down(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll one page down.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
return self.scroll_to(
- y=self.scroll_target_y + self.container_size.height, animate=animate
+ y=self.scroll_target_y + self.container_size.height,
+ animate=animate,
+ speed=speed,
+ duration=duration,
)
- def scroll_page_left(self, *, animate: bool = True) -> bool:
+ def scroll_page_left(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll one page left.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
+ if speed is None and duration is None:
+ duration = 0.3
return self.scroll_to(
x=self.scroll_target_x - self.container_size.width,
animate=animate,
- duration=0.3,
+ speed=speed,
+ duration=duration,
)
- def scroll_page_right(self, *, animate: bool = True) -> bool:
+ def scroll_page_right(
+ self,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll one page right.
Args:
animate (bool, optional): Animate scroll. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling was done.
"""
+ if speed is None and duration is None:
+ duration = 0.3
return self.scroll_to(
x=self.scroll_target_x + self.container_size.width,
animate=animate,
- duration=0.3,
+ speed=speed,
+ duration=duration,
)
- def scroll_to_widget(self, widget: Widget, *, animate: bool = True) -> bool:
+ def scroll_to_widget(
+ self,
+ widget: Widget,
+ *,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> bool:
"""Scroll scrolling to bring a widget in to view.
Args:
widget (Widget): A descendant widget.
animate (bool, optional): True to animate, or False to jump. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
bool: True if any scrolling has occurred in any descendant, otherwise False.
@@ -1071,7 +1193,11 @@ class Widget(DOMNode):
while isinstance(widget.parent, Widget) and widget is not self:
container = widget.parent
scroll_offset = container.scroll_to_region(
- region, spacing=widget.parent.gutter, animate=animate
+ region,
+ spacing=widget.parent.gutter,
+ animate=animate,
+ speed=speed,
+ duration=duration,
)
if scroll_offset:
scrolled = True
@@ -1091,7 +1217,13 @@ class Widget(DOMNode):
return scrolled
def scroll_to_region(
- self, region: Region, *, spacing: Spacing | None = None, animate: bool = True
+ self,
+ region: Region,
+ *,
+ spacing: Spacing | None = None,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
) -> Offset:
"""Scrolls a given region in to view, if required.
@@ -1101,8 +1233,9 @@ class Widget(DOMNode):
Args:
region (Region): A region that should be visible.
spacing (Spacing | None, optional): Optional spacing around the region. Defaults to None.
- animate (bool, optional): Enable animation. Defaults to True.
- spacing (Spacing): Space to subtract from the window region.
+ animate (bool, optional): True to animate, or False to jump. Defaults to True.
+ speed (float | None, optional): Speed of scroll if animate is True. Or None to use duration.
+ duration (float | None, optional): Duration of animation, if animate is True and speed is None.
Returns:
Offset: The distance that was scrolled.
@@ -1121,19 +1254,39 @@ class Widget(DOMNode):
clamp(scroll_y + delta_y, 0, self.max_scroll_y) - scroll_y,
)
if delta:
+ if speed is None and duration is None:
+ duration = 0.2
self.scroll_relative(
delta.x or None,
delta.y or None,
animate=animate if (abs(delta_y) > 1 or delta_x) else False,
- duration=0.2,
+ speed=speed,
+ duration=duration,
)
return delta
- def scroll_visible(self) -> None:
- """Scroll the container to make this widget visible."""
+ def scroll_visible(
+ self,
+ animate: bool = True,
+ speed: float | None = None,
+ duration: float | None = None,
+ ) -> None:
+ """Scroll the container to make this widget visible.
+
+ Args:
+ animate (bool, optional): _description_. Defaults to True.
+ speed (float | None, optional): _description_. Defaults to None.
+ duration (float | None, optional): _description_. Defaults to None.
+ """
parent = self.parent
if isinstance(parent, Widget):
- self.call_later(parent.scroll_to_widget, self)
+ self.call_later(
+ parent.scroll_to_widget,
+ self,
+ animate=animate,
+ speed=speed,
+ duration=duration,
+ )
def __init_subclass__(
cls,
@@ -1261,13 +1414,14 @@ class Widget(DOMNode):
if isinstance(renderable, str):
renderable = Text.from_markup(renderable, justify=text_justify)
- rich_style = self.rich_style
- if isinstance(renderable, Text):
- renderable.stylize(rich_style)
- if text_justify is not None and renderable.justify is None:
- renderable.justify = text_justify
- else:
- renderable = Styled(renderable, rich_style)
+ if (
+ isinstance(renderable, Text)
+ and text_justify is not None
+ and renderable.justify is None
+ ):
+ renderable.justify = text_justify
+
+ renderable = Styled(renderable, self.rich_style)
return renderable
@@ -1294,26 +1448,30 @@ class Widget(DOMNode):
self.virtual_size = virtual_size
self._container_size = container_size
if self.is_scrollable:
- self._refresh_scrollbars()
- width, height = self.container_size
- if self.show_vertical_scrollbar:
- self.vertical_scrollbar.window_virtual_size = virtual_size.height
- self.vertical_scrollbar.window_size = (
- height - self.scrollbar_size_horizontal
- )
- if self.show_horizontal_scrollbar:
- self.horizontal_scrollbar.window_virtual_size = virtual_size.width
- self.horizontal_scrollbar.window_size = (
- width - self.scrollbar_size_vertical
- )
-
- self.scroll_x = self.validate_scroll_x(self.scroll_x)
- self.scroll_y = self.validate_scroll_y(self.scroll_y)
- self.refresh(layout=True)
- self.scroll_to(self.scroll_x, self.scroll_y)
+ self._scroll_update(virtual_size)
else:
self.refresh()
+ def _scroll_update(self, virtual_size: Size) -> None:
+ """Update scrollbars visiblity and dimensions.
+
+ Args:
+ virtual_size (Size): Virtual size.
+ """
+ self._refresh_scrollbars()
+ width, height = self.container_size
+ if self.show_vertical_scrollbar:
+ self.vertical_scrollbar.window_virtual_size = virtual_size.height
+ self.vertical_scrollbar.window_size = (
+ height - self.scrollbar_size_horizontal
+ )
+ if self.show_horizontal_scrollbar:
+ self.horizontal_scrollbar.window_virtual_size = virtual_size.width
+ self.horizontal_scrollbar.window_size = width - self.scrollbar_size_vertical
+
+ self.scroll_x = self.validate_scroll_x(self.scroll_x)
+ self.scroll_y = self.validate_scroll_y(self.scroll_y)
+
def _render_content(self) -> None:
"""Render all lines."""
width, height = self.size
@@ -1360,7 +1518,10 @@ class Widget(DOMNode):
"""
if self._dirty_regions:
self._render_content()
- line = self._render_cache.lines[y]
+ try:
+ line = self._render_cache.lines[y]
+ except IndexError:
+ line = [Segment(" " * self.size.width, self.rich_style)]
return line
def render_lines(self, crop: Region) -> Lines:
@@ -1389,7 +1550,7 @@ class Widget(DOMNode):
return self.screen.get_style_at(x + offset_x, y + offset_y)
async def _forward_event(self, event: events.Event) -> None:
- event.set_forwarded()
+ event._set_forwarded()
await self.post_message(event)
def refresh(
@@ -1443,6 +1604,17 @@ class Widget(DOMNode):
render = "" if self.is_container else self.css_identifier_styled
return render
+ def _render(self) -> ConsoleRenderable | RichCast:
+ """Get renderable, promoting str to text as required.
+
+ Returns:
+ ConsoleRenderable | RichCast: A renderable
+ """
+ renderable = self.render()
+ if isinstance(renderable, str):
+ return Text(renderable)
+ return renderable
+
async def action(self, action: str) -> None:
"""Perform a given action, with this widget as the default namespace.
@@ -1541,7 +1713,11 @@ class Widget(DOMNode):
def _on_mount(self, event: events.Mount) -> None:
widgets = self.compose()
self.mount(*widgets)
- self.screen.refresh(repaint=False, layout=True)
+ # Preset scrollbars if not automatic
+ if self.styles.overflow_y == "scroll":
+ self.show_vertical_scrollbar = True
+ if self.styles.overflow_x == "scroll":
+ self.show_horizontal_scrollbar = True
def _on_leave(self, event: events.Leave) -> None:
self.mouse_over = False
diff --git a/src/textual/widgets/__init__.py b/src/textual/widgets/__init__.py
index 447110325..df9fc54e6 100644
--- a/src/textual/widgets/__init__.py
+++ b/src/textual/widgets/__init__.py
@@ -20,6 +20,7 @@ __all__ = [
"Pretty",
"Static",
"TextInput",
+ "TextLog",
"TreeControl",
"Welcome",
]
diff --git a/src/textual/widgets/__init__.pyi b/src/textual/widgets/__init__.pyi
index 49537d599..530227341 100644
--- a/src/textual/widgets/__init__.pyi
+++ b/src/textual/widgets/__init__.pyi
@@ -8,5 +8,6 @@ from ._placeholder import Placeholder as Placeholder
from ._pretty import Pretty as Pretty
from ._static import Static as Static
from ._text_input import TextInput as TextInput
+from ._text_log import TextLog as TextLog
from ._tree_control import TreeControl as TreeControl
from ._welcome import Welcome as Welcome
diff --git a/src/textual/widgets/_data_table.py b/src/textual/widgets/_data_table.py
index 5bf59fd54..8c8141727 100644
--- a/src/textual/widgets/_data_table.py
+++ b/src/textual/widgets/_data_table.py
@@ -20,7 +20,7 @@ from ..geometry import clamp, Region, Size, Spacing
from ..reactive import Reactive
from .._profile import timer
from ..scroll_view import ScrollView
-from ..widget import Widget
+
from .. import messages
@@ -108,8 +108,8 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
DEFAULT_CSS = """
DataTable {
- background: $surface;
- color: $text;
+
+ color: $text;
}
DataTable > .datatable--header {
text-style: bold;
@@ -155,6 +155,7 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
def __init__(
self,
+ *,
name: str | None = None,
id: str | None = None,
classes: str | None = None,
@@ -522,18 +523,6 @@ class DataTable(ScrollView, Generic[CellType], can_focus=True):
return self._render_line(y, scroll_x, scroll_x + width, style)
- def render_lines(self, crop: Region) -> Lines:
- """Render the widget in to lines.
-
- Args:
- crop (Region): Region within visible area to.
-
- Returns:
- Lines: A list of list of segments
- """
- lines = self._styles_cache.render_widget(self, crop)
- return lines
-
def on_mouse_move(self, event: events.MouseMove):
meta = event.style.meta
if meta:
diff --git a/src/textual/widgets/_footer.py b/src/textual/widgets/_footer.py
index 182782c13..5916b4359 100644
--- a/src/textual/widgets/_footer.py
+++ b/src/textual/widgets/_footer.py
@@ -56,7 +56,6 @@ class Footer(Widget):
watch(self.app, "focused", self._focus_changed)
def _focus_changed(self, focused: Widget | None) -> None:
- self.log("FOCUS CHANGED", focused)
self._key_text = None
self.refresh()
diff --git a/src/textual/widgets/_static.py b/src/textual/widgets/_static.py
index 5e5c74a64..bab12cfa3 100644
--- a/src/textual/widgets/_static.py
+++ b/src/textual/widgets/_static.py
@@ -2,8 +2,9 @@ from __future__ import annotations
from rich.console import RenderableType
from rich.protocol import is_renderable
+from rich.text import Text
-from ..reactive import Reactive
+from ..reactive import reactive
from ..errors import RenderError
from ..widget import Widget
@@ -20,33 +21,76 @@ def _check_renderable(renderable: object):
"""
if not is_renderable(renderable):
raise RenderError(
- f"unable to render {renderable!r}; A string, Text, or other Rich renderable is required"
+ f"unable to render {renderable!r}; a string, Text, or other Rich renderable is required"
)
class Static(Widget):
+ """A widget to display simple static content, or use as a base- lass for more complex widgets.
+
+ Args:
+ renderable (RenderableType, optional): A Rich renderable, or string containing console markup.
+ Defaults to "".
+ fluid (bool, optional): Enable fluid content (adapts to size of window). Defaults to True.
+ name (str | None, optional): Name of widget. Defaults to None.
+ id (str | None, optional): ID of Widget. Defaults to None.
+ classes (str | None, optional): Space separated list of class names. Defaults to None.
+ """
+
DEFAULT_CSS = """
Static {
height: auto;
}
"""
+ fluid = reactive(True, layout=True)
+ _renderable: RenderableType
+
def __init__(
self,
renderable: RenderableType = "",
*,
+ fluid: bool = True,
+ markup: bool = True,
name: str | None = None,
id: str | None = None,
classes: str | None = None,
) -> None:
+
super().__init__(name=name, id=id, classes=classes)
+ self.fluid = fluid
+ self.markup = markup
self.renderable = renderable
_check_renderable(renderable)
- def render(self) -> RenderableType:
- return self.renderable
+ @property
+ def renderable(self) -> RenderableType:
+ return self._renderable or ""
- def update(self, renderable: RenderableType) -> None:
+ @renderable.setter
+ def renderable(self, renderable: RenderableType) -> None:
+ if isinstance(renderable, str):
+ if self.markup:
+ self._renderable = Text.from_markup(renderable)
+ else:
+ self._renderable = Text(renderable)
+ else:
+ self._renderable = renderable
+
+ def render(self) -> RenderableType:
+ """Get a rich renderable for the widget's content.
+
+ Returns:
+ RenderableType: A rich renderable.
+ """
+ return self._renderable
+
+ def update(self, renderable: RenderableType = "", home: bool = False) -> None:
+ """Update the widget contents.
+
+ Args:
+ renderable (RenderableType): A new rich renderable.
+ """
_check_renderable(renderable)
self.renderable = renderable
self.refresh(layout=True)
diff --git a/src/textual/widgets/_text_input.py b/src/textual/widgets/_text_input.py
index 5b706049b..825030650 100644
--- a/src/textual/widgets/_text_input.py
+++ b/src/textual/widgets/_text_input.py
@@ -86,6 +86,8 @@ class TextWidgetBase(Widget):
return display_text
class Changed(Message, bubble=True):
+ namespace = "text_input"
+
def __init__(self, sender: MessageTarget, value: str) -> None:
"""Message posted when the user changes the value in a TextInput
@@ -116,9 +118,17 @@ class TextInput(TextWidgetBase, can_focus=True):
padding: 1;
background: $surface;
content-align: left middle;
+ color: $text;
+ }
+ TextInput .text-input--placeholder {
+ color: $text-muted;
}
"""
+ COMPONENT_CLASSES = {
+ "text-input--placeholder",
+ }
+
def __init__(
self,
*,
@@ -269,7 +279,10 @@ class TextInput(TextWidgetBase, can_focus=True):
else:
# The user has not entered text - show the placeholder
display_text = Text(
- self.placeholder, "dim", no_wrap=True, overflow="ignore"
+ self.placeholder,
+ self.get_component_rich_style("text-input--placeholder"),
+ no_wrap=True,
+ overflow="ignore",
)
if show_cursor:
display_text = self._apply_cursor_to_text(display_text, 0)
diff --git a/src/textual/widgets/_text_log.py b/src/textual/widgets/_text_log.py
new file mode 100644
index 000000000..af0ecb827
--- /dev/null
+++ b/src/textual/widgets/_text_log.py
@@ -0,0 +1,111 @@
+from __future__ import annotations
+
+from rich.console import RenderableType
+from rich.segment import Segment
+
+from ..reactive import var
+from ..geometry import Size, Region
+from ..scroll_view import ScrollView
+from .._cache import LRUCache
+from .._segment_tools import line_crop
+from .._types import Lines
+
+
+class TextLog(ScrollView, can_focus=True):
+ DEFAULT_CSS = """
+ TextLog{
+ background: $surface;
+ color: $text;
+ overflow-y: scroll;
+ }
+ """
+
+ max_lines: var[int | None] = var(None)
+ min_width: var[int] = var(78)
+ wrap: var[bool] = var(False)
+
+ def __init__(
+ self,
+ *,
+ max_lines: int | None = None,
+ min_width: int = 78,
+ wrap: bool = False,
+ name: str | None = None,
+ id: str | None = None,
+ classes: str | None = None,
+ ) -> None:
+ self.max_lines = max_lines
+ self.lines: list[list[Segment]] = []
+ self._line_cache: LRUCache[tuple[int, int, int, int], list[Segment]]
+ self._line_cache = LRUCache(1024)
+ self.max_width: int = 0
+ self.min_width = min_width
+ self.wrap = wrap
+ super().__init__(name=name, id=id, classes=classes)
+
+ def _on_styles_updated(self) -> None:
+ self._line_cache.clear()
+
+ def write(self, content: RenderableType) -> None:
+ """Write text or a rich renderable.
+
+ Args:
+ content (RenderableType): Rich renderable (or text).
+ """
+ console = self.app.console
+ width = max(self.min_width, self.size.width or self.min_width)
+
+ render_options = console.options.update_width(width)
+ if not self.wrap:
+ render_options = render_options.update(overflow="ignore", no_wrap=True)
+ segments = self.app.console.render(content, render_options)
+ lines = list(Segment.split_lines(segments))
+ self.max_width = max(
+ self.max_width,
+ max(sum(segment.cell_length for segment in _line) for _line in lines),
+ )
+ self.lines.extend(lines)
+
+ if self.max_lines is not None:
+ self.lines = self.lines[-self.max_lines :]
+ self.virtual_size = Size(self.max_width, len(self.lines))
+ self.scroll_end(animate=False, speed=100)
+
+ def clear(self) -> None:
+ """Clear the text log."""
+ del self.lines[:]
+ self.max_width = 0
+ self.virtual_size = Size(self.max_width, len(self.lines))
+
+ def render_line(self, y: int) -> list[Segment]:
+ scroll_x, scroll_y = self.scroll_offset
+ return self._render_line(scroll_y + y, scroll_x, self.size.width)
+
+ def render_lines(self, crop: Region) -> Lines:
+ """Render the widget in to lines.
+
+ Args:
+ crop (Region): Region within visible area to.
+
+ Returns:
+ Lines: A list of list of segments
+ """
+ lines = self._styles_cache.render_widget(self, crop)
+ return lines
+
+ def _render_line(self, y: int, scroll_x: int, width: int) -> list[Segment]:
+
+ if y >= len(self.lines):
+ return [Segment(" " * width, self.rich_style)]
+
+ key = (y, scroll_x, width, self.max_width)
+ if key in self._line_cache:
+ return self._line_cache[key]
+
+ line = self.lines[y]
+ line = Segment.adjust_line_length(
+ line, max(self.max_width, width), self.rich_style
+ )
+ line = line_crop(line, scroll_x, scroll_x + width, self.max_width)
+ self._line_cache[key] = line
+ return line
diff --git a/src/textual/widgets/_tree_control.py b/src/textual/widgets/_tree_control.py
index e7acede74..a6d7e477b 100644
--- a/src/textual/widgets/_tree_control.py
+++ b/src/textual/widgets/_tree_control.py
@@ -163,8 +163,8 @@ class TreeNode(Generic[NodeDataType]):
class TreeControl(Generic[NodeDataType], Static, can_focus=True):
DEFAULT_CSS = """
- TreeControl {
- background: $surface;
+ TreeControl {
+
color: $text;
height: auto;
width: 100%;