termcast 1.3.50 → 1.3.52

package/src/examples/graph-row.vitest.tsx

@@ -39,17 +39,17 @@ test('side detail shows two graphs in a row', async () => {
        Mixed Variants Area left, Striped right        │ Filled chart (right) shows memory steadily
        Sparse Data (Zeros) Filled vs Striped with zer │ climbing.
                                                       │
-                                                      │ 100│            ⡀     100│
-                                                      │    │     ⡄     ⣼⣷⡀       │             ▄▄▀▀
-                                                      │  67│    ⣸⣿⡄   ⣸⣿⣿⣧     67│        ▄▄▀▀▀▀▀▀▀
-                                                      │    │  ⣼⣶⣿⣿⣷⡀ ⢰⣿⣿⣿⣿⣧      │   ▄▄▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │    │ ⢸⣿⣿⣿⣿⣿⣷⣀⣿⣿⣿⣿⣿⣿⣇     │▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │  33│⣀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │     0h 6h  12h 18h24h     0h 6h  12h 18h24h
+                                                      │ 100│             ⡀     100│
+                                                      │    │     ⣠     ⢠⣾⣷⡀       │             ▖▖▌▌
+                                                      │  67│    ⣰⣿⣧   ⢀⣿⣿⣿⣇     67│        ▖▖▌▌▌▌▌▌▌
+                                                      │    │  ⢠⣷⣿⣿⣿⣆  ⣾⣿⣿⣿⣿⡄      │   ▖▖▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │    │ ⢀⣿⣿⣿⣿⣿⣿⣆⣸⣿⣿⣿⣿⣿⣿⣄     │▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │  33│⣀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │     0h 6h   12h 18h24h     0h 6h  12h 18h24h
                                                       │
-                                                      │ ───────────────────────────────────────────
+                                                      │ ────────────────────────────────────────────
                                                       │
                                                       │ CPU Peak: 90%
                                                       │
@@ -96,17 +96,17 @@ test('enter pushes full detail with two graphs', async () => {
       Filled chart (right) shows memory steadily climbing.
 
       100│                                           100│
-         │                            ⢀⣠⣴⡄              │                                        ▄
-         │            ⣠⣦             ⣠⣿⣿⣿⣿⣦             │                               ▄▄▄▄▄▀▀▀▀▀
-         │          ⢠⣾⣿⣿⣷⡄         ⢀⣼⣿⣿⣿⣿⣿⣿⣷⡀           │                     ▄▄▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-       67│      ⢀⡀ ⣰⣿⣿⣿⣿⣿⣿⡄       ⢀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣷⡀        67│               ▄▄▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-         │     ⢠⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⡄     ⢀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡄         │        ▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-         │    ⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⡀   ⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣄⡀       │  ▄▄▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-       33│  ⢀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣤⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄   33│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-         │⣀⣤⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷    │▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-         │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-         │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-        0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+         │                            ⢀⣠⣴⡄              │                                        ▖
+         │            ⣠⣦             ⣠⣿⣿⣿⣿⣦             │                               ▖▖▖▖▖▌▌▌▌▌
+         │          ⢠⣾⣿⣿⣷⡄         ⢀⣼⣿⣿⣿⣿⣿⣿⣷⡀           │                     ▖▖▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       67│      ⢀⡀ ⣰⣿⣿⣿⣿⣿⣿⡄       ⢀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣷⡀        67│               ▖▖▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+         │     ⢠⣿⣿⣷⣿⣿⣿⣿⣿⣿⣿⣿⡄     ⢀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡄         │        ▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+         │    ⣠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⡀   ⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣄⡀       │  ▖▖▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       33│  ⢀⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣤⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄   33│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+         │⣀⣤⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+         │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+         │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+        0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
 
 
       esc go back   ^k actions   ↵ Go Back                                     powered by termcast.app
@@ -159,13 +159,13 @@ test('esc returns from detail to list', async () => {
        Sparse Data (Zeros) Filled vs Striped with zer │ climbing.
                                                       │
                                                       │ 100│             ⡀     100│
-                                                      │    │     ⣠     ⢠⣾⣷⡀       │             ▄▄▀▀
-                                                      │  67│    ⣰⣿⣧   ⢀⣿⣿⣿⣇     67│        ▄▄▀▀▀▀▀▀▀
-                                                      │    │  ⢠⣷⣿⣿⣿⣆  ⣾⣿⣿⣿⣿⡄      │   ▄▄▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │    │ ⢀⣿⣿⣿⣿⣿⣿⣆⣸⣿⣿⣿⣿⣿⣿⣄     │▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │  33│⣀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+                                                      │    │     ⣠     ⢠⣾⣷⡀       │             ▖▖▌▌
+                                                      │  67│    ⣰⣿⣧   ⢀⣿⣿⣿⣇     67│        ▖▖▌▌▌▌▌▌▌
+                                                      │    │  ⢠⣷⣿⣿⣿⣆  ⣾⣿⣿⣿⣿⡄      │   ▖▖▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │    │ ⢀⣿⣿⣿⣿⣿⣿⣆⣸⣿⣿⣿⣿⣿⣿⣄     │▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │  33│⣀⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
                                                       │     0h 6h   12h 18h24h     0h 6h  12h 18h24h
                                                       │
                                                       │ ────────────────────────────────────────────
@@ -215,14 +215,14 @@ test('sparse data with zeros shows baseline', async () => {
        Mixed Variants Area left, Striped right        │ baseline line so bars are visible even at
       ›Sparse Data (Zeros) Filled vs Striped with zer │ zero.
                                                       │
-                                                      │ 100│               ▄   100│              ▄
-                                                      │    │      ▄       ▄▀      │      ▄      ▄▀
-                                                      │  67│      ▀       ▀▀    67│      ▀      ▀▀
-                                                      │    │     ▀▀   ▄▀  ▀▀      │     ▀▀  ▄▀  ▀▀
-                                                      │    │     ▀▀   ▀▀  ▀▀▄     │     ▀▀  ▀▀  ▀▀▄
-                                                      │  33│   ▄ ▀▀▀  ▀▀▄▀▀▀▀   33│   ▄ ▀▀▀ ▀▀▄ ▀▀▀
-                                                      │    │  ▀▀▀▀▀▀ ▀▀▀▀▀▀▀▀     │  ▀▀▀▀▀▀▀▀▀▀ ▀▀▀
-                                                      │   0│▁▀▀▀▀▀▀▀▁▀▀▀▀▀▀▀▀▁   0│▁▀▀▀▀▀▀▀▀▀▀▀▁▀▀▀▁
+                                                      │ 100│               ▖   100│              ▖
+                                                      │    │      ▖       ▖▌      │      ▖      ▖▌
+                                                      │  67│      ▌       ▌▌    67│      ▌      ▌▌
+                                                      │    │     ▌▌   ▖▌  ▌▌      │     ▌▌  ▖▌  ▌▌
+                                                      │    │     ▌▌   ▌▌  ▌▌▖     │     ▌▌  ▌▌  ▌▌▖
+                                                      │  33│   ▖ ▌▌▌  ▌▌▖▌▌▌▌   33│   ▖ ▌▌▌ ▌▌▖ ▌▌▌
+                                                      │    │  ▌▌▌▌▌▌ ▌▌▌▌▌▌▌▌     │  ▌▌▌▌▌▌▌▌▌▌ ▌▌▌
+                                                      │   0│▖▌▌▌▌▌▌▌▖▌▌▌▌▌▌▌▌▖   0│▖▌▌▌▌▌▌▌▌▌▌▌▖▌▌▌▖
                                                       │     0h 6h   12h 18h24h     0h 6h  12h 18h24h
                                                       │
                                                       │ ────────────────────────────────────────────
@@ -273,14 +273,14 @@ test('navigate to striped pair', async () => {
                                                       │ - Expenses: $8k to $45k
                                                       │
                                                       │
-                                                      │ 78│                 ▄ 47│                 ▄
-                                                      │   │              ▄▀▀▀   │             ▄▄▀▀▀
-                                                      │ 54│            ▄▀▀▀▀▀ 33│           ▄▄▀▀▀▀▀
-                                                      │   │         ▄▄▀▀▀▀▀▀▀   │         ▄▀▀▀▀▀▀▀▀
-                                                      │   │      ▄ ▀▀▀▀▀▀▀▀▀▀   │      ▄▄▀▀▀▀▀▀▀▀▀▀
-                                                      │ 31│    ▄▀▀▀▀▀▀▀▀▀▀▀▀▀ 20│    ▄▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │   │ ▄ ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀   │  ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-                                                      │  7│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀  6│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+                                                      │ 78│                 ▖ 47│                 ▖
+                                                      │   │              ▖▌▌▌   │             ▖▖▌▌▌
+                                                      │ 54│            ▖▌▌▌▌▌ 33│           ▖▖▌▌▌▌▌
+                                                      │   │         ▖▖▌▌▌▌▌▌▌   │         ▖▌▌▌▌▌▌▌▌
+                                                      │   │      ▖ ▌▌▌▌▌▌▌▌▌▌   │      ▖▖▌▌▌▌▌▌▌▌▌▌
+                                                      │ 31│    ▖▌▌▌▌▌▌▌▌▌▌▌▌▌ 20│    ▖▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │   │ ▖ ▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌   │  ▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │  7│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌  6│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
                                                       │    Jan  Apr  Jul  Oct    Jan  Apr  Jul  Oct
                                                       │
                                                       │ ───────────────────────────────────────────
@@ -291,5 +291,5 @@ test('navigate to striped pair', async () => {
   `)
 
   expect(text).toContain('›Revenue vs Expenses')
-  expect(text).toMatch(/[▄▀]/)
+  expect(text).toMatch(/[▌▘▖]/)
 }, 30000)

package/src/examples/graph-styles.vitest.tsx

@@ -93,18 +93,18 @@ test('filled style renders block characters', async () => {
        Filled - Yellow CPU High contrast on │ Q2: $25k  → Q3: $50k (+100%)
        Filled - Magenta Waves Smooth curve  │ Q3: $50k  → Q4: $75k (+50%)
        Striped - Purple/Orange Warm alterna │
-       Striped - Blue/Red High contrast str │ 78│                             ▄
-       Striped - Theme Default primary + ac │   │                         ▄▀▄▀▀
-       Striped - Green/Yellow Nature-inspir │   │                     ▄▄▄▀▀▀▀▀▀
-       Striped - Red/Magenta Warm gradient  │ 54│                   ▄▀▀▀▀▀▀▀▀▀▀
-                                            │   │               ▄▄▄▀▀▀▀▀▀▀▀▀▀▀▀
-                                            │   │           ▄ ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-       ↵ open detail   ↑↓ navigate   ^k act │ 31│         ▄▀▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ ▼
+       Striped - Blue/Red High contrast str │ 78│                             ▖
+       Striped - Theme Default primary + ac │   │                         ▖▌▖▌▌
+       Striped - Green/Yellow Nature-inspir │   │                     ▖▖▖▌▌▌▌▌▌
+       Striped - Red/Magenta Warm gradient  │ 54│                   ▖▌▌▌▌▌▌▌▌▌▌
+                                            │   │               ▖▖▖▌▌▌▌▌▌▌▌▌▌▌▌
+                                            │   │           ▖ ▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       ↵ open detail   ↑↓ navigate   ^k act │ 31│         ▖▌▌▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌ ▼
 
     "
   `)
 
-  expect(text).toMatch(/[▄▀]/)
+  expect(text).toMatch(/[▌▘▖]/)
   expect(text).toContain('›Filled - Red')
 }, 30000)
 
@@ -136,16 +136,16 @@ test('striped style renders alternating columns', async () => {
 
        > Search...
 
-       Area - Stock Price Orange braille do │ 211│                            ▄ ▲
-       Area - Multi Series CPU + Memory ove │    │                         ▄▄▀▀ █
-       Area - Waves Purple + Magenta sine/c │    │                     ▄▄▄▀▀▀▀▀ █
-       Area - Blue Revenue Single series, a │ 189│                ▄▄▀▄▀▀▀▀▀▀▀▀▀
-       Filled - Red Revenue Solid block gro │    │             ▄▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀
-       Filled - Green Temp Daily temperatur │    │           ▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-       Filled - Yellow CPU High contrast on │ 167│       ▄▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-       Filled - Magenta Waves Smooth curve  │    │    ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-      ›Striped - Purple/Orange Warm alterna │    │▄▀▄▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
-       Striped - Blue/Red High contrast str │ 145│▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
+       Area - Stock Price Orange braille do │ 211│                            ▖ ▲
+       Area - Multi Series CPU + Memory ove │    │                         ▖▖▌▌ █
+       Area - Waves Purple + Magenta sine/c │    │                     ▖▖▖▌▌▌▌▌ █
+       Area - Blue Revenue Single series, a │ 189│                ▖▖▌▖▌▌▌▌▌▌▌▌▌
+       Filled - Red Revenue Solid block gro │    │             ▖▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Filled - Green Temp Daily temperatur │    │           ▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Filled - Yellow CPU High contrast on │ 167│       ▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Filled - Magenta Waves Smooth curve  │    │    ▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+      ›Striped - Purple/Orange Warm alterna │    │▖▌▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Striped - Blue/Red High contrast str │ 145│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
        Striped - Theme Default primary + ac │     1      5     10     15     20
        Striped - Green/Yellow Nature-inspir │
        Striped - Red/Magenta Warm gradient  │ ─────────────────────────────────
@@ -156,7 +156,7 @@ test('striped style renders alternating columns', async () => {
     "
   `)
 
-  expect(text).toMatch(/[▄▀]/)
+  expect(text).toMatch(/[▌▘▖]/)
   expect(text).toContain('›Striped - Purple')
 }, 30000)
 

package/src/examples/internal/descendants-rerender.vitest.tsx

@@ -30,17 +30,29 @@ test(
         [1] Banana (without hook, renders: 8)
         [2] Cherry (without hook, renders: 9)
 
-        ┌──────────────────────────────────────────────────────────────────────────┐
-        │                                                                          │
-        │ Render Counts:                                                           │
-        │   parent: 1                                                              │
-        │   parentWithHook: 0                                                      │
-        │   independentChild: 0                                                    │
-        │   independentChildWithHook: 0                                            │
-        │   descendantItem: 3                                                      │
-        │   descendantItemWithHook: 0                                              │
-        │                                                                          │
-        └──────────────────────────────────────────────────────────────────────────┘
+        ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+        │                                                                                                                  │
+        │ Render Counts:                                                                                                   │
+        │   parent: 1                                                                                                      │
+        │   parentWithHook: 0                                                                                              │
+        │   independentChild: 0                                                                                            │
+        │   independentChildWithHook: 0                                                                                    │
+        │   descendantItem: 3                                                                                              │
+        │   descendantItemWithHook: 0                                                                                      │
+        │                                                                                                                  │
+        └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+
+
+
+
+
+
+
+
+
+
 
 
       "
@@ -75,17 +87,29 @@ test(
         [1] Banana (without hook, renders: 8)
         [2] Cherry (without hook, renders: 9)
 
-        ┌──────────────────────────────────────────────────────────────────────────┐
-        │                                                                          │
-        │ Render Counts:                                                           │
-        │   parent: 0                                                              │
-        │   parentWithHook: 1                                                      │
-        │   independentChild: 0                                                    │
-        │   independentChildWithHook: 0                                            │
-        │   descendantItem: 3                                                      │
-        │   descendantItemWithHook: 0                                              │
-        │                                                                          │
-        └──────────────────────────────────────────────────────────────────────────┘
+        ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+        │                                                                                                                  │
+        │ Render Counts:                                                                                                   │
+        │   parent: 0                                                                                                      │
+        │   parentWithHook: 1                                                                                              │
+        │   independentChild: 0                                                                                            │
+        │   independentChildWithHook: 0                                                                                    │
+        │   descendantItem: 3                                                                                              │
+        │   descendantItemWithHook: 0                                                                                      │
+        │                                                                                                                  │
+        └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+
+
+
+
+
+
+
+
+
+
 
       "
     `)
@@ -115,26 +139,38 @@ test(
       "
 
 
-        Items:i3:|i[a]padde|t[d]ideleteh|h[r] reset counts
-
+        Scenario: independent-child-with-hook
+        Items: 3 | [a] add | [d] delete | [r] reset counts
 
         Parent without hook - renders: 2
         Independent child with hook - renders: 3, items: 3
-        [0]eApplen(withoutwhook,trenders:r7)ders: 2
+        Independent child without hook - renders: 2
+        [0] Apple (without hook, renders: 7)
         [1] Banana (without hook, renders: 8)
         [2] Cherry (without hook, renders: 9)
 
+        ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+        │                                                                                                                  │
+        │ Render Counts:                                                                                                   │
+        │   parent: 1                                                                                                      │
+        │   parentWithHook: 0                                                                                              │
+        │   independentChild: 1                                                                                            │
+        │   independentChildWithHook: 1                                                                                    │
+        │   descendantItem: 3                                                                                              │
+        │   descendantItemWithHook: 0                                                                                      │
+        │                                                                                                                  │
+        └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+
+
+
+
+
+
+
+
 
-        ┌──────────────────────────────────────────────────────────────────────────┐
-        │                                                                          │
-        │ Reparent:u1ts:                                                           │
-        │   parentWithHook: 0                                                      │
-        │   independentChild: 1                                                    │
-        │   independentChildWithHook: 1                                            │
-        │   descendantItem: 3                                                      │
-        │   descendantItemWithHook: 0                                              │
-        │                                                                          │
-        └──────────────────────────────────────────────────────────────────────────┘
 
       "
     `)
@@ -172,17 +208,29 @@ test(
         [1] Banana (with hook, renders: 8, total: 3)
         [2] Cherry (with hook, renders: 9, total: 3)
 
-        ┌──────────────────────────────────────────────────────────────────────────┐
-        │                                                                          │
-        │ Render Counts:                                                           │
-        │   parent: 1                                                              │
-        │   parentWithHook: 0                                                      │
-        │   independentChild: 0                                                    │
-        │   independentChildWithHook: 0                                            │
-        │   descendantItem: 0                                                      │
-        │   descendantItemWithHook: 3                                              │
-        │                                                                          │
-        └──────────────────────────────────────────────────────────────────────────┘
+        ┌──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+        │                                                                                                                  │
+        │ Render Counts:                                                                                                   │
+        │   parent: 1                                                                                                      │
+        │   parentWithHook: 0                                                                                              │
+        │   independentChild: 0                                                                                            │
+        │   independentChildWithHook: 0                                                                                    │
+        │   descendantItem: 0                                                                                              │
+        │   descendantItemWithHook: 3                                                                                      │
+        │                                                                                                                  │
+        └──────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+
+
+
+
+
+
+
+
+
+
+
+
 
 
       "

package/src/examples/internal/simple-scrollbox.vitest.tsx

@@ -23,20 +23,32 @@ test('simple scrollbox navigation and scrolling', async () => {
 
 
        Simple ScrollBox Demo
-                                                                                 ▀
-       Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+                                                                                                                         ▀
+       Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
-       Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+       Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
-       Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+       Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 5 - This is content for item number 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 6 - This is content for item number 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
 
+       Item 7 - This is content for item number 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
@@ -59,22 +71,34 @@ test('simple scrollbox navigation and scrolling', async () => {
 
 
        Simple ScrollBox Demo
-       Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet,   ▀
-       consectetur adipiscing elit.
+       Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.              ▄
 
 
 
-       Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+       Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
-       Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
+       Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 5 - This is content for item number 5. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 6 - This is content for item number 6. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+       Item 7 - This is content for item number 7. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
 
 
-       Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet,
 
        Use mouse scroll or arrow keys | Press [q] to quit