termcast 1.4.1 → 1.6.0

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...
+
+      ›Weekl...affi Direct / Org...across 6 days │ category  distribution  legend
+       Revenue by Region Americas / EMEA / APAC  │ ────────  ────────────  ───────────────
+       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')
+  expect(text).toContain('Direct')
+  expect(text).toContain('╻')
+}, 30000)
+
+test('long labels truncate and leave legend visible', async () => {
+  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') && content.includes('Views')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       HorizontalBarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+       Weekl...affi Direct / Org...across 6 days │ day               traffi  source
+       Revenue by Region Americas / EMEA / APAC  │ ────────────────  ──────  ─────────────
+      ›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')
+  expect(text).toContain('Views')
+}, 30000)
+
+test('many series keeps bars readable and clips legend vertically', async () => {
+  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') && content.includes('Series 8')
+    },
+    timeout: 10000,
+  })
+
+  expect(text).toMatchInlineSnapshot(`
+    "
+
+
+       HorizontalBarGraph Showcase ────────────────────────────────────────────────────────
+
+       > Search...
+
+       Weekl...affi Direct / Org...across 6 days │ category  distribution  legend
+       Revenue by Region Americas / EMEA / APAC  │ ────────  ────────────  ───────────────
+       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')
+  expect(text).toContain('╻')
+}, 30000)

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   :vim      │
+
+    "
+  `)
+
+  // 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   :vim      │ 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   :vim      │
+
+    "
+  `)
+
+  // 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)

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

@@ -48,28 +48,28 @@ test('list detail metadata label renders short values in row layout (key: value)
                                             │
                                             │ Status:  Active
                                             │
-       ↑↓ navigate   ^k actions   :vim      │ Website: example.com
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+                                            │ Website: example.com
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+       ↑↓ navigate   ^k actions   :vim      │
 
     "
   `)
@@ -113,21 +113,21 @@ test('list detail metadata renders long values in column layout (key on one line
                                             │ Short:       OK
                                             │
                                             │ URL:         example.com/very/
-       ↑↓ navigate   ^k actions   :vim      │              long/path
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+                                            │              long/path
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+       ↑↓ navigate   ^k actions   :vim      │
 
     "
   `)
@@ -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
                                             │
@@ -178,16 +176,18 @@ test('list detail metadata renders colored values and tag lists', async () => {
                                             │
                                             │ ──────────────────────────────────
                                             │
-       ↑↓ navigate   ^k actions   :vim      │ Repo:     github.com/example
-
-
-
-
-
-
-
-
-
+                                            │ Repo:     github.com/example
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+                                            │
+       ↑↓ navigate   ^k actions   :vim      │
 
     "
   `)

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

@@ -43,11 +43,11 @@ test('dropdown defaults to first item when no value is provided', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^k actions   ^p filter by categorpowered by termcast.app
 
 
 
 
+       ↵ show selected fruit   ↑↓ navigate   ^k actions   ^p filter by categorpowered by termcast.app
 
 
 
@@ -77,20 +77,22 @@ test('dropdown opens and shows items', async () => {
 
 
        Dropdown Default Value Example ───────────────────────────────────────────────────────────────
+
+       > Search...                                                                            Apple ▾
                 ╭──────────────────────────────────────────────────────────────────────────╮
-       > Search.│                                                                          │  Apple ▾
-                │   Filter by category                                               esc   │
       ›First Ite│                                                                          │
-       Second It│   > Select category...                                                   │
+       Second It│   Filter by category                                               esc   │
        Vegetable│                                                                          │
-       Carrot Wi│  ›Apple                                                                  │
+       Carrot Wi│   > Select category...                                                   │
+                │                                                                          │
+                │  ›Apple                                                                  │
                 │   Banana                                                                 │
                 │   Orange                                                                 │
                 │   Grape                                                                  │
                 │                                                                          │
-       ↵ show se│                                                                          │mcast.app
-                │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
                 │                                                                          │
+                │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
+       ↵ show se│                                                                          │mcast.app
                 ╰──────────────────────────────────────────────────────────────────────────╯
 
 
@@ -101,8 +103,6 @@ test('dropdown opens and shows items', async () => {
 
 
 
-
-
     "
   `)
 
@@ -114,20 +114,22 @@ test('dropdown opens and shows items', async () => {
 
 
        Dropdown Default Value Example ───────────────────────────────────────────────────────────────
+
+       > Search...                                                                            Apple ▾
                 ╭──────────────────────────────────────────────────────────────────────────╮
-       > Search.│                                                                          │  Apple ▾
-                │   Filter by category                                               esc   │
       ›First Ite│                                                                          │
-       Second It│   > Select category...                                                   │
+       Second It│   Filter by category                                               esc   │
        Vegetable│                                                                          │
-       Carrot Wi│   Apple                                                                  │
+       Carrot Wi│   > Select category...                                                   │
+                │                                                                          │
+                │   Apple                                                                  │
                 │  ›Banana                                                                 │
                 │   Orange                                                                 │
                 │   Grape                                                                  │
                 │                                                                          │
-       ↵ show se│                                                                          │mcast.app
-                │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
                 │                                                                          │
+                │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
+       ↵ show se│                                                                          │mcast.app
                 ╰──────────────────────────────────────────────────────────────────────────╯
 
 
@@ -138,8 +140,6 @@ test('dropdown opens and shows items', async () => {
 
 
 
-
-
     "
   `)
 
@@ -162,11 +162,11 @@ test('dropdown opens and shows items', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^k actions   ^p filter by categorpowered by termcast.app
 
 
 
 
+       ↵ show selected fruit   ↑↓ navigate   ^k actions   ^p filter by categorpowered by termcast.app
 
 
 
@@ -196,20 +196,22 @@ test('clicking dropdown opens it', async () => {
 
 
        Dropdown Default Value Example ───────────────────────────────────────────────────────────────
+
+       > Search...                                                                            Apple ▾
                 ╭──────────────────────────────────────────────────────────────────────────╮
-       > Search.│                                                                          │  Apple ▾
-                │   Filter by category                                               esc   │
       ›First Ite│                                                                          │
-       Second It│   > Select category...                                                   │
+       Second It│   Filter by category                                               esc   │
        Vegetable│                                                                          │
-       Carrot Wi│  ›Apple                                                                  │
+       Carrot Wi│   > Select category...                                                   │
+                │                                                                          │
+                │  ›Apple                                                                  │
                 │   Banana                                                                 │
                 │   Orange                                                                 │
                 │   Grape                                                                  │
                 │                                                                          │
-       ↵ show se│                                                                          │mcast.app
-                │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
                 │                                                                          │
+                │   ↵ select   ↑↓ navigate                        powered by termcast.app  │
+       ↵ show se│                                                                          │mcast.app
                 ╰──────────────────────────────────────────────────────────────────────────╯
 
 
@@ -220,8 +222,6 @@ test('clicking dropdown opens it', async () => {
 
 
 
-
-
     "
   `)
 
@@ -244,11 +244,11 @@ test('clicking dropdown opens it', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^k actions   ^p filter by categorpowered by termcast.app
 
 
 
 
+       ↵ show selected fruit   ↑↓ navigate   ^k actions   ^p filter by categorpowered by termcast.app