termcast 1.4.1 → 1.5.0

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 - ...k Price Orange ...lle dots │ 211│                            ⣠ ▲
+       Area - ... Series CPU + M... overlay │    │                        ⢀⣴⣦⣼⣿ █
+       Area...ave Purple + Ma...sine/cosine │    │                    ⢠⣦⣄⣴⣿⣿⣿⣿⣿ █
+       Area -...evenue Single s...uto range │ 189│                ⢀⣴⣷⣦⣿⣿⣿⣿⣿⣿⣿⣿⣿ █
+       Filled...RevenueSolid bl...wth chart │    │             ⣠⣀⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▀
+       Filled...en TempDaily te...ure curve │    │           ⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled ...low CPUHigh con... on dark │ 167│       ⢀⣴⣿⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled ...a WavesSmooth c...h blocks │    │    ⣰⣤⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped...e/Orang Warm al...g colors │    │⢀⣴⡄⢰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped...lue/Re High con... stripes │ 145│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped...Defaul primary ...no prop) │     1      5     10     15     20
+       Striped -...en/YellowNature-inspired │
+       Striped .../MagentaWarm gr...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 - ...k Price Orange ...lle dots │ Revenue Growth                    ▲
+       Area - ... Series CPU + M... overlay │                                   █
+       Area...ave Purple + Ma...sine/cosine │
+       Area -...evenue Single s...uto range │ Quarterly revenue from $10k** to
+      ›Filled...RevenueSolid bl...wth chart │ **$75k.
+       Filled...en TempDaily te...ure curve │ Q1: $10k  → Q2: $25k (+150%)
+       Filled ...low CPUHigh con... on dark │ Q2: $25k  → Q3: $50k (+100%)
+       Filled ...a WavesSmooth c...h blocks │ Q3: $50k  → Q4: $75k (+50%)
+       Striped...e/Orang Warm al...g colors │
+       Striped...lue/Re High con... stripes │ 78│                             ▖
+       Striped...Defaul primary ...no prop) │   │                         ▖▌▖▌▌
+       Striped -...en/YellowNature-inspired │   │                     ▖▖▖▌▌▌▌▌▌
+       Striped .../MagentaWarm gr...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 - ...k Price Orange ...lle dots │ 211│                            ▖ ▲
+       Area - ... Series CPU + M... overlay │    │                         ▖▖▌▌ █
+       Area...ave Purple + Ma...sine/cosine │    │                     ▖▖▖▌▌▌▌▌ █
+       Area -...evenue Single s...uto range │ 189│                ▖▖▌▖▌▌▌▌▌▌▌▌▌
+       Filled...RevenueSolid bl...wth chart │    │             ▖▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Filled...en TempDaily te...ure curve │    │           ▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Filled ...low CPUHigh con... on dark │ 167│       ▖▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Filled ...a WavesSmooth c...h blocks │    │    ▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+      ›Striped...e/Orang Warm al...g colors │    │▖▌▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Striped...lue/Re High con... stripes │ 145│▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌
+       Striped...Defaul primary ...no prop) │     1      5     10     15     20
+       Striped -...en/YellowNature-inspired │
+       Striped .../MagentaWarm gr...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 - ...k Price Orange ...lle dots │ System Metrics                    ▲
+      ›Area - ... Series CPU + M... overlay │                                   ▀
+       Area...ave Purple + Ma...sine/cosine │
+       Area -...evenue Single s...uto range │ CPU usage (blue) vs memory usage (
+       Filled...RevenueSolid bl...wth chart │ green) over 24 hours.
+       Filled...en TempDaily te...ure curve │ - Peak CPU at 90% around 15h
+       Filled ...low CPUHigh con... on dark │ - Memory steadily climbing to 86%
+       Filled ...a WavesSmooth c...h blocks │ - CPU has high variance, memory
+       Striped...e/Orang Warm al...g colors │   is monotonic
+       Striped...lue/Re High con... stripes │
+       Striped...Defaul primary ...no prop) │ 100│
+       Striped -...en/YellowNature-inspired │    │                   ⣠⣶⣧   ⣀⣠⣤⣶
+       Striped .../MagentaWarm gr...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 - ...k Price Orange ...lle dots │ 211│                            ⣠ ▲
+       Area - ... Series CPU + M... overlay │    │                        ⢀⣴⣦⣼⣿ █
+       Area...ave Purple + Ma...sine/cosine │    │                    ⢠⣦⣄⣴⣿⣿⣿⣿⣿ █
+       Area -...evenue Single s...uto range │ 189│                ⢀⣴⣷⣦⣿⣿⣿⣿⣿⣿⣿⣿⣿ █
+       Filled...RevenueSolid bl...wth chart │    │             ⣠⣀⢠⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▀
+       Filled...en TempDaily te...ure curve │    │           ⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled ...low CPUHigh con... on dark │ 167│       ⢀⣴⣿⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Filled ...a WavesSmooth c...h blocks │    │    ⣰⣤⣰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped...e/Orang Warm al...g colors │    │⢀⣴⡄⢰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped...lue/Re High con... stripes │ 145│⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿
+       Striped...Defaul primary ...no prop) │     1      5     10     15     20
+       Striped -...en/YellowNature-inspired │
+       Striped .../MagentaWarm gr...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 />)

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

@@ -0,0 +1,164 @@
+// E2E tests for HorizontalBarGraph stacked horizontal rows and right-side legend.
+
+import { afterEach, beforeEach, expect, test } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/horizontal-bar-graph-weekly.tsx'],
+    cols: 90,
+    rows: 30,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('renders horizontal stacked rows and compact legend', async () => {
+  const text = await session.text({
+    waitFor: (content) => {
+      return content.includes('Mon') && content.includes('Direct') && content.includes('%')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       HorizontalBarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+      ›Wee...fficDirect / Organ... across 6 days │ category  distribution  legend
+       Revenue by Region Americas / EMEA / APAC  │ ────────  ────────────  ───────────────
+       Lon...el The left label...ng legend space │ Mon       ╻╻╻╻╻╻╻╻╻╻    ● Direct    42%
+       Man...ie Legend grows o...s content needs │ Tue       ╻╻╻╻╻╻╻╻╻╻    ● Organic   35%
+                                                 │ Wed       ╻╻╻╻╻         ● Referral  23%
+                                                 │ Thu       ╻╻╻╻╻
+                                                 │ Fri       ╻╻╻╻╻╻╻╻╻╻╻╻
+                                                 │ Sat       ╻╻╻╻╻╻╻╻╻╻
+       ↵ open detail   ↑↓ navigate   ^k actions  │
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+  expect(text).toContain('Mon')
+  expect(text).toContain('Direct')
+  expect(text).toContain('╻')
+}, 30000)
+
+test('long labels truncate and leave legend visible', async () => {
+  await session.text({ waitFor: (content) => content.includes('Lon...el'), timeout: 10000 })
+  session.sendKey('down')
+  session.sendKey('down')
+
+  const text = await session.text({
+    waitFor: (content) => {
+      return content.includes('›Lon...el') && content.includes('Views')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       HorizontalBarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+       Wee...fficDirect / Organ... across 6 days │ day               traffi  source
+       Revenue by Region Americas / EMEA / APAC  │ ────────────────  ──────  ─────────────
+      ›Lon...el The left label...ng legend space │ Monday            ╻╻╻╻╻   ● Views   65%
+       Man...ie Legend grows o...s content needs │ Tuesday           ╻╻╻╻    ● Clicks  35%
+                                                 │ Wednesday         ╻╻╻
+                                                 │ Thursday          ╻╻
+                                                 │ Friday            ╻╻╻╻╻╻
+                                                 │ Saturday & Sund…  ╻╻╻╻╻
+       ↵ open detail   ↑↓ navigate   ^k actions  │
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+  expect(text).toContain('Saturday')
+  expect(text).toContain('Views')
+}, 30000)
+
+test('many series keeps bars readable and clips legend vertically', async () => {
+  await session.text({ waitFor: (content) => content.includes('Man...ie'), timeout: 10000 })
+  session.sendKey('down')
+  session.sendKey('down')
+  session.sendKey('down')
+
+  const text = await session.text({
+    waitFor: (content) => {
+      return content.includes('›Man...ie') && content.includes('Series 8')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       HorizontalBarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+       Wee...fficDirect / Organ... across 6 days │ category  distribution  legend
+       Revenue by Region Americas / EMEA / APAC  │ ────────  ────────────  ───────────────
+       Lon...el The left label...ng legend space │ Mon       ╻╻╻╻╻╻╻╻      ● Series 8  20%
+      ›Man...ie Legend grows o...s content needs │ Tue       ╻╻╻╻╻╻╻       ● Series 7  18%
+                                                 │ Wed       ╻╻╻╻╻╻        ● Series 6  16%
+                                                 │ Thu       ╻╻╻╻╻╻        ● Series 5  14%
+                                                 │ Fri       ╻╻╻╻╻╻╻╻╻╻╻╻  ● Series 4  11%
+                                                 │ Sat       ╻╻╻╻╻╻╻╻╻     ● Series 3   9%
+       ↵ open detail   ↑↓ navigate   ^k actions  │
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    "
+  `)
+  expect(text).toContain('Series 8')
+  expect(text).toContain('╻')
+}, 30000)

package/src/examples/list-detail-metadata.vitest.tsx

@@ -157,10 +157,8 @@ test('list detail metadata renders colored values and tag lists', async () => {
        > Search...
 
        Short Values                         │ Project Status
-       Long Values                          │
-      ›Colored & Tags                       │
-                                            │ Overview of the current project
-                                            │ state.
+       Long Values                          │ Overview of the current project
+      ›Colored & Tags                       │ state.
                                             │
                                             │ Info
                                             │
@@ -189,6 +187,8 @@ test('list detail metadata renders colored values and tag lists', async () => {
 
 
 
+
+
     "
   `)