termcast 1.3.21 → 1.3.25

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}>