termcast 1.3.46 → 1.3.47

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

@@ -8,7 +8,7 @@ beforeEach(async () => {
     command: 'bun',
     args: ['src/examples/list-with-detail.tsx'],
     cols: 80,
-    rows: 30,
+    rows: 33,
   })
 })
 
@@ -58,7 +58,10 @@ test('list with detail view display and navigation', async () => {
                                             │
                                             │
                                             │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+                                            │ Grass
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -97,7 +100,10 @@ test('list with detail view display and navigation', async () => {
                                             │
                                             │
                                             │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+                                            │ Grass
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -134,7 +140,10 @@ test('list with detail view display and navigation', async () => {
                                             │
                                             │
                                             │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+                                            │ Fire
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -170,11 +179,14 @@ test('list with detail view display and navigation', async () => {
       │   See Console Logs                                                       │
       │                                                                          │
       │                                                                          │
+      │                                                                          │
+      │                                                                          │
+      │                                                                          │
       │   ↵ select   ↑↓ navigate                                                 │
       │                                                                          │
       ╰──────────────────────────────────────────────────────────────────────────╯
-                                            │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -217,6 +229,9 @@ test('list with detail view display and navigation', async () => {
 
 
 
+
+
+
     "
   `)
 
@@ -257,7 +272,10 @@ test('list with detail view display and navigation', async () => {
                                             │
                                             │
                                             │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+                                            │ Fire
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -306,7 +324,10 @@ test('list detail view search functionality', async () => {
                                             │
                                             │
                                             │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+                                            │ Fire
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -332,27 +353,30 @@ test('list detail view search functionality', async () => {
        > water
 
 
-                                            │ bulbasaur                         ▲
-                  No items found            │                                   ▀
+                                            │ wartortle                         ▲
+                  No items found            │                                   █
                                             │ Illustration
                                             │
                                             │ Types
                                             │
-                                            │ Grass / Poison
+                                            │ Water
                                             │
                                             │ Characteristics
                                             │
-                                            │ - Height: 0.7m
-                                            │ - Weight: 6.9kg
+                                            │ - Height: 1m
+                                            │ - Weight: 22.5kg
                                             │
                                             │ Abilities
                                             │
-                                            │ - Chlorophyll
-                                            │ - Overgrow
+                                            │ - Torrent
+                                            │ - Rain Dish
                                             │
                                             │
                                             │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+                                            │ Water
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -369,27 +393,30 @@ test('list detail view search functionality', async () => {
        > water
 
 
-                                            │ bulbasaur                         ▲
-                  No items found            │                                   ▀
+                                            │ wartortle                         ▲
+                  No items found            │                                   █
                                             │ Illustration
                                             │
                                             │ Types
                                             │
-                                            │ Grass / Poison
+                                            │ Water
                                             │
                                             │ Characteristics
                                             │
-                                            │ - Height: 0.7m
-                                            │ - Weight: 6.9kg
+                                            │ - Height: 1m
+                                            │ - Weight: 22.5kg
                                             │
                                             │ Abilities
                                             │
-                                            │ - Chlorophyll
-                                            │ - Overgrow
+                                            │ - Torrent
+                                            │ - Rain Dish
                                             │
                                             │
                                             │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+                                            │ Water
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -438,7 +465,10 @@ test('list detail metadata rendering', async () => {
                                             │
                                             │
                                             │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+                                            │ Grass
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -482,7 +512,10 @@ test('list detail metadata rendering', async () => {
                                             │
                                             │
                                             │ Types
-       ↵ toggle detail   ↑↓ navigate   ^k a │                                   ▼
+                                            │
+                                            │ Water
+                                            │
+       ↵ toggle detail   ↑↓ navigate   ^k a │ ───────────────────────────────── ▼
 
     "
   `)
@@ -502,7 +535,8 @@ test('list with detail layout consistency - short vs long detail content', async
     waitFor: (text) => {
       return (
         text.includes('›Short Detail') &&
-        text.includes('Brief content')
+        text.includes('Brief content') &&
+        text.includes('↑↓ navigate')
       )
     },
   })
@@ -514,7 +548,8 @@ test('list with detail layout consistency - short vs long detail content', async
     waitFor: (text) => {
       return (
         text.includes('›Long Detail') &&
-        text.includes('extensive')
+        text.includes('extensive') &&
+        text.includes('↑↓ navigate')
       )
     },
   })

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

@@ -440,8 +440,6 @@ test('list actions panel with ctrl+k', async () => {
     "
 
 
-       Simple List Example ────────────────────────────────────────────
-
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -456,8 +454,10 @@ test('list actions panel with ctrl+k', async () => {
       │   See Console Logs                                             │
       │                                                                │
       │                                                                │
-      │   ↵ select   ↑↓ navigate                                       │
-      │                                                                │"
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │   ↵ select   ↑↓ navigate                                       │"
   `)
 
   // Navigate down to second action
@@ -468,8 +468,6 @@ test('list actions panel with ctrl+k', async () => {
     "
 
 
-       Simple List Example ────────────────────────────────────────────
-
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -484,8 +482,10 @@ test('list actions panel with ctrl+k', async () => {
       │   See Console Logs                                             │
       │                                                                │
       │                                                                │
-      │   ↵ select   ↑↓ navigate                                       │
-      │                                                                │"
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │   ↵ select   ↑↓ navigate                                       │"
   `)
 
   // Trigger the second action (Add to Cart)
@@ -706,15 +706,15 @@ test('list scrollbox scrolling with sections', async () => {
 
        > Search items...
 
+       Fruits
+       Apple Red and sweet                              Fresh [Popular]
+       Banana Yellow and nutritious                                Ripe
        Orange Citrus and juicy                                    Fresh
        Grape Sweet clusters                                  [Seasonal]
        Mango Tropical delight                                  Imported
        Pineapple Sweet and tangy
       ›Strawberry Red and sweet                               [Popular]
 
-       Vegetables
-       Carrot Orange and crunchy                              [Healthy]
-       Lettuce Green and fresh
 
 
        ↑↓ navigate   ^k actions
@@ -736,8 +736,6 @@ test('list scrollbox scrolling with sections', async () => {
 
        > Search items...
 
-
-       Vegetables
        Carrot Orange and crunchy                              [Healthy]
        Lettuce Green and fresh
       ›Broccoli Green florets                                 [Healthy]
@@ -746,6 +744,8 @@ test('list scrollbox scrolling with sections', async () => {
        Cucumber Cool and crisp
        Bell Pepper Colorful and crunchy                         [Fresh]
 
+       Bread Freshly baked                                  Today [New]
+
 
        ↑↓ navigate   ^k actions
 

package/src/examples/simple-file-picker.vitest.tsx

@@ -51,6 +51,7 @@ test('file picker shows form fields', async () => {
       └
 
 
+       ctrl ↵ submit   tab navigate   ^k actions
 
 
 
@@ -76,7 +77,6 @@ test('file picker shows form fields', async () => {
 
 
 
-       ctrl ↵ submit   tab navigate   ^k actions
 
     "
   `)

package/src/examples/simple-grid.vitest.tsx

@@ -137,7 +137,6 @@ test('grid navigation and display', async () => {
        Simple Grid Example ────────────────────────────────────────────
 
        > Search items...
-
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -152,11 +151,12 @@ test('grid navigation and display', async () => {
       │   See Console Logs                                             │
       │                                                                │
       │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
       │   ↵ select   ↑↓ navigate                                       │
       │                                                                │
-      ╰────────────────────────────────────────────────────────────────╯
-
-    "
+      ╰────────────────────────────────────────────────────────────────╯"
   `)
 
   // Close actions with escape
@@ -522,7 +522,6 @@ test('grid mouse interaction', async () => {
        Simple Grid Example ────────────────────────────────────────────
 
        > Search items...
-
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -537,23 +536,31 @@ test('grid mouse interaction', async () => {
       │   See Console Logs                                             │
       │                                                                │
       │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
       │   ↵ select   ↑↓ navigate                                       │
       │                                                                │
-      ╰────────────────────────────────────────────────────────────────╯
-
-    "
+      ╰────────────────────────────────────────────────────────────────╯"
   `)
 
   // Close the actions panel first
   await session.press('esc')
 
-  // Navigate back up to make Apple visible
-  await session.press('up')
-  await session.press('up')
-  await session.press('up')
-  await session.press('up')
-  await session.press('up')
-  await session.press('up')
+  // Navigate back up to make Apple visible.
+  // Grid is implemented via List, which uses edge-triggered pagination.
+  // Pressing up a fixed small number of times can leave the viewport unchanged.
+  // Overshooting is safe since List doesn't wrap at the top boundary.
+  for (let i = 0; i < 30; i++) {
+    await session.press('up')
+  }
+
+  await session.text({
+    waitFor: (text) => {
+      return text.includes('Apple')
+    },
+    timeout: 5000,
+  })
 
   // Click on "Apple" to go back to first section
   await session.click('Apple', { first: true })
@@ -566,25 +573,25 @@ test('grid mouse interaction', async () => {
        Simple Grid Example ────────────────────────────────────────────
 
        > Search items...
-
-       Fruits
-      ›🍎 Apple
-       🍌 Banana
-       🍒 Cherry
-
-       Animals
-       🐕 Dog
-       🐱 Cat
-       🐰 Rabbit
-
-       Others
-       🏠 House
-       🚗 Car
-       🚀 Rocket
-
-
-       ↵ show details   ↑↓ navigate   ^k actions
-
-    "
+      ╭────────────────────────────────────────────────────────────────╮
+      │                                                                │
+      │   Actions                                                esc   │
+      │                                                                │
+      │   > Search actions...                                          │
+      │                                                                │
+      │  ›Show Details                                                 │
+      │   Copy Emoji                                             ⌃C    │
+      │                                                                │
+      │   Settings                                                     │
+      │   Change Theme...                                              │
+      │   See Console Logs                                             │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
+      │   ↵ select   ↑↓ navigate                                       │
+      │                                                                │
+      ╰────────────────────────────────────────────────────────────────╯"
   `)
 }, 10000)

package/src/examples/simple-navigation.vitest.tsx

@@ -295,7 +295,6 @@ test('navigation with actions panel', async () => {
   expect(actionsOpenSnapshot).toMatchInlineSnapshot(`
     "
 
-
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -310,14 +309,15 @@ test('navigation with actions panel', async () => {
       │   See Console Logs                                             │
       │                                                                │
       │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
       │   ↵ select   ↑↓ navigate                                       │
       │                                                                │
       ╰────────────────────────────────────────────────────────────────╯
 
 
 
-
-
     "
   `)
 
@@ -328,7 +328,6 @@ test('navigation with actions panel', async () => {
   expect(secondActionSnapshot).toMatchInlineSnapshot(`
     "
 
-
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -343,14 +342,15 @@ test('navigation with actions panel', async () => {
       │   See Console Logs                                             │
       │                                                                │
       │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
       │   ↵ select   ↑↓ navigate                                       │
       │                                                                │
       ╰────────────────────────────────────────────────────────────────╯
 
 
 
-
-
     "
   `)
 
@@ -439,7 +439,6 @@ test('navigation with actions panel', async () => {
   expect(detailActionsSnapshot).toMatchInlineSnapshot(`
     "
 
-
       ╭────────────────────────────────────────────────────────────────╮
       │                                                                │
       │   Actions                                                esc   │
@@ -454,14 +453,15 @@ test('navigation with actions panel', async () => {
       │   See Console Logs                                             │
       │                                                                │
       │                                                                │
+      │                                                                │
+      │                                                                │
+      │                                                                │
       │   ↵ select   ↑↓ navigate                                       │
       │                                                                │
       ╰────────────────────────────────────────────────────────────────╯
 
 
 
-
-
     "
   `)
 
@@ -525,12 +525,12 @@ test('search functionality in main and detail views', async () => {
 
        Navigation Example ─────────────────────────────────────────────
 
-       > Main view
+       > second
+
+      ›Second Item Navigate to second detail
+
+
 
-       Items
-      ›First Item Navigate to first detail
-       Second Item Navigate to second detail
-       Third Item Navigate to third detail
 
 
 

package/src/extensions/dev.vitest.tsx

@@ -93,7 +93,6 @@ test('selecting command with arguments shows arguments form', async () => {
 
        > Search commands...
 
-       Google Oauth                                      view
        usePromise Demo Shows how to use the usePromise h view
        Show State Shows the current application state in view
       ›With Arguments Demonstrates command arguments (te view
@@ -101,6 +100,7 @@ test('selecting command with arguments shows arguments form', async () => {
        Throw Error Command that throws an error at root  view
 
 
+
        ↵ run command   ↑↓ navigate   ^k actions
     "
   `)
@@ -161,6 +161,7 @@ test('can fill arguments and run command', async () => {
 
   // Type in the search query field
   await session.type('my search term')
+  await session.waitIdle()
 
   const afterTypingSnapshot = await session.text()
   expect(afterTypingSnapshot).toMatchInlineSnapshot(`
@@ -183,9 +184,14 @@ test('can fill arguments and run command', async () => {
     "
   `)
 
-  // Submit via action panel (ctrl+k then enter)
+  // Submit via actions dialog.
+  // Terminals don't reliably encode Ctrl+Enter, but Ctrl+K is stable.
   await session.press(['ctrl', 'k'])
-  await session.waitIdle()
+  await waitForTextWithDebug({
+    session,
+    waitFor: (text) => text.includes('Search actions...') && text.includes('Run Command'),
+    timeout: 10000,
+  })
   await session.press('enter')
 
   await waitForTextWithDebug({

package/src/index.tsx

@@ -9,6 +9,7 @@ export { List, Grid } from 'termcast/src/components/list'
 export { List as default } from 'termcast/src/components/list'
 export type {
   ListProps,
+  ListSpacingMode,
   ItemProps as ListItemProps,
   SectionProps as ListSectionProps,
   DetailProps as ListDetailProps,
@@ -143,6 +144,7 @@ export type {
 
 // Icons and Images
 export { Icon, getIconEmoji, getIconShape, IconComponent } from 'termcast/src/components/icon'
+export { Spinner } from 'termcast/src/components/spinner'
 import {
   Image as ImageComponent,
   ImageMask,

package/src/state.tsx

@@ -2,6 +2,14 @@ import { create } from 'zustand'
 import { type ReactNode } from 'react'
 import type { TextareaRenderable } from '@opentui/core'
 import type { RaycastPackageJson } from './package-json'
+import type { KeyboardKeyEquivalent, KeyboardKeyModifier } from 'termcast/src/keyboard'
+
+// Registered action shortcuts for global keyboard handling
+// Stored by ActionPanel, consumed by List/Detail/Form keyboard handlers
+export interface RegisteredActionShortcut {
+  shortcut: { modifiers?: KeyboardKeyModifier[]; key: KeyboardKeyEquivalent }
+  execute: () => void
+}
 
 // Toast action keyboard shortcuts (ctrl+t for primary, ctrl+g for secondary)
 export const toastPrimaryActionKey = { ctrl: true, name: 't' } as const
@@ -73,6 +81,9 @@ interface AppState {
   currentThemeName: string
   // Active search input ref - used to clear search before exiting on ESC
   activeSearchInputRef: TextareaRenderable | null
+  // Registered action shortcuts for global keyboard handling
+  // ActionPanel populates this, List/Detail/Form consume it
+  registeredActionShortcuts: RegisteredActionShortcut[]
 }
 
 export const useStore = create<AppState>(() => ({
@@ -101,4 +112,6 @@ export const useStore = create<AppState>(() => ({
   currentThemeName: 'termcast',
   // Active search input ref
   activeSearchInputRef: null,
+  // Registered action shortcuts
+  registeredActionShortcuts: [],
 }))