termcast 1.5.0 → 1.7.0

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

@@ -32,19 +32,19 @@ test('area style renders braille characters', async () => {
 
        > Search...
 
-      ›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 │ ─────────────────────────────────
+      ›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 │                                   ▼
@@ -84,19 +84,19 @@ test('filled style renders block characters', async () => {
 
        > Search...
 
-       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│                   ▖▌▌▌▌▌▌▌▌▌▌
+       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│         ▖▌▌▖▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌▌ ▼
@@ -136,19 +136,19 @@ test('striped style renders alternating columns', async () => {
 
        > Search...
 
-       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 │ ─────────────────────────────────
+       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 │                                   ▼
@@ -186,19 +186,19 @@ test('markdown + metadata detail view in list', async () => {
 
        > Search...
 
-       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│       ⢀⣴⣧       ⢀⣰⣿⣿⣿⣷⣾⣿⣿⣿⣿⣿
+       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│⣀⣀⣠⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ▼
@@ -297,19 +297,19 @@ test('esc returns from detail to list', async () => {
 
        > Search...
 
-      ›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 │ ─────────────────────────────────
+      ›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 │                                   ▼

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

@@ -34,29 +34,29 @@ test('renders horizontal stacked rows and compact legend', async () => {
 
        > Search...
 
-      ›Wee...fficDirect / Organ... across 6 days │ category  distribution  legend
+      ›Weekl...affi Direct / Org...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%
+       Lon...belsThe left label...g legend space │ Mon       ╻╻╻╻╻╻╻╻╻╻    ● Direct    42%
+       Man...riesLegend grows o... content needs │ Tue       ╻╻╻╻╻╻╻╻╻╻    ● Organic   35%
                                                  │ Wed       ╻╻╻╻╻         ● Referral  23%
                                                  │ Thu       ╻╻╻╻╻
                                                  │ Fri       ╻╻╻╻╻╻╻╻╻╻╻╻
                                                  │ Sat       ╻╻╻╻╻╻╻╻╻╻
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
        ↵ open detail   ↑↓ navigate   ^k actions  │
 
-
-
-
-
-
-
-
-
-
-
-
-
-
     "
   `)
   expect(text).toContain('Mon')
@@ -65,13 +65,13 @@ test('renders horizontal stacked rows and compact legend', async () => {
 }, 30000)
 
 test('long labels truncate and leave legend visible', async () => {
-  await session.text({ waitFor: (content) => content.includes('Lon...el'), timeout: 10000 })
+  await session.text({ waitFor: (content) => content.includes('The left label'), timeout: 10000 })
   session.sendKey('down')
   session.sendKey('down')
 
   const text = await session.text({
     waitFor: (content) => {
-      return content.includes('›Lon...el') && content.includes('Views')
+      return content.includes('›Lon') && content.includes('Views')
     },
     timeout: 10000,
   })
@@ -84,29 +84,29 @@ test('long labels truncate and leave legend visible', async () => {
 
        > Search...
 
-       Wee...fficDirect / Organ... across 6 days │ day               traffi  source
+       Weekl...affi Direct / Org...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%
+      ›Lon...belsThe left label...g legend space │ Monday            ╻╻╻╻╻   ● Views   65%
+       Man...riesLegend grows o... content needs │ Tuesday           ╻╻╻╻    ● Clicks  35%
                                                  │ Wednesday         ╻╻╻
                                                  │ Thursday          ╻╻
                                                  │ Friday            ╻╻╻╻╻╻
                                                  │ Saturday & Sund…  ╻╻╻╻╻
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
+                                                 │
        ↵ open detail   ↑↓ navigate   ^k actions  │
 
-
-
-
-
-
-
-
-
-
-
-
-
-
     "
   `)
   expect(text).toContain('Saturday')
@@ -114,14 +114,14 @@ test('long labels truncate and leave legend visible', async () => {
 }, 30000)
 
 test('many series keeps bars readable and clips legend vertically', async () => {
-  await session.text({ waitFor: (content) => content.includes('Man...ie'), timeout: 10000 })
+  await session.text({ waitFor: (content) => content.includes('Legend grows'), 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')
+      return content.includes('›Man') && content.includes('Series 8')
     },
     timeout: 10000,
   })
@@ -134,29 +134,29 @@ test('many series keeps bars readable and clips legend vertically', async () =>
 
        > Search...
 
-       Wee...fficDirect / Organ... across 6 days │ category  distribution  legend
+       Weekl...affi Direct / Org...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%
+       Lon...belsThe left label...g legend space │ Mon       ╻╻╻╻╻╻╻╻      ● Series 8  20%
+      ›Man...riesLegend grows o... 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')

package/src/examples/list-detail-height-ratchet.tsx

@@ -0,0 +1,48 @@
+// Example: List with varying detail heights to test the grow-only minHeight
+// ratchet on the detail panel. Navigating from a tall detail to a short one
+// should NOT cause the footer to jump up (no layout shift).
+import React from 'react'
+import { List } from 'termcast'
+import { renderWithProviders } from '../utils'
+
+// Generate 25 items with alternating short/tall detail content.
+// Odd-indexed items have tall detail (many lines), even-indexed have short detail.
+const items = Array.from({ length: 25 }, (_, i) => {
+  const isTall = i % 2 === 1
+  const markdown = isTall
+    ? [
+        `# Item ${i} (tall)`,
+        '',
+        ...Array.from({ length: 12 }, (_, j) => `Line ${j + 1} of detail content for item ${i}.`),
+      ].join('\n')
+    : `# Item ${i} (short)\n\nBrief.`
+
+  return {
+    id: `item-${i}`,
+    title: `Item ${i}`,
+    subtitle: isTall ? 'tall' : 'short',
+    markdown,
+  }
+})
+
+function ListDetailHeightRatchet() {
+  return (
+    <List
+      navigationTitle="Height Ratchet Test"
+      searchBarPlaceholder="Search..."
+      isShowingDetail={true}
+    >
+      {items.map((item) => (
+        <List.Item
+          key={item.id}
+          id={item.id}
+          title={item.title}
+          subtitle={item.subtitle}
+          detail={<List.Item.Detail markdown={item.markdown} />}
+        />
+      ))}
+    </List>
+  )
+}
+
+await renderWithProviders(<ListDetailHeightRatchet />)

package/src/examples/list-detail-height-ratchet.vitest.tsx

@@ -0,0 +1,161 @@
+// E2E tests for the detail panel grow-only height ratchet.
+// Verifies that the footer does not shift up when navigating from a tall
+// detail item to a short one. The detail panel's minHeight should ratchet
+// upward and never shrink back.
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/list-detail-height-ratchet.tsx'],
+    cols: 80,
+    rows: 30,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+function getFooterLineNumber(snapshot: string): number {
+  const lines = snapshot.split('\n')
+  return lines.findIndex((line) => line.includes('navigate'))
+}
+
+test('detail panel height ratchet prevents footer layout shift', async () => {
+  // Item 0 is short detail
+  const shortSnapshot = await session.text({
+    waitFor: (text) => {
+      return text.includes('›Item 0') && text.includes('Brief') && text.includes('navigate')
+    },
+    timeout: 10000,
+  })
+  expect(shortSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+       Height Ratchet Test ──────────────────────────────────────────────────────
+
+       > Search...
+
+      ›Item 0 short                         │ Item 0 (short)
+       Item 1 tall                          │
+       Item 2 short                         │
+       Item 3 tall                          │ Brief.
+       Item 4 short                         │
+       Item 5 tall                          │
+       Item 6 short                         │
+       Item 7 tall                          │
+       Item 8 short                         │
+       Item 9 tall                          │
+       Item 10 short                        │
+       Item 11 tall                         │
+       Item 12 short                        │
+       Item 13 tall                         │
+       Item 14 short                        │
+       Item 15 tall                         │
+       Item 16 short                        │
+       Item 17 tall                         │
+       Item 18 short                        │
+                                            │
+                                            │
+       ↑↓ navigate   ^k actions             │
+
+    "
+  `)
+
+  // Navigate to Item 1 (tall detail) to ratchet the height up
+  await session.press('down')
+
+  const tallSnapshot = await session.text({
+    waitFor: (text) => {
+      return text.includes('›Item 1') && text.includes('Line 1') && text.includes('navigate')
+    },
+  })
+  expect(tallSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+       Height Ratchet Test ──────────────────────────────────────────────────────
+
+       > Search...
+
+       Item 0 short                         │ Item 1 (tall)                     ▲
+      ›Item 1 tall                          │ Line 1 of detail content for item █
+       Item 2 short                         │ 1.                                █
+       Item 3 tall                          │ Line 2 of detail content for item █
+       Item 4 short                         │ 1.                                █
+       Item 5 tall                          │ Line 3 of detail content for item █
+       Item 6 short                         │ 1.
+       Item 7 tall                          │ Line 4 of detail content for item
+       Item 8 short                         │ 1.
+       Item 9 tall                          │ Line 5 of detail content for item
+       Item 10 short                        │ 1.
+       Item 11 tall                         │ Line 6 of detail content for item
+       Item 12 short                        │ 1.
+       Item 13 tall                         │ Line 7 of detail content for item
+       Item 14 short                        │ 1.
+       Item 15 tall                         │ Line 8 of detail content for item
+       Item 16 short                        │ 1.
+       Item 17 tall                         │ Line 9 of detail content for item
+       Item 18 short                        │ 1.
+                                            │ Line 10 of detail content for
+                                            │ item 1.
+       ↑↓ navigate   ^k actions             │ Line 11 of detail content for     ▼
+
+    "
+  `)
+
+  // Navigate back to Item 0 (short detail).
+  // The footer should stay at the same line as the tall snapshot.
+  await session.press('up')
+
+  const backToShortSnapshot = await session.text({
+    waitFor: (text) => {
+      return text.includes('›Item 0') && text.includes('Brief') && text.includes('navigate')
+    },
+  })
+  expect(backToShortSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+       Height Ratchet Test ──────────────────────────────────────────────────────
+
+       > Search...
+
+      ›Item 0 short                         │ Item 0 (short)
+       Item 1 tall                          │ Brief.
+       Item 2 short                         │
+       Item 3 tall                          │
+       Item 4 short                         │
+       Item 5 tall                          │
+       Item 6 short                         │
+       Item 7 tall                          │
+       Item 8 short                         │
+       Item 9 tall                          │
+       Item 10 short                        │
+       Item 11 tall                         │
+       Item 12 short                        │
+       Item 13 tall                         │
+       Item 14 short                        │
+       Item 15 tall                         │
+       Item 16 short                        │
+       Item 17 tall                         │
+       Item 18 short                        │
+                                            │
+                                            │
+       ↑↓ navigate   ^k actions             │
+
+    "
+  `)
+
+  // The key assertion: footer line should not move up when going from tall to short
+  const footerLineTall = getFooterLineNumber(tallSnapshot)
+  const footerLineBackToShort = getFooterLineNumber(backToShortSnapshot)
+
+  expect(footerLineBackToShort).toBe(footerLineTall)
+  expect(backToShortSnapshot).toContain('navigate')
+}, 20000)