termcast 1.3.46 → 1.3.48

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

@@ -33,7 +33,8 @@ test('detail metadata showcase renders markdown and metadata together', async ()
         text.includes('Project Update') &&
         text.includes('Basic Information') &&
         text.includes('Alice Johnson') &&
-        text.includes('Watchers')
+        text.includes('Watchers') &&
+        text.includes('powered by termcast')
       )
     },
     timeout: 20000,
@@ -59,6 +60,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
       - Migrated 85% of users to the new platform
       - Reduced API response time by 40%
 
+
       Technical Details
 
       The refactoring effort focused on three main areas:
@@ -67,6 +69,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
       2. Caching layer - Added Redis for session management
       3. Code cleanup - Removed deprecated endpoints
 
+
       Next Steps
 
       We will continue with Phase 2 in the upcoming sprint. The team should prioritize:
@@ -75,6 +78,7 @@ test('detail metadata showcase renders markdown and metadata together', async ()
       - Implementing the new dashboard
       - Writing integration tests
 
+
       ---
 
       Last updated: January 20, 2024
@@ -157,9 +161,6 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
 
 
-
-
-
     "
   `)
 
@@ -202,7 +203,11 @@ test('detail metadata showcase renders markdown and metadata together', async ()
 
 test('detail metadata renders long values in column layout', async () => {
   const snapshot = await session.text({
-    waitFor: (text) => text.includes('Description:') && text.includes('comprehensive'),
+    waitFor: (text) =>
+      text.includes('Description:') &&
+      text.includes('comprehensive') &&
+      text.includes('PR Link:') &&
+      text.includes('powered by termcast'),
     timeout: 15000,
   })
 
@@ -226,6 +231,7 @@ test('detail metadata renders long values in column layout', async () => {
       - Migrated 85% of users to the new platform
       - Reduced API response time by 40%
 
+
       Technical Details
 
       The refactoring effort focused on three main areas:
@@ -234,6 +240,7 @@ test('detail metadata renders long values in column layout', async () => {
       2. Caching layer - Added Redis for session management
       3. Code cleanup - Removed deprecated endpoints
 
+
       Next Steps
 
       We will continue with Phase 2 in the upcoming sprint. The team should prioritize:
@@ -242,6 +249,7 @@ test('detail metadata renders long values in column layout', async () => {
       - Implementing the new dashboard
       - Writing integration tests
 
+
       ---
 
       Last updated: January 20, 2024
@@ -324,9 +332,6 @@ test('detail metadata renders long values in column layout', async () => {
 
 
 
-
-
-
     "
   `)
 
@@ -344,8 +349,17 @@ test('detail metadata renders long values in column layout', async () => {
 }, 30000)
 
 test('detail metadata renders links', async () => {
+  // The showcase is long; scroll so the link section is visible.
+  await session.scrollDown(40)
+
   const snapshot = await session.text({
-    waitFor: (text) => text.includes('Repository:') && text.includes('github.com/example'),
+    waitFor: (text) =>
+      text.includes('Repository:') &&
+      text.includes('github.com/example') &&
+      text.includes('Docs:') &&
+      text.includes('docs.example.com') &&
+      text.includes('PR Link:') &&
+      text.includes('github.com/organization/repository/pull/12345'),
     timeout: 15000,
   })
 
@@ -398,6 +412,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
       - Migrated 85% of users to the new platform
       - Reduced API response time by 40%
 
+
       Technical Details
 
       The refactoring effort focused on three main areas:
@@ -406,6 +421,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
       2. Caching layer - Added Redis for session management
       3. Code cleanup - Removed deprecated endpoints
 
+
       Next Steps
 
       We will continue with Phase 2 in the upcoming sprint. The team should prioritize:
@@ -414,6 +430,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
       - Implementing the new dashboard
       - Writing integration tests
 
+
       ---
 
       Last updated: January 20, 2024
@@ -426,7 +443,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       Team:        Platform
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Status:      Active
 
@@ -436,7 +453,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       Risk:        Medium
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Description: This is a comprehensive metadata showcase that demonstrates all the different
                    ways you can display information using the Detail.Metadata component.
@@ -447,7 +464,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       Reviewer:    Bob Smith
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Repository:  github.com/example
 
@@ -455,7 +472,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       PR Link:     github.com/organization/repository/pull/12345
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Labels:      documentation enhancement good first issue
 
@@ -469,7 +486,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
       Due Date:    2024-02-01
 
-      ─────────────────────────────────────────────────────────────────────────────────────────────
+      ────────────────────────────────────────────────────────────────────────────────────────────
 
       Metrics
 
@@ -483,10 +500,6 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
 
 
-      esc go back                                                                  powered by termcast
-
-
-
 
 
 
@@ -498,6 +511,7 @@ test('detail metadata renders tag lists with multiple items', async () => {
 
 
 
+      esc go back                                                                  powered by termcast
 
     "
   `)

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 />)