termcast 1.3.21 → 1.3.22

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

@@ -39,19 +39,19 @@ test('grid navigation and display', async () => {
      Search items...
 
      Fruits                                                          ▲
-    ›Apple                                                           █
-     Banana                                                          █
-     Cherry
+    ›? Apple                                                         █
+     ? Banana                                                        █
+     ? Cherry
 
      Animals
-     Dog
-     Cat
-     Rabbit
+     ? Dog
+     ? Cat
+     ? Rabbit
 
      Others
-     House
-     Car
-     Rocket                                                          ▼
+     ? House
+     ? Car
+     ? Rocket                                                        ▼
 
 
      ↵ select  ↑↓ navigate  ^k actions"
@@ -70,19 +70,19 @@ test('grid navigation and display', async () => {
      Search items...
 
      Fruits                                                          ▲
-     Apple                                                           █
-    ›Banana                                                          █
-     Cherry
+     ? Apple                                                         █
+    ›? Banana                                                        █
+     ? Cherry
 
      Animals
-     Dog
-     Cat
-     Rabbit
+     ? Dog
+     ? Cat
+     ? Rabbit
 
      Others
-     House
-     Car
-     Rocket                                                          ▼
+     ? House
+     ? Car
+     ? Rocket                                                        ▼
 
 
      ↵ select  ↑↓ navigate  ^k actions"
@@ -102,19 +102,19 @@ test('grid navigation and display', async () => {
      Search items...
 
      Fruits                                                          ▲
-     Apple                                                           █
-     Banana                                                          █
-     Cherry
+     ? Apple                                                         █
+     ? Banana                                                        █
+     ? Cherry
 
      Animals
-    ›Dog
-     Cat
-     Rabbit
+    ›? Dog
+     ? Cat
+     ? Rabbit
 
      Others
-     House
-     Car
-     Rocket                                                          ▼
+     ? House
+     ? Car
+     ? Rocket                                                        ▼
 
 
      ↵ select  ↑↓ navigate  ^k actions"
@@ -166,19 +166,19 @@ test('grid navigation and display', async () => {
      Search items...
 
      Fruits                                                          ▲
-     Apple                                                           █
-     Banana                                                          █
-     Cherry
+     ? Apple                                                         █
+     ? Banana                                                        █
+     ? Cherry
 
      Animals
-    ›Dog
-     Cat
-     Rabbit
+    ›? Dog
+     ? Cat
+     ? Rabbit
 
      Others
-     House
-     Car
-     Rocket                                                          ▼
+     ? House
+     ? Car
+     ? Rocket                                                        ▼
 
 
      ↵ select  ↑↓ navigate  ^k actions"
@@ -209,8 +209,8 @@ test('grid search functionality', async () => {
 
     cat
 
+    ? Cat
 
-    Cat
 
 
 
@@ -247,12 +247,12 @@ test('grid search functionality', async () => {
 
     space
 
+    ? Rocket
+    ? Star
+    ? Moon
+    ? Sun
 
 
-    Rocket
-    Star
-    Moon
-    Sun
 
 
 
@@ -283,19 +283,19 @@ test('grid search functionality', async () => {
      Search items...
 
      Fruits                                                          ▲
-    ›Apple                                                           █
-     Banana                                                          █
-     Cherry
+    ›? Apple                                                         █
+     ? Banana                                                        █
+     ? Cherry
 
      Animals
-     Dog
-     Cat
-     Rabbit
+     ? Dog
+     ? Cat
+     ? Rabbit
 
      Others
-     House
-     Car
-     Rocket                                                          ▼
+     ? House
+     ? Car
+     ? Rocket                                                        ▼
 
 
      ↵ select  ↑↓ navigate  ^k actions"
@@ -424,19 +424,19 @@ test('grid item selection and actions', async () => {
      Search items...
 
      Fruits                                                          ▲
-    ›Apple                                                           █
-     Banana                                                          █
-     Cherry
+    ›? Apple                                                         █
+     ? Banana                                                        █
+     ? Cherry
 
      Animals
-     Dog
-     Cat
-     Rabbit
+     ? Dog
+     ? Cat
+     ? Rabbit
 
      Others
-     House
-     Car
-     Rocket                                                          ▼
+     ? House
+     ? Car
+     ? Rocket                                                        ▼
 
 
      ↵ select  ↑↓ navigate  ^k actions"
@@ -464,19 +464,19 @@ test('grid mouse interaction', async () => {
      Search items...
 
      Fruits                                                          ▲
-     Apple                                                           █
-     Banana                                                          █
-     Cherry
+     ? Apple                                                         █
+     ? Banana                                                        █
+     ? Cherry
 
      Animals
-    ›Dog
-     Cat
-     Rabbit
+    ›? Dog
+     ? Cat
+     ? Rabbit
 
      Others
-     House
-     Car
-     Rocket                                                          ▼
+     ? House
+     ? Car
+     ? Rocket                                                        ▼
 
 
      ↵ select  ↑↓ navigate  ^k actions"
@@ -503,7 +503,7 @@ test('grid mouse interaction', async () => {
 
       Search items...
 
-      Apple                                                           ▲
+      ? Apple                                                         ▲
     ┃                                                                  ┃
     ┃                                                            esc   ┃
     ┃                                                                  ┃
@@ -536,7 +536,7 @@ test('grid mouse interaction', async () => {
 
       Search items...
 
-      Apple                                                           ▲
+      ? Apple                                                         ▲
     ┃                                                                  ┃
     ┃                                                            esc   ┃
     ┃                                                                  ┃

package/src/examples/simple-navigation.tsx

@@ -6,9 +6,12 @@ import { Action, ActionPanel } from 'termcast'
 import { useNavigation } from 'termcast/src/internal/navigation'
 import { TermcastProvider } from 'termcast/src/internal/providers'
 
-function DetailView({ title }: { title: string }): any {
+function GoBackAction(): any {
   const { pop } = useNavigation()
+  return <Action title='Go Back' onAction={() => pop()} />
+}
 
+function DetailView({ title }: { title: string }): any {
   return (
     <List
       searchBarPlaceholder='Detail view - Press ESC to go back'
@@ -21,7 +24,7 @@ function DetailView({ title }: { title: string }): any {
           subtitle='Press Enter to go back or ESC to navigate back'
           actions={
             <ActionPanel>
-              <Action title='Go Back' onAction={() => pop()} />
+              <GoBackAction />
               <Action.CopyToClipboard content={title} title='Copy Title' />
             </ActionPanel>
           }
@@ -31,9 +34,17 @@ function DetailView({ title }: { title: string }): any {
   )
 }
 
-function MainView(): any {
+function OpenDetailsAction({ title }: { title: string }): any {
   const { push } = useNavigation()
+  return (
+    <Action
+      title='Open Details'
+      onAction={() => push(<DetailView title={title} />)}
+    />
+  )
+}
 
+function MainView(): any {
   const items = [
     {
       id: 'first',
@@ -62,10 +73,7 @@ function MainView(): any {
             subtitle={item.subtitle}
             actions={
               <ActionPanel>
-                <Action
-                  title='Open Details'
-                  onAction={() => push(<DetailView title={item.title} />)}
-                />
+                <OpenDetailsAction title={item.title} />
                 <Action.CopyToClipboard
                   content={item.title}
                   title='Copy Title'

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

@@ -535,9 +535,9 @@ test('navigation with actions panel', async () => {
     ┃                                                                  ┃
     ┃                                                                  ┃
     ┃                                                                  ┃
-    ┃                                                                  ┃
-    ┃   ↵ select   ↑↓ navigate                                         ┃
-    ┃                                                                  ┃"
+    ┃              ┌────────────────────────────────────┐              ┃
+    ┃   ↵ select   │↓✓nCopiedeto Clipboard - First Item │              ┃
+    ┃              └────────────────────────────────────┘              ┃"
   `)
 
   // Select Go Back action

package/src/extensions/dev.vitest.tsx

@@ -93,19 +93,19 @@ test('selecting command with arguments shows arguments form', async () => {
     "
 
 
-    ▪  With Arguments                                      █
-    │  Enter the arguments to run this command.            ▀
-    │
-    ◆  Search query
-    ┃  Search query
+    ■  With Arguments                                      █
+    ┃  Enter the arguments to run this command.            ▀
     ┃
+    ◇  Search query
+    │  Search query
+    │
     ◇  Secret key
     │  Secret key
     ◇  Category
     │  Category
 
 
-     alt ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 }, 30000)
 
@@ -137,19 +137,19 @@ test('can fill arguments and run command', async () => {
     "
 
 
-    ▪  With Arguments                                      █
-    │  Enter the arguments to run this command.            ▀
-    │
-    ◆  Search query
-    ┃  my search term
+    ■  With Arguments                                      █
+    ┃  Enter the arguments to run this command.            ▀
     ┃
+    ◇  Search query
+    │  Search query
+    │
     ◇  Secret key
     │  Secret key
     ◇  Category
     │  Category
 
 
-     alt ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
   `)
 
   // Submit the form with Alt+Enter (opens action panel), then Enter (selects submit)
@@ -171,15 +171,15 @@ test('can fill arguments and run command', async () => {
      Search...
 
      Received Arguments
-    ›Search Query my search term
-     Secret Key (empty)
-     Category (empty)
+    ›♣ Search Query (empty)
+     ♣ Secret Key (empty)
+     ♣ Category (empty)
 
 
 
-     ↵ sele┌────────────────────────────────────────┐
-           │ ✓ Copied to Clipboard - my search term │
-           └────────────────────────────────────────┘"
+     ↵ select  ┌─────────────────────────────────┐
+               │ ✓ Copied to Clipboard - (empty) │
+               └─────────────────────────────────┘"
   `)
 }, 30000)
 
@@ -208,10 +208,10 @@ test('can run simple view command without arguments', async () => {
      Search...
 
      Items                                                 ▲
-    ›First Item This is the first item                     █
-     Second Item This is the second item
-     Third Item This is the third item
-     Fourth Item This is the fourth item
+    ›♠ First Item This is the first item                   █
+     ♠ Second Item This is the second item
+     ♠ Third Item This is the third item
+     ♠ Fourth Item This is the fourth item
                                                            ▼
 
 

package/src/internal/dialog.tsx

@@ -1,5 +1,5 @@
 import { useKeyboard, useTerminalDimensions } from '@opentui/react'
-import React, { type ReactNode, useRef } from 'react'
+import React, { type ReactNode, useRef, useContext } from 'react'
 import { Theme } from 'termcast/src/theme'
 import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 import { CommonProps } from 'termcast/src/utils'
@@ -10,6 +10,7 @@ import {
 } from 'termcast/src/state'
 import { logger } from '../logger'
 import { ToastOverlay } from 'termcast/src/apis/toast'
+import { NavigationContext } from 'termcast/src/internal/navigation'
 
 const Border = {
   topLeft: '',
@@ -145,31 +146,6 @@ export function DialogProvider(props: DialogProviderProps): any {
   return (
     <>
       <InFocus inFocus={!dialogStack?.length}>{props.children}</InFocus>
-      {dialogStack.length > 0 && (
-        <box position='absolute'>
-          {dialogStack.map((item, index) => {
-            const isLastItem = index === dialogStack.length - 1
-            return (
-              <InFocus key={'dialog' + String(index)} inFocus={isLastItem}>
-                <Dialog
-                  position={item.position}
-                  onClickOutside={() => {
-                    if (!isLastItem) return
-                    const state = useStore.getState()
-                    if (state.dialogStack.length > 0) {
-                      useStore.setState({
-                        dialogStack: state.dialogStack.slice(0, -1),
-                      })
-                    }
-                  }}
-                >
-                  {item.element}
-                </Dialog>
-              </InFocus>
-            )
-          })}
-        </box>
-      )}
       <InFocus inFocus={false}>
         <ToastOverlay />
       </InFocus>
@@ -177,6 +153,43 @@ export function DialogProvider(props: DialogProviderProps): any {
   )
 }
 
+export function DialogOverlay(): any {
+  const dialogStack = useStore((state) => state.dialogStack)
+  const navContext = useContext(NavigationContext)
+
+  if (dialogStack.length === 0) {
+    return null
+  }
+
+  return (
+    <box position='absolute'>
+      {dialogStack.map((item, index) => {
+        const isLastItem = index === dialogStack.length - 1
+        return (
+          <InFocus key={'dialog' + String(index)} inFocus={isLastItem}>
+            <Dialog
+              position={item.position}
+              onClickOutside={() => {
+                if (!isLastItem) return
+                const state = useStore.getState()
+                if (state.dialogStack.length > 0) {
+                  useStore.setState({
+                    dialogStack: state.dialogStack.slice(0, -1),
+                  })
+                }
+              }}
+            >
+              <NavigationContext.Provider value={navContext}>
+                {item.element}
+              </NavigationContext.Provider>
+            </Dialog>
+          </InFocus>
+        )
+      })}
+    </box>
+  )
+}
+
 export function useDialog() {
   const dialogStack = useStore((state) => state.dialogStack)
 

package/src/internal/navigation.tsx

@@ -26,12 +26,13 @@ interface NavigationContextType {
   isPending: boolean
 }
 
-const NavigationContext = createContext<NavigationContextType | undefined>(
+export const NavigationContext = createContext<NavigationContextType | undefined>(
   undefined,
 )
 
 interface NavigationProviderProps extends CommonProps {
   children: ReactNode
+  overlay?: ReactNode
 }
 
 export function NavigationProvider(props: NavigationProviderProps): any {
@@ -139,6 +140,7 @@ export function NavigationProvider(props: NavigationProviderProps): any {
       {React.cloneElement(currentItem?.element as React.ReactElement, {
         key: stack.length,
       })}
+      {props.overlay}
     </NavigationContext.Provider>
   )
 }

package/src/internal/providers.tsx

@@ -6,7 +6,7 @@ import React, {
 } from 'react'
 import { QueryClient } from '@tanstack/react-query'
 import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'
-import { DialogProvider } from 'termcast/src/internal/dialog'
+import { DialogProvider, DialogOverlay } from 'termcast/src/internal/dialog'
 import { NavigationProvider } from 'termcast/src/internal/navigation'
 import { CommonProps } from 'termcast/src/utils'
 import { Cache } from 'termcast/src/apis/cache'
@@ -420,7 +420,9 @@ export function TermcastProvider(props: ProvidersProps): any {
           <DialogProvider>
             <box padding={2}>
               {/* NavigationProvider must be last to ensure parent providers remain in the tree when navigation changes */}
-              <NavigationProvider>{props.children}</NavigationProvider>
+              <NavigationProvider overlay={<DialogOverlay />}>
+                {props.children}
+              </NavigationProvider>
             </box>
           </DialogProvider>
         </PersistQueryClientProvider>

package/src/internal/scrollbox.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import Theme from '../theme'
+import { MacOSScrollAccel } from '@opentui/core'
 
 interface ScrollBoxProps {
   children?: React.ReactNode
@@ -23,6 +24,7 @@ export function ScrollBox({
     <scrollbox
       ref={ref}
       focused={focused}
+      scrollAcceleration={new MacOSScrollAccel()}
       flexGrow={flexGrow}
       flexShrink={flexShrink}
       style={{

package/src/keyboard.test.tsx

@@ -0,0 +1,69 @@
+import { describe, test, expect } from 'bun:test'
+import { Keyboard } from 'termcast/src/keyboard'
+import type {
+  KeyboardKeyEquivalent,
+  KeyboardKeyModifier,
+  KeyboardShortcut,
+} from 'termcast/src/keyboard'
+
+describe('Keyboard', () => {
+  test('Keyboard.Shortcut.Common has all expected shortcuts', () => {
+    const commonShortcuts = Object.keys(Keyboard.Shortcut.Common)
+    expect(commonShortcuts).toMatchInlineSnapshot(`
+[
+  "Copy",
+  "CopyDeeplink",
+  "CopyName",
+  "CopyPath",
+  "Save",
+  "Duplicate",
+  "Edit",
+  "MoveDown",
+  "MoveUp",
+  "New",
+  "Open",
+  "OpenWith",
+  "Pin",
+  "Refresh",
+  "Remove",
+  "RemoveAll",
+  "ToggleQuickLook",
+]
+`)
+  })
+
+  test('Keyboard.Shortcut.Common.Open has correct structure', () => {
+    expect(Keyboard.Shortcut.Common.Open).toMatchInlineSnapshot(`
+{
+  "key": "o",
+  "modifiers": [
+    "cmd",
+  ],
+}
+`)
+  })
+
+  test('Keyboard.Shortcut.Common.Copy has correct structure', () => {
+    expect(Keyboard.Shortcut.Common.Copy).toMatchInlineSnapshot(`
+{
+  "key": "c",
+  "modifiers": [
+    "cmd",
+    "shift",
+  ],
+}
+`)
+  })
+
+  test('Keyboard.Shortcut.Common.Remove uses ctrl modifier', () => {
+    expect(Keyboard.Shortcut.Common.Remove).toMatchInlineSnapshot(`
+{
+  "key": "x",
+  "modifiers": [
+    "ctrl",
+  ],
+}
+`)
+  })
+
+})

package/src/state.tsx

@@ -30,6 +30,8 @@ interface AppState {
   // OAuth state
   googleAccessToken?: string
   googleIdToken?: string
+  // Actions overlay state
+  forceShowActionsOverlay: boolean
 }
 
 export const useStore = create<AppState>(() => ({
@@ -48,4 +50,6 @@ export const useStore = create<AppState>(() => ({
   // OAuth state
   googleAccessToken: undefined,
   googleIdToken: undefined,
+  // Actions overlay state
+  forceShowActionsOverlay: false,
 }))