termcast 1.3.21 → 1.3.24

package/src/components/actions.tsx

@@ -17,8 +17,12 @@ import {
   moveToTrash,
 } from 'termcast/src/action-utils'
 import { useDialog } from 'termcast/src/internal/dialog'
+import { useNavigation } from 'termcast/src/internal/navigation'
 import { Dropdown } from 'termcast/src/components/dropdown'
+import { ExtensionPreferences } from 'termcast/src/components/extension-preferences'
+import { useStore } from 'termcast/src/state'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
+import { useIsOffscreen } from 'termcast/src/internal/offscreen'
 import { CommonProps } from 'termcast/src/utils'
 import type {
   KeyboardShortcut,
@@ -180,7 +184,7 @@ const Action: ActionType = (props) => {
 
   const isDestructive = props.style === ActionStyle.Destructive
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title}
@@ -210,7 +214,7 @@ Action.Push = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title}
@@ -243,7 +247,7 @@ Action.CopyToClipboard = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title}
@@ -270,7 +274,7 @@ Action.OpenInBrowser = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title}
@@ -298,7 +302,7 @@ Action.Open = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title}
@@ -328,7 +332,7 @@ Action.Paste = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title}
@@ -355,7 +359,7 @@ Action.ShowInFinder = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title || 'Show in Finder'}
@@ -382,7 +386,7 @@ Action.OpenWith = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title || `Open with ${props.application}`}
@@ -413,7 +417,7 @@ Action.Trash = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title || 'Move to Trash'}
@@ -448,7 +452,7 @@ Action.SubmitForm = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title || 'Submit'}
@@ -480,7 +484,7 @@ Action.CreateSnippet = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title || 'Create Snippet'}
@@ -510,7 +514,7 @@ Action.CreateQuicklink = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title || 'Create Quicklink'}
@@ -540,7 +544,7 @@ Action.ToggleQuickLook = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title || 'Quick Look'}
@@ -552,8 +556,6 @@ Action.ToggleQuickLook = (props) => {
 }
 
 Action.PickDate = (props) => {
-  const dialog = useDialog()
-
   // Register as descendant with execute function
   useActionDescendant({
     title: props.title || 'Pick Date',
@@ -570,7 +572,7 @@ Action.PickDate = (props) => {
     },
   })
 
-  // Render as Dropdown.Item
+  // Render as Dropdown.Item (handles offscreen check internally)
   return (
     <Dropdown.Item
       title={props.title || 'Pick Date'}
@@ -631,31 +633,55 @@ function formatShortcut(
 const ActionPanel: ActionPanelType = (props) => {
   const { children, title } = props
   const dialog = useDialog()
+  const { push } = useNavigation()
   const inFocus = useIsInFocus()
+  const isOffscreen = useIsOffscreen()
   const descendantsContext = useActionDescendants()
 
+  // Get extension and command info for configure actions
+  const extensionPackageJson = useStore((state) => state.extensionPackageJson)
+  const currentCommandName = useStore((state) => state.currentCommandName)
+
+  const hasExtensionPrefs =
+    (extensionPackageJson?.preferences?.length ?? 0) > 0
+  const currentCommand = extensionPackageJson?.commands?.find(
+    (c) => c.name === currentCommandName,
+  )
+  const hasCommandPrefs = (currentCommand?.preferences?.length ?? 0) > 0
+
   // Create context value
   const contextValue = useMemo<ActionPanelContextValue>(
     () => ({ currentSection: undefined }),
     [],
   )
 
-  // prevent showing actions if no dialog is shown
-  if (!dialog.stack.length) return null
-  // if (!inFocus) return
-
-  // Check if there's only one action and execute it immediately
+  // Auto-execute first action if flag is set (triggered by enter/ctrl+enter)
+  // Also report first action title when rendered offscreen
   useLayoutEffect(() => {
     const allActions = Object.values(descendantsContext.map.current)
       .filter((item: any) => item.index !== -1)
       .map((item: any) => item.props as ActionDescendant)
 
-    if (allActions.length === 1) {
-      logger.log(`Auto-executing single action: ${allActions[0].title}`)
+    // When offscreen, just report first action title for footer display
+    if (isOffscreen) {
+      useStore.setState({ firstActionTitle: allActions[0]?.title ?? '' })
+      return
+    }
+
+    const shouldExecute = useStore.getState().shouldAutoExecuteFirstAction
+    useStore.setState({ shouldAutoExecuteFirstAction: false })
+
+    if (!shouldExecute) return
+
+    if (allActions[0]) {
+      logger.log(`Auto-executing first action: ${allActions[0].title}`)
       dialog.clear()
       allActions[0].execute()
     }
-  }, [descendantsContext.map, dialog])
+  }, [descendantsContext.map, dialog, isOffscreen])
+
+  // prevent showing actions if no dialog is shown (must be after hooks)
+  if (!dialog.stack.length && !isOffscreen) return null
 
   // ActionPanel renders as Dropdown with children
   return (
@@ -680,6 +706,38 @@ const ActionPanel: ActionPanelType = (props) => {
           }}
         >
           {children}
+          {(hasExtensionPrefs || hasCommandPrefs) && (
+            <ActionPanel.Section title="Settings">
+              {hasExtensionPrefs && (
+                <Action
+                  title="Configure Extension..."
+                  shortcut={{ modifiers: ['cmd', 'shift'], key: ',' }}
+                  onAction={() => {
+                    dialog.clear()
+                    push(
+                      <ExtensionPreferences
+                        extensionName={extensionPackageJson!.name}
+                      />,
+                    )
+                  }}
+                />
+              )}
+              {hasCommandPrefs && (
+                <Action
+                  title="Configure Command..."
+                  onAction={() => {
+                    dialog.clear()
+                    push(
+                      <ExtensionPreferences
+                        extensionName={extensionPackageJson!.name}
+                        commandName={currentCommandName!}
+                      />,
+                    )
+                  }}
+                />
+              )}
+            </ActionPanel.Section>
+          )}
         </Dropdown>
       </ActionPanelContext.Provider>
     </ActionDescendantsProvider>
@@ -698,11 +756,13 @@ ActionPanel.Section = (props) => {
     [parentContext, props.title],
   )
 
-  // Section provides context to its children
+  // Section renders Dropdown.Section and provides context to its children
   return (
-    <ActionPanelContext.Provider value={sectionContextValue}>
-      {props.children}
-    </ActionPanelContext.Provider>
+    <Dropdown.Section title={props.title}>
+      <ActionPanelContext.Provider value={sectionContextValue}>
+        {props.children}
+      </ActionPanelContext.Provider>
+    </Dropdown.Section>
   )
 }
 
@@ -718,11 +778,13 @@ ActionPanel.Submenu = (props) => {
     [parentContext, props.title],
   )
 
-  // Submenu provides context to its children
+  // Submenu renders Dropdown.Section and provides context to its children
   return (
-    <ActionPanelContext.Provider value={submenuContextValue}>
-      {props.children}
-    </ActionPanelContext.Provider>
+    <Dropdown.Section title={props.title}>
+      <ActionPanelContext.Provider value={submenuContextValue}>
+        {props.children}
+      </ActionPanelContext.Provider>
+    </Dropdown.Section>
   )
 }
 

package/src/components/detail.tsx

@@ -9,6 +9,7 @@ import { Color, resolveColor } from 'termcast/src/colors'
 
 import { useDialog } from 'termcast/src/internal/dialog'
 import { ScrollBox } from 'termcast/src/internal/scrollbox'
+import { useStore } from 'termcast/src/state'
 
 interface ActionsInterface {
   actions?: ReactNode
@@ -277,8 +278,11 @@ const Detail: DetailType = (props) => {
     if (!inFocus) return
 
     if (evt.name === 'k' && evt.ctrl && actions) {
+      // Ctrl+K shows actions (always show sheet)
       dialog.push(actions, 'bottom-right')
     } else if (evt.name === 'return' && actions) {
+      // Enter executes first action directly
+      useStore.setState({ shouldAutoExecuteFirstAction: true })
       dialog.push(actions, 'bottom-right')
     }
   })

package/src/components/dropdown.tsx

@@ -16,6 +16,7 @@ import {
 import { Theme } from 'termcast/src/theme'
 import { logger } from 'termcast/src/logger'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
+import { useIsOffscreen } from 'termcast/src/internal/offscreen'
 import { CommonProps } from 'termcast/src/utils'
 import { createDescendants } from 'termcast/src/descendants'
 import { ScrollBox } from 'termcast/src/internal/scrollbox'
@@ -107,6 +108,7 @@ const Dropdown: DropdownType = (props) => {
     throttle,
   } = props
 
+  const isOffscreen = useIsOffscreen()
   const [selected, setSelected] = useState(0)
   const [searchText, setSearchTextState] = useState('')
   const [currentValue, setCurrentValue] = useState<string | undefined>(
@@ -122,7 +124,14 @@ const Dropdown: DropdownType = (props) => {
   const setSearchText = (text: string) => {
     inputRef.current?.setText(text)
     setSearchTextState(text)
-    setSelected(0)
+    // TODO: use flushSync when available to force descendants to update visibility
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item: any) => item.index !== -1 && !item.props?.hidden)
+      .sort((a: any, b: any) => a.index - b.index)
+
+    if (items.length > 0 && items[0]) {
+      setSelected(items[0].index)
+    }
   }
 
   const scrollToItem = (item: { props?: DropdownItemDescendant }) => {
@@ -132,19 +141,13 @@ const Dropdown: DropdownType = (props) => {
 
     const contentY = scrollBox.content?.y || 0
     const viewportHeight = scrollBox.viewport?.height || 10
-    const currentScrollTop = scrollBox.scrollTop || 0
 
+    // Calculate item position relative to content
     const itemTop = elementRef.y - contentY
-    const itemBottom = itemTop + elementRef.height
 
-    const visibleTop = currentScrollTop
-    const visibleBottom = currentScrollTop + viewportHeight
-
-    if (itemTop < visibleTop) {
-      scrollBox.scrollTo(itemTop)
-    } else if (itemBottom > visibleBottom) {
-      scrollBox.scrollTo(itemBottom - viewportHeight)
-    }
+    // Scroll so the top of the item is centered in the viewport
+    const targetScrollTop = itemTop - viewportHeight / 2
+    scrollBox.scrollTo(Math.max(0, targetScrollTop))
   }
 
   // Create context value for children
@@ -173,9 +176,16 @@ const Dropdown: DropdownType = (props) => {
   const handleSearchTextChange = (text: string) => {
     if (!inFocus) return
 
-    // Update state for context and reset selection
+    // Update state for context
     setSearchTextState(text)
-    setSelected(0)
+    // TODO: use flushSync when available to force descendants to update visibility
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item: any) => item.index !== -1 && !item.props?.hidden)
+      .sort((a: any, b: any) => a.index - b.index)
+
+    if (items.length > 0 && items[0]) {
+      setSelected(items[0].index)
+    }
 
     if (onSearchTextChange) {
       if (throttle) {
@@ -244,18 +254,36 @@ const Dropdown: DropdownType = (props) => {
     if (evt.name === 'down') {
       move(1)
     }
+    // Tab and shift+tab for navigation
+    if (evt.name === 'tab' && !evt.shift) {
+      move(1)
+    }
+    if (evt.name === 'tab' && evt.shift) {
+      move(-1)
+    }
     if (evt.name === 'return') {
       const items = Object.values(descendantsContext.map.current)
         .filter((item: any) => item.index !== -1)
         .sort((a: any, b: any) => a.index - b.index)
 
-      const currentItem = items[selected]
+      const currentItem = items.find((item) => item.index === selected)
       if (currentItem?.props) {
         selectItem((currentItem.props as DropdownItemDescendant).value)
       }
     }
   })
 
+  // When offscreen, just render children to collect descendants without UI
+  if (isOffscreen) {
+    return (
+      <DropdownDescendantsProvider value={descendantsContext}>
+        <DropdownContext.Provider value={contextValue}>
+          {children}
+        </DropdownContext.Provider>
+      </DropdownDescendantsProvider>
+    )
+  }
+
   return (
     <DropdownDescendantsProvider value={descendantsContext}>
       <DropdownContext.Provider value={contextValue}>
@@ -275,6 +303,7 @@ const Dropdown: DropdownType = (props) => {
                 <textarea
                   ref={inputRef}
                   height={1}
+                  wrapMode='none'
                   keyBindings={[
                     { name: 'return', action: 'submit' },
                     { name: 'linefeed', action: 'submit' },
@@ -419,7 +448,11 @@ function ItemOption(props: {
 const DropdownItem: (props: DropdownItemProps) => any = (props) => {
   const context = useContext(DropdownContext)
   const elementRef = useRef<{ y: number; height: number } | null>(null)
+  const isOffscreen = useIsOffscreen()
   if (!context) return null
+  
+  // Don't render UI when offscreen (used for collecting action descendants)
+  if (isOffscreen) return null
 
   const { searchText, filtering, currentSection, selectedIndex, currentValue } =
     context

package/src/components/extension-preferences.tsx

@@ -9,6 +9,7 @@ import { LocalStorage } from 'termcast/src/apis/localstorage'
 import { useNavigation } from 'termcast/src/internal/navigation'
 import { logger } from 'termcast/src/logger'
 import { getStoreDirectory } from 'termcast/src/utils'
+import { useStore } from 'termcast/src/state'
 import type { RaycastPackageJson } from 'termcast/src/package-json'
 
 interface ExtensionPreferencesProps {
@@ -46,17 +47,26 @@ export function ExtensionPreferences({
     queryKey: ['extension-preferences', extensionName, commandName],
     queryFn: async () => {
       try {
-        const storeDir = getStoreDirectory()
-        const extensionDir = path.join(storeDir, extensionName)
-        const packageJsonPath = path.join(extensionDir, 'package.json')
+        // First check extensionPath from state (dev mode), then fall back to store directory
+        const { extensionPath, extensionPackageJson } = useStore.getState()
 
-        if (!fs.existsSync(packageJsonPath)) {
-          throw new Error(`Extension ${extensionName} not found`)
-        }
+        let packageJson: RaycastPackageJson
+
+        if (extensionPath && extensionPackageJson?.name === extensionName) {
+          // Dev mode - use package.json from state or read from extensionPath
+          packageJson = extensionPackageJson
+        } else {
+          // Store extension - read from store directory
+          const storeDir = getStoreDirectory()
+          const extensionDir = path.join(storeDir, extensionName)
+          const packageJsonPath = path.join(extensionDir, 'package.json')
 
-        const packageJson: RaycastPackageJson = JSON.parse(
-          fs.readFileSync(packageJsonPath, 'utf-8'),
-        )
+          if (!fs.existsSync(packageJsonPath)) {
+            throw new Error(`Extension ${extensionName} not found`)
+          }
+
+          packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
+        }
 
         let prefsToUse: PreferenceManifest[] = []
 
@@ -103,11 +113,29 @@ export function ExtensionPreferences({
 
   const handleSubmit = async (values: Record<string, any>) => {
     try {
+      // Transform file/directory values from arrays to strings
+      // Form.FilePicker returns string[] but Raycast preferences expect string for file/directory types
+      const transformedValues: Record<string, any> = {}
+      for (const pref of preferences) {
+        const value = values[pref.name]
+        if (
+          (pref.type === 'file' ||
+            pref.type === 'directory' ||
+            pref.type === 'appPicker') &&
+          Array.isArray(value)
+        ) {
+          // Extract first element from array, or empty string if empty
+          transformedValues[pref.name] = value[0] || ''
+        } else {
+          transformedValues[pref.name] = value
+        }
+      }
+
       // Save preferences to LocalStorage
       const preferencesKey = commandName
         ? `preferences.${extensionName}.${commandName}`
         : `preferences.${extensionName}`
-      await LocalStorage.setItem(preferencesKey, JSON.stringify(values))
+      await LocalStorage.setItem(preferencesKey, JSON.stringify(transformedValues))
 
       await showToast({
         style: Toast.Style.Success,
@@ -118,7 +146,7 @@ export function ExtensionPreferences({
       })
 
       if (onSubmit) {
-        onSubmit(values)
+        onSubmit(transformedValues)
       } else {
         pop()
       }
@@ -136,11 +164,11 @@ export function ExtensionPreferences({
   }
 
   if (preferences.length === 0) {
-    // If no preferences but onSubmit provided, call it immediately
-    if (onSubmit) {
-      onSubmit({})
-      return null
-    }
+    // TODO this causes an infinite loop, because initially prefs are zero
+    // if (onSubmit) {
+    //   onSubmit({})
+    //   return null
+    // }
 
     return (
       <Form

package/src/components/form/checkbox.tsx

@@ -9,6 +9,7 @@ import { Theme } from 'termcast/src/theme'
 import { WithLeftBorder } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
+import { LoadingText } from 'termcast/src/components/loading-text'
 
 export interface CheckboxProps extends FormItemProps<boolean> {
   label: string
@@ -18,7 +19,8 @@ export type CheckboxRef = FormItemRef
 
 export const Checkbox = (props: CheckboxProps): any => {
   const { control, setValue, getValues } = useFormContext()
-  const { focusedField, setFocusedField } = useFocusContext()
+  const focusContext = useFocusContext()
+  const { focusedField, setFocusedField } = focusContext
   const isFocused = focusedField === props.id
   const isInFocus = useIsInFocus()
 
@@ -57,9 +59,8 @@ export const Checkbox = (props: CheckboxProps): any => {
       render={({ field, fieldState, formState }) => {
         return (
           <box ref={elementRef} flexDirection='column'>
-            <WithLeftBorder withDiamond isFocused={isFocused}>
-              <text
-                fg={isFocused ? Theme.primary : Theme.text}
+            <WithLeftBorder withDiamond isFocused={isFocused} isLoading={focusContext.isLoading}>
+              <box
                 onMouseDown={() => {
                   // Always focus the field when clicked
                   if (!isFocused) {
@@ -69,8 +70,13 @@ export const Checkbox = (props: CheckboxProps): any => {
                   handleToggle()
                 }}
               >
-                {props.title}
-              </text>
+                <LoadingText
+                  isLoading={isFocused && focusContext.isLoading}
+                  color={isFocused ? Theme.primary : Theme.text}
+                >
+                  {props.title || ''}
+                </LoadingText>
+              </box>
             </WithLeftBorder>
             <WithLeftBorder isFocused={isFocused}>
               <text

package/src/components/form/date-picker.tsx

@@ -9,6 +9,7 @@ import { WithLeftBorder } from './with-left-border'
 import { DatePickerWidget } from 'termcast/src/internal/date-picker-widget'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useFormNavigationHelpers } from './use-form-navigation'
+import { LoadingText } from 'termcast/src/components/loading-text'
 
 export enum DatePickerType {
   Date = 'date',
@@ -30,7 +31,8 @@ interface DatePickerComponentType {
 
 const DatePickerComponent = (props: DatePickerProps): any => {
   const { control } = useFormContext()
-  const { focusedField, setFocusedField } = useFocusContext()
+  const focusContext = useFocusContext()
+  const { focusedField, setFocusedField } = focusContext
   const isFocused = focusedField === props.id
   const isInFocus = useIsInFocus()
 
@@ -65,15 +67,19 @@ const DatePickerComponent = (props: DatePickerProps): any => {
       render={({ field, fieldState, formState }) => {
         return (
           <box ref={elementRef} flexDirection='column'>
-            <WithLeftBorder withDiamond isFocused={isFocused}>
-              <text
-                fg={isFocused ? Theme.primary : Theme.text}
+            <WithLeftBorder withDiamond isFocused={isFocused} isLoading={focusContext.isLoading}>
+              <box
                 onMouseDown={() => {
                   setFocusedField(props.id)
                 }}
               >
-                {props.title}
-              </text>
+                <LoadingText
+                  isLoading={isFocused && focusContext.isLoading}
+                  color={isFocused ? Theme.primary : Theme.text}
+                >
+                  {props.title || ''}
+                </LoadingText>
+              </box>
             </WithLeftBorder>
             <WithLeftBorder isFocused={isFocused}>
               <DatePickerWidget

package/src/components/form/description.tsx

@@ -4,6 +4,7 @@ import { Theme } from 'termcast/src/theme'
 import { WithLeftBorder } from './with-left-border'
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { useFormNavigation } from './use-form-navigation'
+import { LoadingText } from 'termcast/src/components/loading-text'
 
 export interface DescriptionProps {
   id?: string
@@ -44,10 +45,14 @@ export const Description = (props: DescriptionProps): any => {
         <WithLeftBorder
           customCharacter={{ focused: '■', unfocused: '▪︎' }}
           isFocused={isFocused}
+          isLoading={focusContext.isLoading}
         >
-          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+          <LoadingText
+            isLoading={isFocused && focusContext.isLoading}
+            color={isFocused ? Theme.primary : Theme.text}
+          >
             {props.title}
-          </text>
+          </LoadingText>
         </WithLeftBorder>
       )}
       <WithLeftBorder isFocused={isFocused}>