termcast 1.3.21 → 1.3.25

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

@@ -24,7 +24,7 @@ test('list with detail view display and navigation', async () => {
         text.includes('›bulbasaur') &&
         text.includes('Grass / Poison') &&
         text.includes('Height: 0.7m') &&
-        text.includes('↵ select')
+        /↵.*navigate/i.test(text)
       )
     },
   })
@@ -39,7 +39,7 @@ test('list with detail view display and navigation', async () => {
 
     ›bulbasaur #001
      ivysaur #002                         │ bulbasaur                         ▲
-     charmander #004                      │                                   █
+     charmander #004                      │                                   ▀
      charmeleon #005                      │ Illustration
      squirtle #007                        │
      wartortle #008                       │ Types
@@ -57,8 +57,8 @@ test('list with detail view display and navigation', async () => {
                                           │ Types:
                                           │
                                           │ Grass:
-                                          │ ─────────────────
-     ↵ select  ↑↓ navigate  ^k actions    │                                   ▼"
+     ↵toggle detail ↑↓ navigate ^kactions │ ─────────────────
+                                          │                                   ▼"
   `)
 
   await session.press('down')
@@ -76,7 +76,7 @@ test('list with detail view display and navigation', async () => {
 
      bulbasaur #001
     ›ivysaur #002                         │ ivysaur                           ▲
-     charmander #004                      │                                   █
+     charmander #004                      │                                   ▀
      charmeleon #005                      │ Illustration
      squirtle #007                        │
      wartortle #008                       │ Types
@@ -94,8 +94,8 @@ test('list with detail view display and navigation', async () => {
                                           │ Types:
                                           │
                                           │ Grass:
-                                          │ ─────────────────
-     ↵ select  ↑↓ navigate  ^k actions    │                                   ▼"
+     ↵toggle detail ↑↓ navigate ^kactions │ ─────────────────
+                                          │                                   ▼"
   `)
 
   await session.press('down')
@@ -129,8 +129,8 @@ test('list with detail view display and navigation', async () => {
                                           │ Types:
                                           │
                                           │ Fire:
-                                          │ ─────────────────
-     ↵ select  ↑↓ navigate  ^k actions    │                                   ▼"
+     ↵toggle detail ↑↓ navigate ^kactions │ ─────────────────
+                                          │                                   ▼"
   `)
 
   await session.press(['ctrl', 'k'])
@@ -146,26 +146,27 @@ test('list with detail view display and navigation', async () => {
 
      bulbasaur #001
      ivysaur #002                         │ charmander                        ▲
-    ┃                                                                          ┃
-    ┃                                                                    esc   ┃
-    ┃                                                                          ┃
-    ┃   Search actions...                                                      ┃
-    ┃                                                                          ┃
-    ┃  ›Toggle Detail                                                          ┃
-    ┃   View on Pokemon.com                                                    ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃                                                                          ┃
-    ┃   ↵ select   ↑↓ navigate                                                 ┃
-    ┃                                                                          ┃
-                                          │ ─────────────────
-     ↵ select  ↑↓ navigate  ^k actions    │                                   ▼"
+    ›charmander #004                      │                                   █
+     c┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+     s┃                                                                          ┃
+     w┃                                                                    esc   ┃
+      ┃                                                                          ┃
+      ┃   Search actions...                                                      ┃
+      ┃                                                                          ┃
+      ┃  ›Toggle Detail                                                          ┃
+      ┃   View on Pokemon.com                                                    ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+      ┃                                                                          ┃
+     ↵┃   ↵ select   ↑↓ navigate                                                 ┃
+      ┃                                                                          ┃
+      ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
   `)
 
   await session.press('enter')
@@ -204,7 +205,7 @@ test('list with detail view display and navigation', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+     ↵ toggle detail  ↑↓ navigate  ^k actions"
   `)
 
   await session.press(['ctrl', 'k'])
@@ -243,8 +244,8 @@ test('list with detail view display and navigation', async () => {
                                           │ Types:
                                           │
                                           │ Fire:
-                                          │ ─────────────────
-     ↵ select  ↑↓ navigate  ^k actions    │                                   ▼"
+     ↵toggle detail ↑↓ navigate ^kactions │ ─────────────────
+                                          │                                   ▼"
   `)
 }, 15000)
 
@@ -271,27 +272,27 @@ test('list detail view search functionality', async () => {
     char
 
     charmander #004
-    charmeleon #005                      │                                   ▲
-                                         │ ───────────────────────────────── █
-                                         │                                   █
-                                         │ Types:                            █
-                                         │                                   █
-                                         │ Grass:                            ▀
-                                         │ ─────────────────
+    charmeleon #005                      │ bulbasaur                         ▲
+                                         │                                   ▀
+                                         │ Illustration
                                          │
-                                         │ Poison:
-                                         │ ─────────────────
+                                         │ Types
+                                         │ Grass / Poison
                                          │
-                                         │ Characteristics:
-                                         │ Height:        0.7m
+                                         │ Characteristics
+                                         │ - Height: 0.7m
+                                         │ - Weight: 6.9kg
                                          │
-                                         │ ─────────────────
-                                         │ Weight:        6.9kg
+                                         │ Abilities
+                                         │ - Chlorophyll
+                                         │ - Overgrow
+                                         │ ─────────────────────────────────
                                          │
-                                         │ ─────────────────
-                                         │ Abilities:
+                                         │ Types:
                                          │
-    ↵ select  ↑↓ navigate  ^k actions    │ Chlorophyll:   Main Series        ▼"
+                                         │ Grass:
+    ↵toggle detail ↑↓ navigate ^kactions │ ─────────────────
+                                         │                                   ▼"
   `)
 
   await session.press('backspace')
@@ -315,27 +316,27 @@ test('list detail view search functionality', async () => {
     water
 
 
-                                         │ bulbasaur                         ▲
+                                         │ wartortle                         ▲
                                          │                                   █
                                          │ Illustration
                                          │
                                          │ Types
-                                         │ Grass / Poison
+                                         │ Water
                                          │
                                          │ Characteristics
-                                         │ - Height: 0.7m
-                                         │ - Weight: 6.9kg
+                                         │ - Height: 1m
+                                         │ - Weight: 22.5kg
                                          │
                                          │ Abilities
-                                         │ - Chlorophyll
-                                         │ - Overgrow
+                                         │ - Torrent
+                                         │ - Rain Dish
                                          │ ─────────────────────────────────
                                          │
                                          │ Types:
                                          │
-                                         │ Grass:
-                                         │ ─────────────────
-    ↵ select  ↑↓ navigate  ^k actions    │                                   ▼"
+                                         │ Water:
+    ↵toggle detail ↑↓ navigate ^kactions │ ─────────────────
+                                         │                                   ▼"
   `)
 
   await session.press('down')
@@ -350,27 +351,27 @@ test('list detail view search functionality', async () => {
     water
 
 
-                                         │ bulbasaur                         ▲
+                                         │ wartortle                         ▲
                                          │                                   █
                                          │ Illustration
                                          │
                                          │ Types
-                                         │ Grass / Poison
+                                         │ Water
                                          │
                                          │ Characteristics
-                                         │ - Height: 0.7m
-                                         │ - Weight: 6.9kg
+                                         │ - Height: 1m
+                                         │ - Weight: 22.5kg
                                          │
                                          │ Abilities
-                                         │ - Chlorophyll
-                                         │ - Overgrow
+                                         │ - Torrent
+                                         │ - Rain Dish
                                          │ ─────────────────────────────────
                                          │
                                          │ Types:
                                          │
-                                         │ Grass:
-                                         │ ─────────────────
-    ↵ select  ↑↓ navigate  ^k actions    │                                   ▼"
+                                         │ Water:
+    ↵toggle detail ↑↓ navigate ^kactions │ ─────────────────
+                                         │                                   ▼"
   `)
 }, 10000)
 
@@ -397,27 +398,27 @@ test('list detail metadata rendering', async () => {
      Search Pokemon...
 
     ›bulbasaur #001
-     ivysaur #002                         │                                   ▲
-     charmander #004                      │ ───────────────────────────────── █
-     charmeleon #005                      │                                   █
-     squirtle #007                        │ Types:                            █
-     wartortle #008                       │                                   █
-                                          │ Grass:                            ▀
-                                          │ ─────────────────
-                                          │
-                                          │ Poison:
-                                          │ ─────────────────
+     ivysaur #002                         │ bulbasaur                         ▲
+     charmander #004                      │                                   ▀
+     charmeleon #005                      │ Illustration
+     squirtle #007                        │
+     wartortle #008                       │ Types
+                                          │ Grass / Poison
                                           │
-                                          │ Characteristics:
-                                          │ Height:        0.7m
+                                          │ Characteristics
+                                          │ - Height: 0.7m
+                                          │ - Weight: 6.9kg
                                           │
-                                          │ ─────────────────
-                                          │ Weight:        6.9kg
+                                          │ Abilities
+                                          │ - Chlorophyll
+                                          │ - Overgrow
+                                          │ ─────────────────────────────────
                                           │
-                                          │ ─────────────────
-                                          │ Abilities:
+                                          │ Types:
                                           │
-     ↵ select  ↑↓ navigate  ^k actions    │ Chlorophyll:   Main Series        ▼"
+                                          │ Grass:
+     ↵toggle detail ↑↓ navigate ^kactions │ ─────────────────
+                                          │                                   ▼"
   `)
 
   await session.press('down')
@@ -458,7 +459,112 @@ test('list detail metadata rendering', async () => {
                                           │ Types:
                                           │
                                           │ Water:
-                                          │ ─────────────────
-     ↵ select  ↑↓ navigate  ^k actions    │                                   ▼"
+     ↵toggle detail ↑↓ navigate ^kactions │ ─────────────────
+                                          │                                   ▼"
   `)
 }, 10000)
+
+test('list with detail layout consistency - short vs long detail content', async () => {
+  // Use the long-detail example to test layout shift with very long content
+  const testSession = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/list-with-detail-long.tsx'],
+    cols: 80,
+    rows: 25,
+  })
+
+  // First item has SHORT detail - should fit without overflow
+  const shortDetailSnapshot = await testSession.text({
+    waitFor: (text) => {
+      return (
+        text.includes('›Short Detail') &&
+        text.includes('Brief content')
+      )
+    },
+  })
+
+  // Navigate to second item which has LONG detail - will overflow
+  await testSession.press('down')
+
+  const longDetailSnapshot = await testSession.text({
+    waitFor: (text) => {
+      return (
+        text.includes('›Long Detail') &&
+        text.includes('extensive')
+      )
+    },
+  })
+
+  testSession.close()
+
+  // Compare list item positions - they should be consistent
+  expect(shortDetailSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Detail Length Test ───────────────────────────────────────────────────────
+
+     Search...
+
+    ›Short Detail
+     Long Detail                          │ Brief content
+     Another Item                         │
+                                          │ This is short.
+                                          │
+                                          │
+                                          │
+                                          │
+                                          │
+                                          │
+                                          │
+                                          │
+                                          │
+                                          │
+                                          │
+                                          │
+       ↑↓ navigate  ^k actions            │"
+  `)
+  expect(longDetailSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+     Detail Length Test ───────────────────────────────────────────────────────
+
+     Search...
+
+     Short Detail
+    ›Long Detail                          │ This item has extensive detail    ▲
+     Another Item                         │ content                           ▀
+                                          │
+                                          │ Section 1
+                                          │ This is a very long description
+                                          │ that contains multiple paragraphs
+                                          │ and sections to test how the
+                                          │ layout behaves when the detail
+                                          │ panel content overflows.
+                                          │
+                                          │ Section 2
+                                          │ More content here to ensure we
+                                          │ have enough text to cause
+                                          │ vertical overflow in the detail
+                                          │ panel scrollbox.
+       ↑↓ navigate  ^k actions            │                                   ▼"
+  `)
+
+  // Extract the LINE NUMBER (vertical position) of list items to verify no layout shift
+  const getListItemLineNumber = (snapshot: string, itemText: string) => {
+    const lines = snapshot.split('\n')
+    const lineIndex = lines.findIndex((line) => line.includes(itemText))
+    return lineIndex
+  }
+
+  // Check vertical position - the "Short Detail" item should be at the same line number
+  // regardless of whether the detail panel has overflow or not
+  const shortLineNum = getListItemLineNumber(shortDetailSnapshot, 'Short Detail')
+  const longLineNum = getListItemLineNumber(longDetailSnapshot, 'Short Detail')
+
+  // BUG: The list items shift vertically when detail content overflows
+  // When detail doesn't overflow: there's a blank line after navigation title
+  // When detail overflows: the blank line disappears, shifting all content up
+  expect(shortLineNum).toBe(longLineNum)
+}, 20000)

package/src/examples/list-with-dropdown.vitest.tsx

@@ -52,7 +52,7 @@ test('list with dropdown navigation', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
   await session.press(['ctrl', 'p'])
@@ -62,7 +62,9 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+     Search Beers ───────────────────────────────────────────────────
+
+    ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
     ┃                                                                  ┃
     ┃   Select Drink Type                                        esc   ┃
     ┃                                                                  ┃
@@ -80,9 +82,7 @@ test('list with dropdown navigation', async () => {
     ┃                                                                  ┃
     ┃   ↵ select   ↑↓ navigate                                         ┃
     ┃                                                                  ┃
-
-
-       ↵ select  ↑↓ navigate  ^k actions"
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
   `)
 
   const afterCtrlPSnapshot = await session.text({
@@ -94,7 +94,9 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+     Search Beers ───────────────────────────────────────────────────
+
+    ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
     ┃                                                                  ┃
     ┃   Select Drink Type                                        esc   ┃
     ┃                                                                  ┃
@@ -112,9 +114,7 @@ test('list with dropdown navigation', async () => {
     ┃                                                                  ┃
     ┃   ↵ select   ↑↓ navigate                                         ┃
     ┃                                                                  ┃
-
-
-       ↵ select  ↑↓ navigate  ^k actions"
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
   `)
 
   await session.press('down')
@@ -124,7 +124,9 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+     Search Beers ───────────────────────────────────────────────────
+
+    ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
     ┃                                                                  ┃
     ┃   Select Drink Type                                        esc   ┃
     ┃                                                                  ┃
@@ -142,9 +144,7 @@ test('list with dropdown navigation', async () => {
     ┃                                                                  ┃
     ┃   ↵ select   ↑↓ navigate                                         ┃
     ┃                                                                  ┃
-
-
-       ↵ select  ↑↓ navigate  ^k actions"
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
   `)
 
   await session.press('down')
@@ -154,7 +154,9 @@ test('list with dropdown navigation', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+     Search Beers ───────────────────────────────────────────────────
+
+    ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
     ┃                                                                  ┃
     ┃   Select Drink Type                                        esc   ┃
     ┃                                                                  ┃
@@ -172,9 +174,7 @@ test('list with dropdown navigation', async () => {
     ┃                                                                  ┃
     ┃   ↵ select   ↑↓ navigate                                         ┃
     ┃                                                                  ┃
-
-
-       ↵ select  ↑↓ navigate  ^k actions"
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
   `)
 
   await session.press('enter')
@@ -208,7 +208,7 @@ test('list with dropdown navigation', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 }, 10000)
 
@@ -231,27 +231,27 @@ test('list with dropdown search and filter', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+     Search Beers ───────────────────────────────────────────────────
+
+    ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
     ┃                                                                  ┃
     ┃   Select Drink Type                                        esc   ┃
     ┃                                                                  ┃
-    ┃
-      ›Augustiner Helles Beer
-       Camden Hells Beer
-       Leffe Blonde Beer
-       Sierra Nevada IPA Beer
-       Chateau Margaux Wine
-       Pinot Noir Wine
-       Coca Cola Soda
-       Sprite Soda
-       Orange Juice Juice
-       Apple Juice Juice
-
-
-
-
-
-       ↵ select  ↑↓ navigate  ^k actions"
+    ┃   Search...                                                      ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   Alcoholic Beverages                                            ┃
+    ┃  ›Beer                                                           ┃
+    ┃   Wine                                                           ┃
+    ┃                                                                  ┃
+    ┃   Non-Alcoholic                                                  ┃
+    ┃   Soda                                                           ┃
+    ┃   Juice                                                          ┃
+    ┃                                                                  ┃
+    ┃                                                                  ┃
+    ┃   ↵ select   ↑↓ navigate                                         ┃
+    ┃                                                                  ┃
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━"
   `)
 
   await session.text({
@@ -271,27 +271,27 @@ test('list with dropdown search and filter', async () => {
     "
 
 
-       Search Beers ───────────────────────────────────────────────────
+     Search Beers ───────────────────────────────────────────────────
+
+    ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
     ┃                                                                  ┃
     ┃   Select Drink Type                                        esc   ┃
     ┃                                                                  ┃
     ┃   wine                                                           ┃
     ┃                                                                  ┃
-    ┃   Wine                                                           ┃
+    ┃  ›Wine                                                           ┃
     ┃                                                                  ┃
     ┃                                                                  ┃
     ┃   ↵ select   ↑↓ navigate                                         ┃
     ┃                                                                  ┃
-    ┃   Non-Alcoholic                                                  ┃
-       Sprite Soda
-       Orange Juice Juice
-       Apple Juice Juice
+    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ┃
+     Apple Juice Juice
 
 
 
 
 
-       ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 
   await session.press('enter')
@@ -308,12 +308,11 @@ test('list with dropdown search and filter', async () => {
      Search Beers ───────────────────────────────────────────────────
 
 
-     Search...                                                 Beer ▾
+     Search...                                                 Wine ▾
+
+    ›Chateau Margaux Wine
+     Pinot Noir Wine
 
-    ›Augustiner Helles Beer
-     Camden Hells Beer
-     Leffe Blonde Beer
-     Sierra Nevada IPA Beer
 
 
 
@@ -325,7 +324,8 @@ test('list with dropdown search and filter', async () => {
 
 
 
-     ↵ select  ↑↓ navigate  ^k actions"
+
+       ↑↓ navigate  ^k actions"
   `)
 
   await session.type('pinot')
@@ -339,12 +339,12 @@ test('list with dropdown search and filter', async () => {
     "
 
 
-    Search Beers ───────────────────────────────────────────────────
-
+     Search Beers ───────────────────────────────────────────────────
 
-    pinot                                                     Beer ▾
 
+     pinot                                                     Wine ▾
 
+    ›Pinot Noir Wine
 
 
 
@@ -359,6 +359,6 @@ test('list with dropdown search and filter', async () => {
 
 
 
-    ↵ select  ↑↓ navigate  ^k actions"
+       ↑↓ navigate  ^k actions"
   `)
 }, 10000)

package/src/examples/list-with-sections.tsx

@@ -14,6 +14,7 @@ function SimpleListExample() {
   const { push } = useNavigation()
   return (
     <List
+      // isLoading
       navigationTitle='Simple List Example'
       searchBarPlaceholder='Search items...'
       onSelectionChange={(id) => {