termcast 1.3.54 → 1.4.0

package/src/examples/form-basic.vitest.tsx

@@ -221,7 +221,7 @@ test('form date picker selection with space and enter', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←      February     →
+      │   ←       April       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -279,7 +279,7 @@ test('form date picker selection with space and enter', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←      February     →
+      │   ←       April       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -338,7 +338,7 @@ test('form date picker selection with space and enter', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←      February     →
+      │   ←       April       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -413,7 +413,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←      February     →
+      │   ←       April       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -471,7 +471,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←      February     →
+      │   ←       April       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -531,7 +531,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←      February     →
+      │   ←       April       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -589,7 +589,7 @@ test('form dropdown navigation', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←      February     →
+      │   ←       April       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -648,17 +648,17 @@ test('form scrolls with mouse wheel', async () => {
 
 
 
-      │  This demonstrates all available form input types. Use arrow   ▀
-      │  keys or Tab to navigate between fields.
-      │
-      ◇  Username
       │  Enter your username
-      │
+      │                                                                ▀
       │  Required field
       │
       ◇  Password
       │  Enter secure password
       │
+      │  Must be at least 8 characters
+      │
+      ◇  Biography
+      │  Tell us about yourself...
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -676,9 +676,7 @@ test('form scrolls with mouse wheel', async () => {
 
 
 
-      ■  Form Component Demo                                           ▀
-      │  This demonstrates all available form input types. Use arrow
-      │  keys or Tab to navigate between fields.
+      │  keys or Tab to navigate between fields.                       ▄
       │
       ◇  Username
       │  Enter your username
@@ -687,6 +685,8 @@ test('form scrolls with mouse wheel', async () => {
       │
       ◇  Password
       │  Enter secure password
+      │
+      │  Must be at least 8 characters
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -763,7 +763,7 @@ test('arrow down from checkbox to dropdown lands on first item', async () => {
       ◇  Date of Birth
       │
       │   ←        2026       →
-      │   ←      February     →
+      │   ←       April       →
 
 
        ctrl ↵ submit   tab navigate   ^k actions
@@ -855,13 +855,17 @@ test('date picker down boundary moves focus to next form field', async () => {
   const datePickerFocusedSnapshot = await session.text()
   expect(datePickerFocusedSnapshot).toMatch(/◆\s+Date of Birth/)
 
-  await session.type('10')
+  // Type day 5: always needs exactly 4 downs to exit the calendar
+  // regardless of month length (5→12→19→26→exit works for 28-31 day months).
+  // Day 10 is month-dependent: 4 downs in 31-day months, 3 downs in 30-day months.
+  await session.type('5')
   await session.press('down')
 
   const nonBoundaryDownSnapshot = await session.text()
   expect(nonBoundaryDownSnapshot).toMatch(/◆\s+Date of Birth/)
   expect(nonBoundaryDownSnapshot).not.toMatch(/◆\s+Upload Documents/)
 
+  await session.press('down')
   await session.press('down')
   await session.press('down')
 

package/src/examples/github.vitest.tsx

@@ -97,7 +97,7 @@ test.skipIf(!extensionExists)('github extension shows command list on launch', a
 
 
 
-       ↵ run command   ↑↓ navigate   ^k actions           powered by termcast.app
+       ↵ run command   ↑↓ navigate   ^k actions   :vim    powered by termcast.app
 
 
 
@@ -146,7 +146,7 @@ test.skipIf(!extensionExists)('github extension can navigate commands', async ()
 
 
 
-       ↵ run command   ↑↓ navigate   ^k actions           powered by termcast.app
+       ↵ run command   ↑↓ navigate   ^k actions   :vim    powered by termcast.app
 
 
 
@@ -192,10 +192,10 @@ test.skipIf(!extensionExists)('github extension can open actions panel', async (
       │   Settings                                                               │
       │   Configure GitHub...                                             ⌃⇧,    │
       │   Change Theme...                                                        │
+      │   Enable Vim Mode                                                        │
       │   Toggle Console Logs                                                    │
       │                                                                          │
       │                                                                          │
-      │                                                                          │
       │   ↵ select   ↑↓ navigate                                                 │
       │                                                                          │
       ╰──────────────────────────────────────────────────────────────────────────╯
@@ -239,7 +239,7 @@ test.skipIf(!extensionExists)('github extension can search commands', async () =
 
 
 
-       ↵ run command   ↑↓ navigate   ^k actions           powered by termcast.app
+       ↵ run command   ↑↓ navigate   ^k actions   :vim    powered by termcast.app
 
 
 

package/src/examples/graph-bar-chart.vitest.tsx

@@ -17,12 +17,14 @@ afterEach(() => {
 })
 
 test('initial render shows bar chart for Monthly Budget', async () => {
-  const text = await session.text({
+  await session.text({
     waitFor: (text) => {
       return text.includes('Monthly Budget') && text.includes('Spent')
     },
     timeout: 10000,
   })
+  await session.waitIdle()
+  const text = await session.text()
 
   expect(text).toMatchInlineSnapshot(`
     "
@@ -46,7 +48,7 @@ test('initial render shows bar chart for Monthly Budget', async () => {
        Stress Test (20 items) Many small equal segmen │
                                                       │
                                                       │
-       ↵ open detail   ↑↓ navigate   ^k actions       │
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
 
 
@@ -103,7 +105,7 @@ test('navigate to Market Share - dominant + tiny segments', async () => {
        Stress Test (20 items) Many small equal segmen │
                                                       │
                                                       │
-       ↵ open detail   ↑↓ navigate   ^k actions       │
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
 
 
@@ -159,7 +161,7 @@ test('navigate to Equal Distribution - 10 segments', async () => {
        Stress Test (20 items) Many small equal segmen │
                                                       │
                                                       │
-       ↵ open detail   ↑↓ navigate   ^k actions       │
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
 
 
@@ -215,7 +217,7 @@ test('navigate to Stress Test - 20 segments', async () => {
       ›Stress Test (20 items) Many small equal segmen │
                                                       │
                                                       │
-       ↵ open detail   ↑↓ navigate   ^k actions       │
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │
 
 
 
@@ -253,18 +255,16 @@ test('enter pushes full detail view with bar chart', async () => {
                                                                                                      █
                                                                                                      █
       Monthly Budget                                                                                 █
-                                                                                                     ▀
-      Spent / Remaining / Savings
-
+                                                                                                     █
+                                                                                                     █
+      Spent / Remaining / Savings                                                                    ▀
       Monthly Budget
 
-      Budget allocation for the current month.
 
+      Budget allocation for the current month.
       - Spent: $4,850 (78.6%)
       - Remaining: $707 (11.5%)
       - Savings: $617 (10.0%)
-
-
       Segments: 3
       Total: 6,174
 
@@ -273,6 +273,8 @@ test('enter pushes full detail view with bar chart', async () => {
 
       ────────────────────────────────────────────────────────────────────────────────────────────
 
+      Total: $6,174
+
 
 
       esc go back   ^k actions   ↵ Go Back                                     powered by termcast.app

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

@@ -50,7 +50,7 @@ test('polymarket list with graph detail renders correctly', async () => {
                                                       │
                                                       │ ────────────────────────────────────────────
                                                       │
-       ↵ buy yes   ↑↓ navigate   ^k actions           │ Probability (30d)
+       ↵ buy yes   ↑↓ navigate   ^k actions   :vim    │ Probability (30d)
 
 
 
@@ -113,7 +113,7 @@ test('navigating to different market updates the graph', async () => {
                                                       │
                                                       │ ────────────────────────────────────────────
                                                       │
-       ↵ buy yes   ↑↓ navigate   ^k actions           │ Probability (30d)
+       ↵ buy yes   ↑↓ navigate   ^k actions   :vim    │ Probability (30d)
 
 
 

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

@@ -32,28 +32,28 @@ test('side detail shows two graphs in a row', async () => {
 
        > Search...
 
-      ›CPU vs Memory Area + Filled side by side       │ CPU vs Memory
-       Disk I/O Read vs Write operations              │
-       Revenue vs Expenses Striped comparison         │ Area chart (left) shows CPU with high
-       Weather Station Temperature + Humidity         │ variance.
-       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
+      ›CPU vs Memory Area + Filled side by side       │                                             ▲
+       Disk I/O Read vs Write operations              │                                             █
+       Revenue vs Expenses Striped comparison         │                                             █
+       Weather Station Temperature + Humidity         │                                             █
+       Mixed Variants Area left, Striped right        │                                             █
+       Sparse Data (Zeros) Filled vs Striped with zer │                                             █
+                                                      │                                             █
+                                                      │                                             █
+                                                      │ 100│            ⡀     100│                  █
+                                                      │    │     ⡄     ⣼⣷⡀       │             ▖▖▌▌ █
+                                                      │  67│    ⣸⣿⡄   ⣸⣿⣿⣧     67│        ▖▖▌▌▌▌▌▌▌ █
+                                                      │    │  ⣼⣶⣿⣿⣷⡀ ⢰⣿⣿⣿⣿⣧      │   ▖▖▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │    │ ⢸⣿⣿⣿⣿⣿⣷⣀⣿⣿⣿⣿⣿⣿⣇     │▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │  33│⣀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │     0h 6h  12h 18h24h     0h 6h  12h 18h24h
                                                       │
-                                                      │ ────────────────────────────────────────────
+                                                      │ ───────────────────────────────────────────
                                                       │
                                                       │ CPU Peak: 90%
-                                                      │
-       ↵ open detail   ↑↓ navigate   ^k actions       │ Mem Peak: 86%
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │                                             ▼
 
     "
   `)
@@ -88,10 +88,11 @@ test('enter pushes full detail with two graphs', async () => {
                                                                                                      █
       CPU vs Memory                                                                                  ▀
 
-      Area + Filled side by side
 
+      Area + Filled side by side
       CPU vs Memory
 
+
       Area chart (left) shows CPU with high variance.
       Filled chart (right) shows memory steadily climbing.
 
@@ -106,7 +107,6 @@ test('enter pushes full detail with two graphs', async () => {
          │⣀⣤⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
          │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
          │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
-        0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
 
 
       esc go back   ^k actions   ↵ Go Back                                     powered by termcast.app
@@ -151,28 +151,28 @@ test('esc returns from detail to list', async () => {
 
        > Search...
 
-      ›CPU vs Memory Area + Filled side by side       │ CPU vs Memory
-       Disk I/O Read vs Write operations              │
-       Revenue vs Expenses Striped comparison         │ Area chart (left) shows CPU with high
-       Weather Station Temperature + Humidity         │ variance.
-       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
+      ›CPU vs Memory Area + Filled side by side       │ CPU vs Memory                               ▲
+       Disk I/O Read vs Write operations              │                                             █
+       Revenue vs Expenses Striped comparison         │                                             █
+       Weather Station Temperature + Humidity         │ Area chart (left) shows CPU with high       █
+       Mixed Variants Area left, Striped right        │ variance.                                   █
+       Sparse Data (Zeros) Filled vs Striped with zer │ Filled chart (right) shows memory steadily  █
+                                                      │ climbing.                                   █
+                                                      │                                             █
+                                                      │ 100│            ⡀     100│                  █
+                                                      │    │     ⡄     ⣼⣷⡀       │             ▖▖▌▌ █
+                                                      │  67│    ⣸⣿⡄   ⣸⣿⣿⣧     67│        ▖▖▌▌▌▌▌▌▌ █
+                                                      │    │  ⣼⣶⣿⣿⣷⡀ ⢰⣿⣿⣿⣿⣧      │   ▖▖▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │    │ ⢸⣿⣿⣿⣿⣿⣷⣀⣿⣿⣿⣿⣿⣿⣇     │▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │  33│⣀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+                                                      │     0h 6h  12h 18h24h     0h 6h  12h 18h24h
                                                       │
-                                                      │ ────────────────────────────────────────────
+                                                      │ ───────────────────────────────────────────
                                                       │
                                                       │ CPU Peak: 90%
-                                                      │
-       ↵ open detail   ↑↓ navigate   ^k actions       │ Mem Peak: 86%
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │                                             ▼
 
     "
   `)
@@ -208,28 +208,28 @@ test('sparse data with zeros shows baseline', async () => {
 
        > Search...
 
-       CPU vs Memory Area + Filled side by side       │ Sparse Data
-       Disk I/O Read vs Write operations              │
-       Revenue vs Expenses Striped comparison         │ Data with many zero values should show a
-       Weather Station Temperature + Humidity         │ thin
-       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│▖▌▌▌▌▌▌▌▌▌▌▌▖▌▌▌▖
-                                                      │     0h 6h   12h 18h24h     0h 6h  12h 18h24h
+       CPU vs Memory Area + Filled side by side       │ Sparse Data                                 ▲
+       Disk I/O Read vs Write operations              │                                             █
+       Revenue vs Expenses Striped comparison         │                                             █
+       Weather Station Temperature + Humidity         │ Data with many zero values should show a    █
+       Mixed Variants Area left, Striped right        │ thin                                        █
+      ›Sparse Data (Zeros) Filled vs Striped with zer │ baseline line so bars are visible even at   █
+                                                      │ zero.                                       █
+                                                      │                                             █
+                                                      │ 100│              ▖   100│              ▖   █
+                                                      │    │      ▖      ▖▌      │      ▖      ▖▌   █
+                                                      │  67│      ▌      ▌▌    67│      ▌      ▌▌   █
+                                                      │    │     ▌▌  ▖▌  ▌▌      │     ▌▌  ▖▌  ▌▌
+                                                      │    │     ▌▌  ▌▌  ▌▌▖     │     ▌▌  ▌▌  ▌▌▖
+                                                      │  33│   ▖ ▌▌▌ ▌▌▖ ▌▌▌   33│   ▖ ▌▌▌ ▌▌▖ ▌▌▌
+                                                      │    │  ▌▌▌▌▌▌▌▌▌▌ ▌▌▌     │  ▌▌▌▌▌▌▌▌▌▌ ▌▌▌
+                                                      │   0│▖▌▌▌▌▌▌▌▌▌▌▌▖▌▌▌▖   0│▖▌▌▌▌▌▌▌▌▌▌▌▖▌▌▌▖
+                                                      │     0h 6h  12h 18h24h     0h 6h  12h 18h24h
                                                       │
-                                                      │ ────────────────────────────────────────────
+                                                      │ ───────────────────────────────────────────
                                                       │
                                                       │ Zeros: 12 of 20
-                                                      │
-       ↵ open detail   ↑↓ navigate   ^k actions       │ Peak:  90
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │                                             ▼
 
     "
   `)
@@ -266,12 +266,11 @@ test('navigate to striped pair', async () => {
 
        CPU vs Memory Area + Filled side by side       │ Revenue vs Expenses                         ▲
        Disk I/O Read vs Write operations              │                                             █
-      ›Revenue vs Expenses Striped comparison         │ Revenue growing faster than expenses.       █
-       Weather Station Temperature + Humidity         │ Profit margin widening over the year.       █
-       Mixed Variants Area left, Striped right        │                                             █
-       Sparse Data (Zeros) Filled vs Striped with zer │ - Revenue: $10k to $75k
-                                                      │ - Expenses: $8k to $45k
-                                                      │
+      ›Revenue vs Expenses Striped comparison         │                                             █
+       Weather Station Temperature + Humidity         │ Revenue growing faster than expenses.       █
+       Mixed Variants Area left, Striped right        │ Profit margin widening over the year.       █
+       Sparse Data (Zeros) Filled vs Striped with zer │ - Revenue: $10k** to **$75k                 █
+                                                      │ - Expenses: $8k** to **$45k
                                                       │
                                                       │ 78│                 ▖ 47│                 ▖
                                                       │   │              ▖▌▌▌   │             ▖▖▌▌▌
@@ -285,7 +284,8 @@ test('navigate to striped pair', async () => {
                                                       │
                                                       │ ───────────────────────────────────────────
                                                       │
-       ↵ open detail   ↑↓ navigate   ^k actions       │ Revenue:  $75k                              ▼
+                                                      │ Revenue:  $75k
+       ↵ open detail   ↑↓ navigate   ^k actions   :vi │                                             ▼
 
     "
   `)

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

@@ -86,9 +86,9 @@ test('filled style renders block characters', async () => {
 
        Area - Stock Price Orange braille do │ Revenue Growth                    ▲
        Area - Multi Series CPU + Memory ove │                                   █
-       Area - Waves Purple + Magenta sine/c │ Quarterly revenue from $10k to
-       Area - Blue Revenue Single series, a │ $75k.
-      ›Filled - Red Revenue Solid block gro │
+       Area - Waves Purple + Magenta sine/c │
+       Area - Blue Revenue Single series, a │ Quarterly revenue from $10k** to
+      ›Filled - Red Revenue Solid block gro │ **$75k.
        Filled - Green Temp Daily temperatur │ Q1: $10k  → Q2: $25k (+150%)
        Filled - Yellow CPU High contrast on │ Q2: $25k  → Q3: $50k (+100%)
        Filled - Magenta Waves Smooth curve  │ Q3: $50k  → Q4: $75k (+50%)
@@ -188,20 +188,20 @@ test('markdown + metadata detail view in list', async () => {
 
        Area - Stock Price Orange braille do │ System Metrics                    ▲
       ›Area - Multi Series CPU + Memory ove │                                   ▀
-       Area - Waves Purple + Magenta sine/c │ CPU usage (blue) vs memory usage (
-       Area - Blue Revenue Single series, a │ green) over 24 hours.
-       Filled - Red Revenue Solid block gro │
+       Area - Waves Purple + Magenta sine/c │
+       Area - Blue Revenue Single series, a │ CPU usage (blue) vs memory usage (
+       Filled - Red Revenue Solid block gro │ green) over 24 hours.
        Filled - Green Temp Daily temperatur │ - Peak CPU at 90% around 15h
        Filled - Yellow CPU High contrast on │ - Memory steadily climbing to 86%
        Filled - Magenta Waves Smooth curve  │ - CPU has high variance, memory
        Striped - Purple/Orange Warm alterna │ is monotonic
        Striped - Blue/Red High contrast str │
-       Striped - Theme Default primary + ac │
-       Striped - Green/Yellow Nature-inspir │ 100│
-       Striped - Red/Magenta Warm gradient  │    │                   ⣠⣶⣧   ⣀⣠⣤⣶
-                                            │  75│       ⢀⣴⣧       ⢀⣰⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿
+       Striped - Theme Default primary + ac │ 100│
+       Striped - Green/Yellow Nature-inspir │    │                   ⣠⣶⣧   ⣀⣠⣤⣶
+       Striped - Red/Magenta Warm gradient  │  75│       ⢀⣴⣧       ⢀⣰⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿
                                             │    │      ⢀⣾⣿⣿⣧⢀⣀⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       ↵ open detail   ↑↓ navigate   ^k act │    │   ⢀⣾⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▼
+                                            │    │   ⢀⣾⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       ↵ open detail   ↑↓ navigate   ^k act │  50│⣀⣀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▼
 
     "
   `)
@@ -236,8 +236,8 @@ test('enter pushes full detail view with graph', async () => {
 
       Area - Stock Price
 
-      Orange braille dots
 
+      Orange braille dots
       Variant: area
       Data points: 20
 

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

@@ -5,6 +5,8 @@ test('simple scrollbox navigation and scrolling', async () => {
   const session = await launchTerminal({
     command: 'bun',
     args: ['src/examples/internal/simple-scrollbox.tsx'],
+    cols: 80,
+    rows: 20,
   })
 
   // Wait for initial render with Item 1 visible
@@ -23,34 +25,18 @@ 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 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 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 1 - This is content for item number 1. 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 2 - This is content for item number 2. 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 3 - This is content for item number 3. Lorem ipsum dolor sit amet,
 
        Use mouse scroll or arrow keys | Press [q] to quit
 
@@ -71,34 +57,18 @@ 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 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 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 2 - This is content for item number 2. 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 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,
 
        Use mouse scroll or arrow keys | Press [q] to quit
 
@@ -131,10 +101,6 @@ test('simple scrollbox navigation and scrolling', async () => {
 
 
        Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet,
-       consectetur adipiscing elit.
-
-
-
 
        Use mouse scroll or arrow keys | Press [q] to quit