doc screenshots

docs/examples/tutorial/stopwatch.css

@@ -1,6 +1,6 @@
 Stopwatch {
     layout: horizontal;
-    background: $panel-darken-1;
+    background: $boost;
     height: 5;
     min-width: 50;
     margin: 1;

docs/examples/tutorial/stopwatch03.css

@@ -1,6 +1,6 @@
 Stopwatch {
     layout: horizontal;
-    background: $panel-darken-1;
+    background: $boost;
     height: 5;
     padding: 1;
     margin: 1;

docs/examples/tutorial/stopwatch04.css

@@ -1,6 +1,6 @@
 Stopwatch {
     layout: horizontal;
-    background: $panel-darken-1;
+    background: $boost;
     height: 5;
     min-width: 50;
     margin: 1;

docs/index.md

@@ -59,18 +59,21 @@ Textual is a framework for building applications that run within your terminal.
 <hr>
 
 
-```{.textual path="examples/calculator.py" columns=100 lines=41 press="3,.,1,4,5,9,2,_,_"}
+```{.textual path="examples/calculator.py" columns=100 lines=41 press="3,.,1,4,5,9,2,_,_,_,_,_,_,_,_"}
-
 ```
 
 ```{.textual path="examples/pride.py"}
-
 ```
 
-```{.textual path="docs/examples/tutorial/stopwatch.py" press="tab,enter,_,_"}
+```{.textual path="docs/examples/tutorial/stopwatch.py" columns="100" lines="30" press="d,tab,enter,_,_"}
 ```
 
-```{.textual path="docs/examples/guide/layout/combining_layouts.py"}
+
+```{.textual path="docs/examples/events/dictionary.py" columns="100" lines="30" press="tab,_,t,e,x,t,_,_,_,_,_,_,_,_,_,_,_,_,_"}
+```
+
+
+```{.textual path="docs/examples/guide/layout/combining_layouts.py" columns="100", lines="30"}
 ```
 
 ```{.textual path="docs/examples/app/widgets01.py"}

docs/tutorial.md

@@ -224,7 +224,7 @@ CSS files contain a number of _declaration blocks_. Here's the first such block
 ```sass 
 Stopwatch {
     layout: horizontal;
-    background: $panel-darken-1;
+    background: $boost;
     height: 5;
     padding: 1;
     margin: 1;
@@ -240,7 +240,7 @@ Here's how this CSS code changes how the `Stopwatch` widget is displayed.
 </div>
 
 - `layout: horizontal` aligns child widgets horizontally from left to right.
-- `background: $panel-darken-1` sets the background color to `$panel-darken-1`. The `$` prefix picks a pre-defined color from the builtin theme. There are other ways to specify colors such as `"blue"` or `rgb(20,46,210)`.
+- `background: $boost` sets the background color to `$boost`. The `$` prefix picks a pre-defined color from the builtin theme. There are other ways to specify colors such as `"blue"` or `rgb(20,46,210)`.
 - `height: 5` sets the height of our widget to 5 lines of text.
 - `padding: 1` sets a padding of 1 cell around the child widgets.
 - `margin: 1` sets a margin of 1 cell around the Stopwatch widget to create a little space between widgets in the list.

examples/calculator.css

@@ -2,7 +2,7 @@ Screen {
     overflow: auto;
 }
 
-#calculator {
+#calculator {    
     layout: grid;
     grid-size: 4;
     grid-gutter: 1 2;

src/textual/_animator.py

@@ -154,10 +154,11 @@ class Animator:
             callback=self,
             pause=True,
         )
+        self._idle_event = asyncio.Event()
 
     async def start(self) -> None:
         """Start the animator task."""
-
+        self._idle_event.set()
         self._timer.start()
 
     async def stop(self) -> None:
@@ -296,10 +297,12 @@ class Animator:
 
         self._animations[animation_key] = animation
         self._timer.resume()
+        self._idle_event.clear()
 
     async def __call__(self) -> None:
         if not self._animations:
             self._timer.pause()
+            self._idle_event.set()
         else:
             animation_time = self._get_time()
             animation_keys = list(self._animations.keys())
@@ -317,3 +320,7 @@ class Animator:
         # N.B. We could remove this method and always call `self._timer.get_time()` internally,
         # but it's handy to have in mocking situations
         return _clock.get_time_no_wait()
+
+    async def wait_for_idle(self) -> None:
+        """Wait for any animations to complete."""
+        await self._idle_event.wait()

src/textual/app.py

@@ -664,6 +664,9 @@ class App(Generic[ReturnType], DOMNode):
                                 events.Key(self, key, key if len(key) == 1 else None)
                             )
                             await asyncio.sleep(0.01)
+
+                    await app._animator.wait_for_idle()
+
                     if screenshot:
                         self._screenshot = self.export_screenshot(
                             title=screenshot_title