termcast 1.4.1 → 1.6.0

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

@@ -33,14 +33,14 @@ test('polymarket list with graph detail renders correctly', async () => {
        > Search markets...
 
        Trending Markets                               │ 100%│
-      ›Bitcoin above $100k by EOY Crypto              │     │                              ⣠⣀
-       ETH above $5k by Q2 2026 Crypto                │     │          ⢠⣀       ⢀⣴⣷⡀      ⣰⣿⣿⣷⣀⣤⣴⣦⢀⣴
-       Fed cuts rates below 4% Economics              │     │⣠⣴⡀   ⢀  ⢠⣿⣿⣷⡀ ⣀⣤⣀⣀⣾⣿⣿⣿⣶⣴⣿⣿⣶⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       S&P 500 reaches 6,000 Markets                  │  50%│⣿⣿⣷⣄⢀⣴⣿⣿⣾⣿⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       Presidential pardon for SBF Politics           │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       AGI announced by major lab Tech                │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       Solana flips Ethereum market cap Crypto        │   0%│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       US enters recession in 2026 Economics          │      30d         20d         10d         Now
+      ›Bitcoin above $100k by EOY Crypto          72% │     │                              ⣠⣀
+       ETH above $5k by Q2 2026 Crypto            38% │     │          ⢠⣀       ⢀⣴⣷⡀      ⣰⣿⣿⣷⣀⣤⣴⣦⢀⣴
+       Fed cuts rates below 4% Economics          61% │     │⣠⣴⡀   ⢀  ⢠⣿⣿⣷⡀ ⣀⣤⣀⣀⣾⣿⣿⣿⣶⣴⣿⣿⣶⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       S&P 500 reaches 6,000 Markets              55% │  50%│⣿⣿⣷⣄⢀⣴⣿⣿⣾⣿⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Presidential pardon for SBF Politics        8% │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       AGI announced by major lab Tech            12% │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Solana flips Ethereum market cap Crypto    18% │   0%│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       US enters recession in 2026 Economics      28% │      30d         20d         10d         Now
                                                       │
                                                       │ Odds:   72% Yes
                                                       │
@@ -50,10 +50,10 @@ test('polymarket list with graph detail renders correctly', async () => {
                                                       │
                                                       │ ────────────────────────────────────────────
                                                       │
-       ↵ buy yes   ↑↓ navigate   ^k actions   :vim    │ Probability (30d)
-
-
-
+                                                      │ Probability (30d)
+                                                      │
+                                                      │
+       ↵ buy yes   ↑↓ navigate   ^k actions   :vim    │
 
     "
   `)
@@ -96,14 +96,14 @@ test('navigating to different market updates the graph', async () => {
        > Search markets...
 
        Trending Markets                               │ 100%│
-       Bitcoin above $100k by EOY Crypto              │     │
-      ›ETH above $5k by Q2 2026 Crypto                │     │ ⣀
-       Fed cuts rates below 4% Economics              │     │⣿⣿⣆   ⢀⡀ ⣀⣾⣶⣄      ⢀⣤⣦        ⢀⡀
-       S&P 500 reaches 6,000 Markets                  │  50%│⣿⣿⣿⣷⣴⣾⣿⣿⣿⣿⣿⣿⣿⣦⣤⣶⣷⣦⣤⣿⣿⣿⣷⣤⣀⣤⣤⣀⢀⣴⣿⣿⣧ ⣀⣀⡀ ⢀
-       Presidential pardon for SBF Politics           │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣴⣿
-       AGI announced by major lab Tech                │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       Solana flips Ethereum market cap Crypto        │   0%│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       US enters recession in 2026 Economics          │      30d         20d         10d         Now
+       Bitcoin above $100k by EOY Crypto          72% │     │
+      ›ETH above $5k by Q2 2026 Crypto            38% │     │ ⣀
+       Fed cuts rates below 4% Economics          61% │     │⣿⣿⣆   ⢀⡀ ⣀⣾⣶⣄      ⢀⣤⣦        ⢀⡀
+       S&P 500 reaches 6,000 Markets              55% │  50%│⣿⣿⣿⣷⣴⣾⣿⣿⣿⣿⣿⣿⣿⣦⣤⣶⣷⣦⣤⣿⣿⣿⣷⣤⣀⣤⣤⣀⢀⣴⣿⣿⣧ ⣀⣀⡀ ⢀
+       Presidential pardon for SBF Politics        8% │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣴⣿
+       AGI announced by major lab Tech            12% │     │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Solana flips Ethereum market cap Crypto    18% │   0%│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       US enters recession in 2026 Economics      28% │      30d         20d         10d         Now
                                                       │
                                                       │ Odds:   38% Yes
                                                       │
@@ -113,10 +113,10 @@ test('navigating to different market updates the graph', async () => {
                                                       │
                                                       │ ────────────────────────────────────────────
                                                       │
-       ↵ buy yes   ↑↓ navigate   ^k actions   :vim    │ Probability (30d)
-
-
-
+                                                      │ Probability (30d)
+                                                      │
+                                                      │
+       ↵ buy yes   ↑↓ navigate   ^k actions   :vim    │
 
     "
   `)

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

@@ -32,13 +32,13 @@ test('side detail shows two graphs in a row', async () => {
 
        > Search...
 
-      ›CPU vs Memory Area + Filled side by side       │                                             ▲
+      ›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         │                                             █
-       Mixed Variants Area left, Striped right        │                                             █
-       Sparse Data (Zeros) Filled vs Striped with zer │                                             █
-                                                      │                                             █
+       Weather Station Temperature + Humidity         │ Area chart (left) shows CPU with high       █
+       Mixed Variants Area left, Striped right        │ variance.                                   █
+       Sparse ... (Zeros)Filled vs St...h zero values │ Filled chart (right) shows memory steadily  █
+                                                      │ climbing.                                   █
                                                       │                                             █
                                                       │ 100│            ⡀     100│                  █
                                                       │    │     ⡄     ⣼⣷⡀       │             ▖▖▌▌ █
@@ -48,7 +48,7 @@ test('side detail shows two graphs in a row', async () => {
                                                       │  33│⣀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
                                                       │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
                                                       │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
-                                                      │     0h 6h  12h 18h24h     0h 6h  12h 18h24h
+                                                      │     0h 6h  12h 18h        0h 6h  12h 18h
                                                       │
                                                       │ ───────────────────────────────────────────
                                                       │
@@ -156,7 +156,7 @@ test('esc returns from detail to list', async () => {
        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  █
+       Sparse ... (Zeros)Filled vs St...h zero values │ Filled chart (right) shows memory steadily  █
                                                       │ climbing.                                   █
                                                       │                                             █
                                                       │ 100│            ⡀     100│                  █
@@ -167,7 +167,7 @@ test('esc returns from detail to list', async () => {
                                                       │  33│⣀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧  33│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
                                                       │    │⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿    │▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
                                                       │   0│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿   0│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
-                                                      │     0h 6h  12h 18h24h     0h 6h  12h 18h24h
+                                                      │     0h 6h  12h 18h        0h 6h  12h 18h
                                                       │
                                                       │ ───────────────────────────────────────────
                                                       │
@@ -183,7 +183,7 @@ test('esc returns from detail to list', async () => {
 test('sparse data with zeros shows baseline', async () => {
   await session.text({
     waitFor: (text) => {
-      return text.includes('Sparse Data')
+      return text.includes('Sparse ...')
     },
     timeout: 10000,
   })
@@ -195,7 +195,7 @@ test('sparse data with zeros shows baseline', async () => {
 
   const text = await session.text({
     waitFor: (text) => {
-      return text.includes('›Sparse Data')
+      return text.includes('›Sparse ...')
     },
     timeout: 5000,
   })
@@ -213,7 +213,7 @@ test('sparse data with zeros shows baseline', async () => {
        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   █
+      ›Sparse ... (Zeros)Filled vs St...h zero values │ baseline line so bars are visible even at   █
                                                       │ zero.                                       █
                                                       │                                             █
                                                       │ 100│              ▖   100│              ▖   █
@@ -224,7 +224,7 @@ test('sparse data with zeros shows baseline', async () => {
                                                       │  33│   ▖ ▌▌▌ ▌▌▖ ▌▌▌   33│   ▖ ▌▌▌ ▌▌▖ ▌▌▌
                                                       │    │  ▌▌▌▌▌▌▌▌▌▌ ▌▌▌     │  ▌▌▌▌▌▌▌▌▌▌ ▌▌▌
                                                       │   0│▖▌▌▌▌▌▌▌▌▌▌▌▖▌▌▌▖   0│▖▌▌▌▌▌▌▌▌▌▌▌▖▌▌▌▖
-                                                      │     0h 6h  12h 18h24h     0h 6h  12h 18h24h
+                                                      │     0h 6h  12h 18h        0h 6h  12h 18h
                                                       │
                                                       │ ───────────────────────────────────────────
                                                       │
@@ -234,7 +234,7 @@ test('sparse data with zeros shows baseline', async () => {
     "
   `)
 
-  expect(text).toContain('›Sparse Data')
+  expect(text).toContain('›Sparse ...')
 }, 30000)
 
 test('navigate to striped pair', async () => {
@@ -269,7 +269,7 @@ test('navigate to striped pair', async () => {
       ›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                 █
+       Sparse ... (Zeros)Filled vs St...h zero values │ - Revenue: $10k** to **$75k                 █
                                                       │ - Expenses: $8k** to **$45k
                                                       │
                                                       │ 78│                 ▖ 47│                 ▖

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

@@ -19,7 +19,7 @@ afterEach(() => {
 test('area style renders braille characters', async () => {
   const text = await session.text({
     waitFor: (text) => {
-      return text.includes('Area - Stock') && text.includes('│')
+      return /Area.*Price/i.test(text) && text.includes('│')
     },
     timeout: 10000,
   })
@@ -32,19 +32,19 @@ test('area style renders braille characters', 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│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       Striped - Theme Default primary + ac │     1      5     10     15     20
-       Striped - Green/Yellow Nature-inspir │
-       Striped - Red/Magenta Warm gradient  │ ─────────────────────────────────
+      ›Area - Stock PriceOrange ...lle dots │ 211│                            ⣠ ▲
+       Area - ...i Series CPU + M...overlay │    │                        ⢀⣴⣦⣼⣿ █
+       Area - Wave Purple + M...sine/cosine │    │                    ⢠⣦⣄⣴⣿⣿⣿⣿⣿ █
+       Area - ... Revenu Single ...to range │ 189│                ⢀⣴⣷⣦⣿⣿⣿⣿⣿⣿⣿⣿⣿ █
+       Filled ... RevenueSolid b...th chart │    │             ⣠⣀⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▀
+       Filled ...een Tem Daily t...re curve │    │           ⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled ...llow CPUHigh co... on dark │ 167│       ⢀⣴⣿⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled -...nta Wave Smooth... blocks │    │    ⣰⣤⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped -...le/Orang Warm a...colors │    │⢀⣴⡄⢰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped - Blue/Re High co... stripes │ 145│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped ...e Defaultprimar...o prop) │     1      5     10     15     20
+       Striped - Green/Yello Natur...spired │
+       Striped ...d/MagentaWarm g...nt feel │ ─────────────────────────────────
                                             │
                                             │ Variant: area
        ↵ open detail   ↑↓ navigate   ^k act │                                   ▼
@@ -53,7 +53,7 @@ test('area style renders braille characters', async () => {
   `)
 
   expect(text).toMatch(/[\u2800-\u28FF]/)
-  expect(text).toContain('Stock Price')
+  expect(text).toContain('Price')
 }, 30000)
 
 test('filled style renders block characters', async () => {
@@ -71,7 +71,7 @@ test('filled style renders block characters', async () => {
 
   const text = await session.text({
     waitFor: (text) => {
-      return text.includes('›Filled - Red')
+      return /›Filled.*Revenue/i.test(text)
     },
     timeout: 5000,
   })
@@ -84,19 +84,19 @@ test('filled style renders block characters', async () => {
 
        > Search...
 
-       Area - Stock Price Orange braille do │ Revenue Growth                    ▲
-       Area - Multi Series CPU + Memory ove │                                   █
-       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%)
-       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│                   ▖▌▌▌▌▌▌▌▌▌▌
+       Area - Stock PriceOrange ...lle dots │ Revenue Growth                    ▲
+       Area - ...i Series CPU + M...overlay │                                   █
+       Area - Wave Purple + M...sine/cosine │
+       Area - ... Revenu Single ...to range │ Quarterly revenue from $10k** to
+      ›Filled ... RevenueSolid b...th chart │ **$75k.
+       Filled ...een Tem Daily t...re curve │ Q1: $10k  → Q2: $25k (+150%)
+       Filled ...llow CPUHigh co... on dark │ Q2: $25k  → Q3: $50k (+100%)
+       Filled -...nta Wave Smooth... blocks │ Q3: $50k  → Q4: $75k (+50%)
+       Striped -...le/Orang Warm a...colors │
+       Striped - Blue/Re High co... stripes │ 78│                             ▖
+       Striped ...e Defaultprimar...o prop) │   │                         ▖▌▖▌▌
+       Striped - Green/Yello Natur...spired │   │                     ▖▖▖▌▌▌▌▌▌
+       Striped ...d/MagentaWarm g...nt feel │ 54│                   ▖▌▌▌▌▌▌▌▌▌▌
                                             │   │               ▖▖▖▌▌▌▌▌▌▌▌▌▌▌▌
                                             │   │           ▖ ▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
        ↵ open detail   ↑↓ navigate   ^k act │ 31│         ▖▌▌▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌ ▼
@@ -105,7 +105,7 @@ test('filled style renders block characters', async () => {
   `)
 
   expect(text).toMatch(/[▌▘▖]/)
-  expect(text).toContain('›Filled - Red')
+  expect(text).toContain('›Filled')
 }, 30000)
 
 test('striped style renders alternating columns', async () => {
@@ -123,7 +123,7 @@ test('striped style renders alternating columns', async () => {
 
   const text = await session.text({
     waitFor: (text) => {
-      return text.includes('›Striped - Purple')
+      return /›Striped.*Warm/i.test(text)
     },
     timeout: 5000,
   })
@@ -136,19 +136,19 @@ 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│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
-       Striped - Theme Default primary + ac │     1      5     10     15     20
-       Striped - Green/Yellow Nature-inspir │
-       Striped - Red/Magenta Warm gradient  │ ─────────────────────────────────
+       Area - Stock PriceOrange ...lle dots │ 211│                            ▖ ▲
+       Area - ...i Series CPU + M...overlay │    │                         ▖▖▌▌ █
+       Area - Wave Purple + M...sine/cosine │    │                     ▖▖▖▌▌▌▌▌ █
+       Area - ... Revenu Single ...to range │ 189│                ▖▖▌▖▌▌▌▌▌▌▌▌▌
+       Filled ... RevenueSolid b...th chart │    │             ▖▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Filled ...een Tem Daily t...re curve │    │           ▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Filled ...llow CPUHigh co... on dark │ 167│       ▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Filled -...nta Wave Smooth... blocks │    │    ▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+      ›Striped -...le/Orang Warm a...colors │    │▖▌▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Striped - Blue/Re High co... stripes │ 145│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Striped ...e Defaultprimar...o prop) │     1      5     10     15     20
+       Striped - Green/Yello Natur...spired │
+       Striped ...d/MagentaWarm g...nt feel │ ─────────────────────────────────
                                             │
                                             │ Even cols: Purple
        ↵ open detail   ↑↓ navigate   ^k act │                                   ▼
@@ -157,13 +157,13 @@ test('striped style renders alternating columns', async () => {
   `)
 
   expect(text).toMatch(/[▌▘▖]/)
-  expect(text).toContain('›Striped - Purple')
+  expect(text).toContain('›Striped')
 }, 30000)
 
 test('markdown + metadata detail view in list', async () => {
   await session.text({
     waitFor: (text) => {
-      return text.includes('Area - Multi') && text.includes('│')
+      return /Area.*Series/i.test(text) && text.includes('│')
     },
     timeout: 10000,
   })
@@ -173,7 +173,7 @@ test('markdown + metadata detail view in list', async () => {
 
   const text = await session.text({
     waitFor: (text) => {
-      return text.includes('›Area - Multi') && text.includes('System Metrics')
+      return /›Area.*Series/i.test(text) && text.includes('System Metrics')
     },
     timeout: 5000,
   })
@@ -186,19 +186,19 @@ test('markdown + metadata detail view in list', async () => {
 
        > Search...
 
-       Area - Stock Price Orange braille do │ System Metrics                    ▲
-      ›Area - Multi Series CPU + Memory ove │                                   ▀
-       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 │ 100│
-       Striped - Green/Yellow Nature-inspir │    │                   ⣠⣶⣧   ⣀⣠⣤⣶
-       Striped - Red/Magenta Warm gradient  │  75│       ⢀⣴⣧       ⢀⣰⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿
+       Area - Stock PriceOrange ...lle dots │ System Metrics                    ▲
+      ›Area - ...i Series CPU + M...overlay │                                   ▀
+       Area - Wave Purple + M...sine/cosine │
+       Area - ... Revenu Single ...to range │ CPU usage (blue) vs memory usage (
+       Filled ... RevenueSolid b...th chart │ green) over 24 hours.
+       Filled ...een Tem Daily t...re curve │ - Peak CPU at 90% around 15h
+       Filled ...llow CPUHigh co... on dark │ - Memory steadily climbing to 86%
+       Filled -...nta Wave Smooth... blocks │ - CPU has high variance, memory
+       Striped -...le/Orang Warm a...colors │   is monotonic
+       Striped - Blue/Re High co... stripes │
+       Striped ...e Defaultprimar...o prop) │ 100│
+       Striped - Green/Yello Natur...spired │    │                   ⣠⣶⣧   ⣀⣠⣤⣶
+       Striped ...d/MagentaWarm g...nt feel │  75│       ⢀⣴⣧       ⢀⣰⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿
                                             │    │      ⢀⣾⣿⣿⣧⢀⣀⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
                                             │    │   ⢀⣾⣶⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
        ↵ open detail   ↑↓ navigate   ^k act │  50│⣀⣀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▼
@@ -213,7 +213,7 @@ test('markdown + metadata detail view in list', async () => {
 test('enter pushes full detail view with graph', async () => {
   await session.text({
     waitFor: (text) => {
-      return text.includes('Area - Stock') && text.includes('│')
+      return /Area.*Price/i.test(text) && text.includes('│')
     },
     timeout: 10000,
   })
@@ -265,7 +265,7 @@ test('enter pushes full detail view with graph', async () => {
 test('esc returns from detail to list', async () => {
   await session.text({
     waitFor: (text) => {
-      return text.includes('Area - Stock') && text.includes('│')
+      return /Area.*Price/i.test(text) && text.includes('│')
     },
     timeout: 10000,
   })
@@ -284,7 +284,7 @@ test('esc returns from detail to list', async () => {
 
   const text = await session.text({
     waitFor: (text) => {
-      return text.includes('›Area - Stock Price') && text.includes('Graph Styles')
+      return /›Area.*Price/i.test(text) && text.includes('Graph Styles')
     },
     timeout: 5000,
   })
@@ -297,19 +297,19 @@ test('esc returns from detail to list', 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│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
-       Striped - Theme Default primary + ac │     1      5     10     15     20
-       Striped - Green/Yellow Nature-inspir │
-       Striped - Red/Magenta Warm gradient  │ ─────────────────────────────────
+      ›Area - Stock PriceOrange ...lle dots │ 211│                            ⣠ ▲
+       Area - ...i Series CPU + M...overlay │    │                        ⢀⣴⣦⣼⣿ █
+       Area - Wave Purple + M...sine/cosine │    │                    ⢠⣦⣄⣴⣿⣿⣿⣿⣿ █
+       Area - ... Revenu Single ...to range │ 189│                ⢀⣴⣷⣦⣿⣿⣿⣿⣿⣿⣿⣿⣿ █
+       Filled ... RevenueSolid b...th chart │    │             ⣠⣀⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▀
+       Filled ...een Tem Daily t...re curve │    │           ⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled ...llow CPUHigh co... on dark │ 167│       ⢀⣴⣿⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled -...nta Wave Smooth... blocks │    │    ⣰⣤⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped -...le/Orang Warm a...colors │    │⢀⣴⡄⢰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped - Blue/Re High co... stripes │ 145│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped ...e Defaultprimar...o prop) │     1      5     10     15     20
+       Striped - Green/Yello Natur...spired │
+       Striped ...d/MagentaWarm g...nt feel │ ─────────────────────────────────
                                             │
                                             │ Variant: area
        ↵ open detail   ↑↓ navigate   ^k act │                                   ▼
@@ -317,6 +317,6 @@ test('esc returns from detail to list', async () => {
     "
   `)
 
-  expect(text).toContain('›Area - Stock')
+  expect(text).toContain('›Area')
   expect(text).toContain('Graph Styles')
 }, 30000)

package/src/examples/horizontal-bar-graph-weekly.tsx

@@ -0,0 +1,138 @@
+// Example: HorizontalBarGraph stacked horizontal rows with a compact right legend.
+
+import React from 'react'
+import { Action, ActionPanel, Detail, HorizontalBarGraph, List } from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import { renderWithProviders } from '../utils'
+
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+interface DataSet {
+  title: string
+  subtitle: string
+  labels: string[]
+  categoryTitle?: string
+  distributionTitle?: string
+  legendTitle?: string
+  series: Array<{ data: number[]; title: string }>
+}
+
+const dataSets: DataSet[] = [
+  {
+    title: 'Weekly Traffic',
+    subtitle: 'Direct / Organic / Referral across 6 days',
+    labels: days,
+    series: [
+      { data: [40, 30, 25, 15, 50, 40], title: 'Direct' },
+      { data: [30, 35, 15, 20, 35, 30], title: 'Organic' },
+      { data: [20, 25, 10, 10, 25, 20], title: 'Referral' },
+    ],
+  },
+  {
+    title: 'Revenue by Region',
+    subtitle: 'Americas / EMEA / APAC',
+    labels: days,
+    series: [
+      { data: [60, 45, 30, 55, 70, 50], title: 'Americas' },
+      { data: [25, 30, 20, 35, 25, 30], title: 'EMEA' },
+      { data: [15, 20, 10, 10, 20, 15], title: 'APAC' },
+    ],
+  },
+  {
+    title: 'Long Labels',
+    subtitle: 'The left label column truncates without stealing legend space',
+    labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday & Sunday'],
+    categoryTitle: 'day',
+    distributionTitle: 'traffic',
+    legendTitle: 'source',
+    series: [
+      { data: [40, 30, 25, 15, 50, 40], title: 'Views' },
+      { data: [20, 25, 10, 10, 25, 20], title: 'Clicks' },
+    ],
+  },
+  {
+    title: 'Many Series',
+    subtitle: 'Legend grows only as wide as its content needs',
+    labels: days,
+    series: Array.from({ length: 8 }, (_, i) => {
+      return {
+        data: [10 + i * 5, 15 + i * 3, 8 + i * 4, 12 + i * 2, 20 + i * 6, 5 + i * 7],
+        title: `Series ${i + 1}`,
+      }
+    }),
+  },
+]
+
+function Chart({ item, height }: { item: DataSet; height: number }): any {
+  return (
+    <HorizontalBarGraph
+      labels={item.labels}
+      height={height}
+      categoryTitle={item.categoryTitle}
+      distributionTitle={item.distributionTitle}
+      legendTitle={item.legendTitle}
+    >
+      {item.series.map((series) => {
+        return <HorizontalBarGraph.Series key={series.title} data={series.data} title={series.title} />
+      })}
+    </HorizontalBarGraph>
+  )
+}
+
+function HorizontalBarGraphDetailView({ item }: { item: DataSet }): any {
+  const { pop } = useNavigation()
+
+  return (
+    <Detail
+      navigationTitle={item.title}
+      markdown={`# ${item.title}\n\n${item.subtitle}`}
+      metadata={
+        <Detail.Metadata>
+          <Chart item={item} height={12} />
+        </Detail.Metadata>
+      }
+      actions={
+        <ActionPanel>
+          <Action title="Go Back" onAction={() => { pop() }} />
+        </ActionPanel>
+      }
+    />
+  )
+}
+
+function HorizontalBarGraphWeeklyExample() {
+  const { push } = useNavigation()
+
+  return (
+    <List navigationTitle="HorizontalBarGraph Showcase" isShowingDetail={true}>
+      {dataSets.map((item) => {
+        return (
+          <List.Item
+            key={item.title}
+            title={item.title}
+            subtitle={item.subtitle}
+            detail={
+              <List.Item.Detail
+                metadata={
+                  <List.Item.Detail.Metadata>
+                    <Chart item={item} height={10} />
+                  </List.Item.Detail.Metadata>
+                }
+              />
+            }
+            actions={
+              <ActionPanel>
+                <Action
+                  title="Open Detail"
+                  onAction={() => { push(<HorizontalBarGraphDetailView item={item} />) }}
+                />
+              </ActionPanel>
+            }
+          />
+        )
+      })}
+    </List>
+  )
+}
+
+void renderWithProviders(<HorizontalBarGraphWeeklyExample />)