termcast 1.3.46 → 1.3.47

package/src/examples/form-dropdown.vitest.tsx

@@ -351,11 +351,11 @@ test('form dropdown keyboard navigation', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust                                              █
       │                                                                █
-      │  ○ React                                                       █
-      │  ○ Vue                                                         █
       │› ○ Svelte                                                      █
       │  Backend                                                       █
       │  ○ Node.js                                                     █
+      │  ○ Python                                                      █
+      │  ○ Go                                                          █
       │                                                                █
       │  Choose your preferred programming languages                   █
       │                                                                █
@@ -465,11 +465,11 @@ test('form dropdown keyboard navigation', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust                                              █
       │                                                                █
-      │  ○ React                                                       █
-      │  ○ Vue                                                         █
       │› ○ Svelte                                                      █
       │  Backend                                                       █
       │  ○ Node.js                                                     █
+      │  ○ Python                                                      █
+      │  ○ Go                                                          █
       │                                                                █
       │  Choose your preferred programming languages                   █
       │                                                                █
@@ -522,11 +522,11 @@ test('form dropdown keyboard navigation', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust                                              █
       │                                                                █
-      │  ○ React                                                       █
-      │  ○ Vue                                                         █
       │› ○ Svelte                                                      █
       │  Backend                                                       █
       │  ○ Node.js                                                     █
+      │  ○ Python                                                      █
+      │  ○ Go                                                          █
       │                                                                █
       │  Choose your preferred programming languages                   █
       │                                                                █
@@ -715,11 +715,11 @@ test('selecting second-to-last visible item should not scroll', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust                                              █
       │                                                                █
+      │  Frontend                                                      █
       │  ● TypeScript                                                  █
       │  ○ JavaScript                                                  █
       │› ○ React                                                       █
       │  ○ Vue                                                         █
-      │  ○ Svelte                                                      █
       │                                                                █
       │  Choose your preferred programming languages                   █
       │                                                                █
@@ -772,11 +772,11 @@ test('selecting second-to-last visible item should not scroll', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust, React                                       █
       │                                                                █
+      │  Frontend                                                      █
       │  ● TypeScript                                                  █
       │  ○ JavaScript                                                  █
       │› ● React                                                       █
       │  ○ Vue                                                         █
-      │  ○ Svelte                                                      █
       │                                                                █
       │  Choose your preferred programming languages                   █
       │                                                                █

package/src/examples/form-tagpicker.vitest.tsx

@@ -395,11 +395,11 @@ test('form tagpicker keyboard navigation', async () => {
       ◆  Favorite Sport
       │  Choose your favorite sport...
       │
+      │  ○ Basketball
+      │  ○ Football
       │  ○ Tennis
       │  ○ Baseball
       │› ○ Golf
-      │  ○ Swimming
-      │  ○ Cycling
       │
       │  Select your favorite sport from the list
       │
@@ -509,11 +509,11 @@ test('form tagpicker keyboard navigation', async () => {
       ◆  Favorite Sport
       │  Choose your favorite sport...
       │
-      │  ○ Tennis
       │  ○ Baseball
       │› ○ Golf
       │  ○ Swimming
       │  ○ Cycling
+      │  ○ Running
       │
       │  Select your favorite sport from the list
       │
@@ -566,11 +566,11 @@ test('form tagpicker keyboard navigation', async () => {
       ◆  Favorite Sport
       │  Choose your favorite sport...
       │
-      │  ○ Tennis
       │  ○ Baseball
       │› ○ Golf
       │  ○ Swimming
       │  ○ Cycling
+      │  ○ Running
       │
       │  Select your favorite sport from the list
       │

package/src/examples/github.vitest.tsx

@@ -61,6 +61,13 @@ test.skipIf(!extensionExists)('github extension shows command list on launch', a
     timeout: 30000,
   })
 
+  // Wait for the full command list to render.
+  // The list can paint the first item before all descendants are registered.
+  await session.text({
+    waitFor: (text) => text.includes('My Pull Requests') && text.includes('Search Repositories'),
+    timeout: 30000,
+  })
+
   expect(initialView).toContain('My Pull Requests')
   expect(initialView).toContain('Search Repositories')
   expect(initialView).toMatchInlineSnapshot(`
@@ -101,7 +108,7 @@ test.skipIf(!extensionExists)('github extension shows command list on launch', a
 test.skipIf(!extensionExists)('github extension can navigate commands', async () => {
   // Wait for command list
   await session.text({
-    waitFor: (text) => /My Pull Requests|Search Repositories/i.test(text),
+    waitFor: (text) => text.includes('My Pull Requests') && text.includes('Search Repositories'),
     timeout: 30000,
   })
 
@@ -172,26 +179,26 @@ test.skipIf(!extensionExists)('github extension can open actions panel', async (
 
        > Search commands...
 
-       Commands
-      ›My Pull Requests List pull requests you created, participated in, or  view
       ╭──────────────────────────────────────────────────────────────────────────╮
       │                                                                          │
       │   Actions                                                          esc   │
       │                                                                          │
       │   > Search actions...                                                    │
       │                                                                          │
-      │  ›Run Command                                                         █  │
-      │   Copy File Path                                                      █  │
-      │   Copy Command Info                                                   █  │
-      │                                                                       ▀  │
+      │  ›Run Command                                                            │
+      │   Copy File Path                                                         │
+      │   Copy Command Info                                                      │
+      │                                                                          │
       │   Settings                                                               │
-      │   Configure GitHub...                                            ⌃⇧,     │
+      │   Configure GitHub...                                             ⌃⇧,    │
       │   Change Theme...                                                        │
+      │   See Console Logs                                                       │
+      │                                                                          │
+      │                                                                          │
       │                                                                          │
       │   ↵ select   ↑↓ navigate                                                 │
       │                                                                          │
       ╰──────────────────────────────────────────────────────────────────────────╯
-       ↵ run command   ↑↓ navigate   ^k actions               powered by termcast
 
 
 

package/src/examples/internal/scrollbox-with-descendants.tsx

@@ -16,20 +16,39 @@ function ScrollboxWithDescendants() {
   const [selectedIndex, setSelectedIndex] = React.useState(0)
   const scrollBoxRef = React.useRef<any>(null)
 
-  const scrollToItem = (item: { props?: ItemDescendant }) => {
+  const scrollToItemIfNeeded = ({
+    item,
+    direction,
+  }: {
+    item: { props?: ItemDescendant }
+    direction: -1 | 1
+  }) => {
     const scrollBox = scrollBoxRef.current
     const elementRef = item.props?.elementRef
     if (!scrollBox || !elementRef) return
 
     const contentY = scrollBox.content?.y || 0
+    const scrollTop = scrollBox.scrollTop || 0
     const viewportHeight = scrollBox.viewport?.height || 10
 
-    // Calculate item position relative to content
     const itemTop = elementRef.y - contentY
+    const itemHeight = elementRef.height || 1
+    const itemBottom = itemTop + itemHeight
 
-    // Scroll so the top of the item is centered in the viewport
-    const targetScrollTop = itemTop - viewportHeight / 2
-    scrollBox.scrollTo(Math.max(0, targetScrollTop))
+    const viewportTop = scrollTop
+    const viewportBottom = scrollTop + viewportHeight
+
+    if (direction === 1) {
+      if (itemBottom > viewportBottom) {
+        scrollBox.scrollTo(Math.max(0, itemTop))
+      }
+      return
+    }
+
+    if (itemTop < viewportTop) {
+      const targetScrollTop = itemBottom - viewportHeight
+      scrollBox.scrollTo(Math.max(0, targetScrollTop))
+    }
   }
 
   const move = (direction: -1 | 1) => {
@@ -40,15 +59,15 @@ function ScrollboxWithDescendants() {
     if (items.length === 0) return
 
     let nextIndex = selectedIndex + direction
-    if (nextIndex < 0) nextIndex = items.length - 1
-    if (nextIndex >= items.length) nextIndex = 0
+    if (nextIndex < 0) return
+    if (nextIndex >= items.length) return
 
     const nextItem = items[nextIndex]
     if (nextItem) {
       flushSync(() => {
         setSelectedIndex(nextIndex)
       })
-      scrollToItem(nextItem)
+      scrollToItemIfNeeded({ item: nextItem, direction })
     }
   }
 

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

@@ -23,7 +23,9 @@ test('list detail metadata label renders short values in row layout (key: value)
         text.includes('Metadata Test') &&
         text.includes('Name') &&
         text.includes('John Doe') &&
-        text.includes('Email')
+        text.includes('Email') &&
+        text.includes('Website') &&
+        text.includes('↑↓ navigate')
       )
     },
   })

package/src/examples/list-loading-empty-view.vitest.tsx

@@ -25,19 +25,19 @@ test('empty view shows spinner when list is loading', async () => {
     },
   })
 
-  // Spinner animates. Normalize for stable snapshots.
-  const normalized = text.replace(/[◰◳◲◱]/g, '◰')
+  // Spinner animates (pulsing dots: ' ' · •). Normalize for stable snapshots.
+  const normalized = text.replace(/[·•]/g, '•')
   expect(normalized).toMatchInlineSnapshot(`
     "
 
 
        Loading Empty View ───────────────────────────────────
 
-       > Search...
+       • Search...
 
 
 
-                            ◰ loading...
+                            • loading...
 
 
 
@@ -45,5 +45,5 @@ test('empty view shows spinner when list is loading', async () => {
 
        ↑↓ navigate   ^k actions"
   `)
-  expect(text).toMatch(/[◰◳◲◱]\s+loading\.\.\./)
+  expect(text).toMatch(/[·• ]\s*loading\.\.\./)
 }, 10000)

package/src/examples/list-scrollbox.vitest.tsx

@@ -69,12 +69,12 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
 
        > Search items...
 
+       ○ Item 1 Description for item 1
+       ★ Item 2 Description for item 2
        ◆ Item 3 Description for item 3
        ↯ Item 4 Description for item 4
        ▷ Item 5 Description for item 5
-      ›▦ Item 6 Description for item 6
-       ◴ Item 7 Description for item 7
-       ▯ Item 8 Description for item 8"
+      ›▦ Item 6 Description for item 6"
   `)
 
   await session.press('down')
@@ -90,12 +90,12 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
 
        > Search items...
 
-       ▦ Item 6 Description for item 6
        ◴ Item 7 Description for item 7
        ▯ Item 8 Description for item 8
       ›▤ Item 9 Description for item 9
        Item 10 Description for item 10
-       ○ Item 11 Description for item 11"
+       ○ Item 11 Description for item 11
+       ★ Item 12 Description for item 12"
   `)
 
   await session.press('up')

package/src/examples/list-spacing-default.tsx

@@ -0,0 +1,38 @@
+/**
+ * Test file for List with spacingMode="default" (single-line items)
+ */
+
+import { List, Icon, Color, renderWithProviders } from 'termcast'
+
+function ListSpacingDefault() {
+  return (
+    <List navigationTitle="Default Mode" spacingMode="default">
+      <List.Section title="With Icons">
+        <List.Item
+          icon={Icon.Document}
+          title="Report"
+          subtitle="Q4 financial summary"
+          accessories={[{ tag: { value: 'Draft', color: Color.Yellow } }]}
+        />
+        <List.Item
+          icon={Icon.Code}
+          title="API Docs"
+          subtitle="REST endpoints guide"
+          accessories={[{ text: 'v2.1' }]}
+        />
+      </List.Section>
+      <List.Section title="Without Icons">
+        <List.Item
+          title="Meeting Notes"
+          subtitle="Weekly standup points"
+          accessories={[{ tag: 'Important' }]}
+        />
+      </List.Section>
+      <List.Section title="No Subtitle">
+        <List.Item icon={Icon.Star} title="Favorites" />
+      </List.Section>
+    </List>
+  )
+}
+
+await renderWithProviders(<ListSpacingDefault />)

package/src/examples/list-spacing-mode.tsx

@@ -0,0 +1,137 @@
+/**
+ * Example demonstrating List spacingMode prop.
+ *
+ * - 'default': Single-line items with title and subtitle on same row
+ * - 'relaxed': Two-line items with title on first row, subtitle below aligned with title start
+ *
+ * Use Action to toggle between modes and see the difference.
+ */
+
+import { useState } from 'react'
+import {
+  List,
+  ActionPanel,
+  Action,
+  Icon,
+  Color,
+  renderWithProviders,
+  type ListSpacingMode,
+} from 'termcast'
+
+function ListSpacingModeExample() {
+  const [spacingMode, setSpacingMode] = useState<ListSpacingMode>('relaxed')
+
+  const toggleMode = () => {
+    setSpacingMode((prev) => (prev === 'default' ? 'relaxed' : 'default'))
+  }
+
+  return (
+    <List
+      navigationTitle={`Spacing Mode: ${spacingMode}`}
+      spacingMode={spacingMode}
+    >
+      <List.Section title="With Icons" subtitle="Items have icon, title, subtitle">
+        <List.Item
+          icon={Icon.Document}
+          title="Quarterly Report"
+          subtitle="Q4 2024 financial summary and projections"
+          accessories={[{ tag: { value: 'Draft', color: Color.Yellow } }]}
+          actions={
+            <ActionPanel>
+              <Action title="Toggle Spacing Mode" onAction={toggleMode} />
+            </ActionPanel>
+          }
+        />
+        <List.Item
+          icon={Icon.Code}
+          title="API Documentation"
+          subtitle="REST endpoints and authentication guide"
+          accessories={[
+            { text: 'v2.1' },
+            { date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000) },
+          ]}
+          actions={
+            <ActionPanel>
+              <Action title="Toggle Spacing Mode" onAction={toggleMode} />
+            </ActionPanel>
+          }
+        />
+        <List.Item
+          icon={Icon.Gear}
+          title="Configuration"
+          subtitle="System settings and preferences"
+          accessories={[{ tag: { value: 'Active', color: Color.Green } }]}
+          actions={
+            <ActionPanel>
+              <Action title="Toggle Spacing Mode" onAction={toggleMode} />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+
+      <List.Section title="Without Icons" subtitle="Plain text items">
+        <List.Item
+          title="Meeting Notes"
+          subtitle="Weekly standup discussion points"
+          accessories={[{ date: new Date(Date.now() - 60 * 60 * 1000) }]}
+          actions={
+            <ActionPanel>
+              <Action title="Toggle Spacing Mode" onAction={toggleMode} />
+            </ActionPanel>
+          }
+        />
+        <List.Item
+          title="Project Timeline"
+          subtitle="Milestones and deadlines for Q1"
+          accessories={[{ text: { value: 'Important', color: Color.Red } }]}
+          actions={
+            <ActionPanel>
+              <Action title="Toggle Spacing Mode" onAction={toggleMode} />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+
+      <List.Section title="No Subtitle" subtitle="Title only items">
+        <List.Item
+          icon={Icon.Star}
+          title="Favorites"
+          accessories={[{ tag: '12 items' }]}
+          actions={
+            <ActionPanel>
+              <Action title="Toggle Spacing Mode" onAction={toggleMode} />
+            </ActionPanel>
+          }
+        />
+        <List.Item
+          title="Recent"
+          accessories={[{ date: new Date() }]}
+          actions={
+            <ActionPanel>
+              <Action title="Toggle Spacing Mode" onAction={toggleMode} />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+
+      <List.Section title="Long Content" subtitle="Testing overflow behavior">
+        <List.Item
+          icon={Icon.Text}
+          title="Very Long Title That Might Need Truncation"
+          subtitle="This is a particularly verbose subtitle that describes the item in great detail"
+          accessories={[
+            { tag: { value: 'Beta', color: Color.Blue } },
+            { text: 'Updated' },
+          ]}
+          actions={
+            <ActionPanel>
+              <Action title="Toggle Spacing Mode" onAction={toggleMode} />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+    </List>
+  )
+}
+
+await renderWithProviders(<ListSpacingModeExample />)

package/src/examples/list-spacing-mode.vitest.tsx

@@ -0,0 +1,158 @@
+/**
+ * E2E tests for List spacingMode prop.
+ *
+ * Tests both 'default' (single-line) and 'relaxed' (two-line) modes
+ * to verify layout differences and subtitle alignment.
+ */
+
+import { test, expect, afterEach, beforeEach, describe } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+describe('spacingMode default', () => {
+  let session: Session
+
+  beforeEach(async () => {
+    session = await launchTerminal({
+      command: 'bun',
+      args: ['src/examples/list-spacing-default.tsx'],
+      cols: 70,
+      rows: 20,
+    })
+  })
+
+  afterEach(() => {
+    session?.close()
+  })
+
+  test('renders single-line items with title and subtitle on same row', async () => {
+    await session.text({
+      waitFor: (text) => /Default Mode/i.test(text),
+    })
+
+    const text = await session.text()
+    expect(text).toMatchInlineSnapshot(`
+      "
+
+
+         Default Mode ───────────────────────────────────────────────────
+
+         > Search...
+
+         With Icons
+        ›▯ Report Q4 financial summary                            [Draft]
+         ⟨⟩ API Docs REST endpoints guide                            v2.1
+
+         Without Icons
+         Meeting Notes Weekly standup points                  [Important]
+
+         No Subtitle
+         ★ Favorites
+
+
+         ↑↓ navigate   ^k actions
+
+      "
+    `)
+
+    // Title and subtitle on same line
+    expect(text).toContain('Report')
+    expect(text).toContain('Q4 financial')
+  }, 10000)
+})
+
+describe('spacingMode relaxed', () => {
+  let session: Session
+
+  beforeEach(async () => {
+    session = await launchTerminal({
+      command: 'bun',
+      args: ['src/examples/list-spacing-relaxed.tsx'],
+      cols: 70,
+      rows: 25,
+    })
+  })
+
+  afterEach(() => {
+    session?.close()
+  })
+
+  test('renders two-line items with subtitle below title', async () => {
+    await session.text({
+      waitFor: (text) => /Relaxed Mode/i.test(text),
+    })
+
+    const text = await session.text()
+    expect(text).toMatchInlineSnapshot(`
+      "
+
+
+         Relaxed Mode ───────────────────────────────────────────────────
+
+         > Search...
+
+         With Icons
+        ›▯ Report                                                 [Draft]
+           Q4 financial summary
+
+         ⟨⟩ API Docs                                                 v2.1
+           REST endpoints guide
+
+
+         Without Icons
+         Meeting Notes                                        [Important]
+         Weekly standup points
+
+
+         No Subtitle
+
+
+         ↑↓ navigate   ^k actions
+
+      "
+    `)
+
+    // Should have content
+    expect(text).toContain('Report')
+    expect(text).toContain('Q4 financial')
+  }, 10000)
+
+  test('navigates through relaxed items', async () => {
+    await session.text({
+      waitFor: (text) => /Relaxed Mode/i.test(text),
+    })
+
+    await session.press('down')
+    const afterDown = await session.text()
+    expect(afterDown).toMatchInlineSnapshot(`
+      "
+
+
+         Relaxed Mode ───────────────────────────────────────────────────
+
+         > Search...
+
+         With Icons
+         ▯ Report                                                 [Draft]
+           Q4 financial summary
+
+        ›⟨⟩ API Docs                                                 v2.1
+           REST endpoints guide
+
+
+         Without Icons
+         Meeting Notes                                        [Important]
+         Weekly standup points
+
+
+         No Subtitle
+
+
+         ↑↓ navigate   ^k actions
+
+      "
+    `)
+
+    // Second item should be selected
+    expect(afterDown).toContain('API Docs')
+  }, 10000)
+})

package/src/examples/list-spacing-relaxed.tsx

@@ -0,0 +1,38 @@
+/**
+ * Test file for List with spacingMode="relaxed" (two-line items)
+ */
+
+import { List, Icon, Color, renderWithProviders } from 'termcast'
+
+function ListSpacingRelaxed() {
+  return (
+    <List navigationTitle="Relaxed Mode" spacingMode="relaxed">
+      <List.Section title="With Icons">
+        <List.Item
+          icon={Icon.Document}
+          title="Report"
+          subtitle="Q4 financial summary"
+          accessories={[{ tag: { value: 'Draft', color: Color.Yellow } }]}
+        />
+        <List.Item
+          icon={Icon.Code}
+          title="API Docs"
+          subtitle="REST endpoints guide"
+          accessories={[{ text: 'v2.1' }]}
+        />
+      </List.Section>
+      <List.Section title="Without Icons">
+        <List.Item
+          title="Meeting Notes"
+          subtitle="Weekly standup points"
+          accessories={[{ tag: 'Important' }]}
+        />
+      </List.Section>
+      <List.Section title="No Subtitle">
+        <List.Item icon={Icon.Star} title="Favorites" />
+      </List.Section>
+    </List>
+  )
+}
+
+await renderWithProviders(<ListSpacingRelaxed />)