termcast 1.3.9 → 1.3.16

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

@@ -1,14 +1,14 @@
-import React from 'react'
-import { TextAttributes } from '@opentui/core'
+import React, { useRef } from 'react'
+import { BoxRenderable } from '@opentui/core'
 import { useKeyboard } from '@opentui/react'
 import { useFormContext, Controller } from 'react-hook-form'
-import { useFocusContext } from './index'
+import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
-import { logger } from 'termcast/src/logger'
 import { Theme } from 'termcast/src/theme'
 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'
 
 export enum DatePickerType {
   Date = 'date',
@@ -29,32 +29,20 @@ interface DatePickerComponentType {
 }
 
 const DatePickerComponent = (props: DatePickerProps): any => {
-  const { control, getValues } = useFormContext()
+  const { control } = useFormContext()
   const { focusedField, setFocusedField } = useFocusContext()
   const isFocused = focusedField === props.id
   const isInFocus = useIsInFocus()
 
-  const handleNavigateUp = () => {
-    // Find previous field and focus it
-    const fieldNames = Object.keys(getValues())
-    const currentIndex = fieldNames.indexOf(props.id)
-    if (currentIndex > 0) {
-      setFocusedField(fieldNames[currentIndex - 1])
-    } else {
-      setFocusedField(fieldNames[fieldNames.length - 1])
-    }
-  }
+  const elementRef = useRef<BoxRenderable>(null)
 
-  const handleNavigateDown = () => {
-    // Find next field and focus it
-    const fieldNames = Object.keys(getValues())
-    const currentIndex = fieldNames.indexOf(props.id)
-    if (currentIndex < fieldNames.length - 1) {
-      setFocusedField(fieldNames[currentIndex + 1])
-    } else {
-      setFocusedField(fieldNames[0])
-    }
-  }
+  // Register as form field descendant for scroll support
+  useFormFieldDescendant({
+    id: props.id,
+    elementRef: elementRef.current,
+  })
+
+  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(props.id)
 
   // Handle tab navigation only
   useKeyboard((evt) => {
@@ -62,9 +50,9 @@ const DatePickerComponent = (props: DatePickerProps): any => {
 
     if (evt.name === 'tab') {
       if (evt.shift) {
-        handleNavigateUp()
+        navigateToPrevious()
       } else {
-        handleNavigateDown()
+        navigateToNext()
       }
     }
   })
@@ -76,10 +64,10 @@ const DatePickerComponent = (props: DatePickerProps): any => {
       defaultValue={props.defaultValue || props.value || null}
       render={({ field, fieldState, formState }) => {
         return (
-          <box flexDirection='column'>
+          <box ref={elementRef} flexDirection='column'>
             <WithLeftBorder withDiamond isFocused={isFocused}>
               <text
-                fg={Theme.text}
+                fg={isFocused ? Theme.primary : Theme.text}
                 onMouseDown={() => {
                   setFocusedField(props.id)
                 }}
@@ -100,6 +88,13 @@ const DatePickerComponent = (props: DatePickerProps): any => {
                 focused={isFocused}
               />
             </WithLeftBorder>
+            {field.value && (
+              <WithLeftBorder isFocused={isFocused}>
+                <text fg={Theme.accent}>
+                  Selected: {field.value.toISOString().split('T')[0]}
+                </text>
+              </WithLeftBorder>
+            )}
             {(fieldState.error || props.error) && (
               <WithLeftBorder isFocused={isFocused}>
                 <text fg={Theme.error}>

package/src/components/form/description.tsx

@@ -1,30 +1,58 @@
-import React from 'react'
-import { TextAttributes } from '@opentui/core'
+import React, { useRef, useId } from 'react'
+import { BoxRenderable, TextAttributes } from '@opentui/core'
 import { Theme } from 'termcast/src/theme'
 import { WithLeftBorder } from './with-left-border'
+import { useFocusContext, useFormFieldDescendant } from './index'
+import { useFormNavigation } from './use-form-navigation'
 
 export interface DescriptionProps {
+  id?: string
   title?: string
   text: string
   isFormTitle?: boolean
 }
 
+export const FORM_MAX_WIDTH = 70
+
 export const Description = (props: DescriptionProps): any => {
+  const elementRef = useRef<BoxRenderable>(null)
+  const autoId = useId()
+  const id = props.id || autoId
+
+  const focusContext = useFocusContext()
+  const isFocused = focusContext.focusedField === id
+
+  // Register as form field descendant for scroll and navigation support
+  useFormFieldDescendant({
+    id,
+    elementRef: elementRef.current,
+  })
+
+  // Use form navigation for tab/arrow key support
+  useFormNavigation(id)
+
   return (
-    <>
+    <box
+      ref={elementRef}
+      flexDirection='column'
+      maxWidth={FORM_MAX_WIDTH}
+      onMouseDown={() => {
+        focusContext.setFocusedField(id)
+      }}
+    >
       {props.title && (
         <WithLeftBorder
-          customCharacter={{ focused: '⁉', unfocused: '▪︎' }}
-          isFocused={false}
+          customCharacter={{ focused: '■', unfocused: '▪︎' }}
+          isFocused={isFocused}
         >
           <text fg={Theme.text} attributes={TextAttributes.BOLD}>
             {props.title}
           </text>
         </WithLeftBorder>
       )}
-      <WithLeftBorder isFocused={false}>
+      <WithLeftBorder isFocused={isFocused}>
         <text fg={Theme.textMuted}>{props.text}</text>
       </WithLeftBorder>
-    </>
+    </box>
   )
 }

package/src/components/form/dropdown.tsx

@@ -5,10 +5,8 @@ import React, {
   useMemo,
   useRef,
   useLayoutEffect,
-  useEffect,
-  Children,
 } from 'react'
-import { TextAttributes } from '@opentui/core'
+import { BoxRenderable } from '@opentui/core'
 import { useKeyboard } from '@opentui/react'
 import {
   useFormContext,
@@ -16,7 +14,7 @@ import {
   ControllerRenderProps,
   ControllerFieldState,
 } from 'react-hook-form'
-import { useFocusContext } from './index'
+import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
 import { logger } from 'termcast/src/logger'
 import { Theme } from 'termcast/src/theme'
@@ -26,6 +24,7 @@ import {
 } from 'termcast/src/descendants'
 import { WithLeftBorder } from './with-left-border'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
+import { useFormNavigationHelpers } from './use-form-navigation'
 
 export interface DropdownProps extends FormItemProps<string | string[]> {
   placeholder?: string
@@ -233,36 +232,23 @@ const DropdownContent = ({
 }: DropdownContentProps) => {
   const descendantsContext = useFormDropdownDescendants()
   const isInFocus = useIsInFocus()
-  const { getValues } = useFormContext()
   const { focusedField, setFocusedField } = useFocusContext()
   const isFocused = focusedField === props.id
   const [focusedIndex, setFocusedIndex] = useState(0)
   const [offset, setOffset] = useState(0)
 
+  const elementRef = useRef<BoxRenderable>(null)
+
+  // Register as form field descendant for scroll support
+  useFormFieldDescendant({
+    id: props.id,
+    elementRef: elementRef.current,
+  })
+
   const [selectedTitles, setSelectedTitles] = useState<string[]>([])
   const [itemsCount, setItemsCount] = useState(0)
 
-  const handleNavigateUp = () => {
-    // Find previous field and focus it
-    const fieldNames = Object.keys(getValues())
-    const currentIndex = fieldNames.indexOf(props.id)
-    if (currentIndex > 0) {
-      setFocusedField(fieldNames[currentIndex - 1])
-    } else {
-      setFocusedField(fieldNames[fieldNames.length - 1])
-    }
-  }
-
-  const handleNavigateDown = () => {
-    // Find next field and focus it
-    const fieldNames = Object.keys(getValues())
-    const currentIndex = fieldNames.indexOf(props.id)
-    if (currentIndex < fieldNames.length - 1) {
-      setFocusedField(fieldNames[currentIndex + 1])
-    } else {
-      setFocusedField(fieldNames[0])
-    }
-  }
+  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(props.id)
 
   // Helper to get value for a descendantId
   const getValueForDescendantId = (
@@ -367,9 +353,9 @@ const DropdownContent = ({
     // Handle tab navigation
     if (evt.name === 'tab') {
       if (evt.shift) {
-        handleNavigateUp()
+        navigateToPrevious()
       } else {
-        handleNavigateDown()
+        navigateToNext()
       }
     }
   })
@@ -430,10 +416,10 @@ const DropdownContent = ({
   return (
     <FormDropdownDescendantsProvider value={descendantsContext}>
       <FormDropdownContext.Provider value={contextValue}>
-        <box flexDirection='column'>
+        <box ref={elementRef} flexDirection='column'>
           <WithLeftBorder withDiamond isFocused={isFocused}>
             <text
-              fg={Theme.text}
+              fg={isFocused ? Theme.primary : Theme.text}
               onMouseDown={() => {
                 setFocusedField(props.id)
               }}

package/src/components/form/file-autocomplete.tsx

@@ -1,59 +1,63 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import { Theme } from 'termcast/src/theme'
-import { FileSystemItem, searchFiles, parsePath } from '../../utils/file-system'
+import { TextareaRenderable, RGBA } from '@opentui/core'
+import { searchFiles, parsePath } from '../../utils/file-system'
 import { useKeyboard } from '@opentui/react'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 
+const backgroundPanel = RGBA.fromHex(Theme.backgroundPanel)
+const primary = RGBA.fromHex(Theme.primary)
+const border = RGBA.fromHex(Theme.border)
+
 export interface FileAutocompleteProps {
-  value: string
-  onChange: (value: string) => void
   onSelect: (path: string) => void
   visible: boolean
   onVisibilityChange: (visible: boolean) => void
-  inputRef: React.RefObject<any>
+  inputRef: React.RefObject<TextareaRenderable | null>
   anchorRef: React.RefObject<any>
+  searchTrigger: number
+  canChooseFiles?: boolean
+  canChooseDirectories?: boolean
+  initialDirectory?: string
 }
 
 export const FileAutocomplete = ({
-  value,
-  onChange,
   onSelect,
   visible,
   onVisibilityChange,
   inputRef,
   anchorRef,
+  searchTrigger,
+  canChooseFiles = true,
+  canChooseDirectories = false,
+  initialDirectory,
 }: FileAutocompleteProps): any => {
   const [selectedIndex, setSelectedIndex] = useState(0)
-  const [items, setItems] = useState<FileSystemItem[]>([])
-  const [loading, setLoading] = useState(false)
   const isInFocus = useIsInFocus()
 
-  // Parse the input to get base path and prefix
-  const { basePath, prefix } = value
-    ? parsePath(value)
-    : { basePath: '.', prefix: '' }
-
-  // Search for files when value changes or visibility changes
-  useEffect(() => {
-    if (!visible) return
+  const inputValue = inputRef.current?.plainText || ''
+  const defaultBasePath = initialDirectory || '.'
+  const { basePath, prefix } = inputValue
+    ? parsePath(inputValue)
+    : { basePath: defaultBasePath, prefix: '' }
 
-    const searchForFiles = async () => {
-      setLoading(true)
-      try {
-        const results = await searchFiles(basePath, prefix)
-        setItems(results)
-        setSelectedIndex(0)
-      } catch (error) {
-        setItems([])
-      } finally {
-        setLoading(false)
-      }
-    }
+  const { data: items = [], isLoading: loading } = useQuery({
+    queryKey: ['file-autocomplete', basePath, prefix, searchTrigger, canChooseFiles, canChooseDirectories],
+    queryFn: async () => {
+      const results = await searchFiles(basePath, prefix)
+      const filtered = results.filter((item) => {
+        if (item.isDirectory) return true
+        return canChooseFiles
+      })
+      setSelectedIndex(0)
+      return filtered
+    },
+    enabled: visible,
+  })
 
-    searchForFiles()
-  }, [value, visible, basePath, prefix])
+  const directoryOnlyMode = canChooseDirectories && !canChooseFiles
 
-  // Handle keyboard navigation
   useKeyboard((evt) => {
     if (!visible || !isInFocus) return
 
@@ -65,77 +69,83 @@ export const FileAutocomplete = ({
       onVisibilityChange(false)
     } else if (evt.name === 'return') {
       if (items[selectedIndex]) {
+        const value = inputRef.current?.plainText || ''
         const selectedItem = items[selectedIndex]
         const newValue =
           value.substring(0, value.lastIndexOf('/') + 1) + selectedItem.name
 
         if (selectedItem.isDirectory) {
-          // Add trailing slash for directories
-          onChange(newValue + '/')
-          // Keep autocomplete open for directories
+          const fullPath = newValue + '/'
+          inputRef.current?.setText(fullPath)
+          inputRef.current!.cursorOffset = fullPath.length
         } else {
           onSelect(newValue)
           onVisibilityChange(false)
         }
       }
+    } else if (evt.name === 'right') {
+      if (items[selectedIndex]) {
+        const value = inputRef.current?.plainText || ''
+        const selectedItem = items[selectedIndex]
+        const newValue =
+          value.substring(0, value.lastIndexOf('/') + 1) + selectedItem.name
+        onSelect(newValue)
+        onVisibilityChange(false)
+      }
     }
   })
 
   if (!visible || items.length === 0) return null
 
-  // Calculate position based on anchor element
   const anchorElement = anchorRef.current
   if (!anchorElement) return null
 
+  const maxVisible = 8
+  const visibleItems = items.slice(0, maxVisible)
+  const displayHeight = visibleItems.length + 1
+
+  const contentWidth = anchorElement.width - 2
+
+  const hintText = directoryOnlyMode
+    ? '↑↓ navigate  ⏎ open folder  → select folder  esc close'
+    : '↑↓ navigate  ⏎ open/select  → select  esc close'
+
   return (
     <box
       position='absolute'
-      top={anchorElement.y + anchorElement.height}
+      top={anchorElement.y - displayHeight - 2}
       left={anchorElement.x}
       width={anchorElement.width}
+      height={displayHeight + 2}
       zIndex={1000}
       borderStyle='single'
-      borderColor={Theme.border}
-      backgroundColor={Theme.backgroundPanel}
-      maxHeight={10}
+      borderColor={border}
+      backgroundColor={backgroundPanel}
+      shouldFill
     >
-      {loading ? (
-        <text fg={Theme.textMuted} padding={1}>
-          Loading...
-        </text>
-      ) : (
-        <box flexDirection='column'>
-          {items.map((item, index) => (
-            <box
-              key={item.path}
-              paddingLeft={1}
-              paddingRight={1}
-              backgroundColor={
-                index === selectedIndex ? Theme.primary : undefined
-              }
-              onMouseDown={() => {
-                setSelectedIndex(index)
-                const newValue =
-                  value.substring(0, value.lastIndexOf('/') + 1) + item.name
-                if (item.isDirectory) {
-                  onChange(newValue + '/')
-                  // Keep autocomplete open for directories
-                } else {
-                  onSelect(newValue)
-                  onVisibilityChange(false)
-                }
-              }}
-            >
-              <text
-                fg={index === selectedIndex ? Theme.background : Theme.text}
-              >
-                {item.isDirectory ? '📁 ' : '📄 '}
-                {item.name}
-              </text>
-            </box>
-          ))}
-        </box>
-      )}
+      <box flexDirection='column' backgroundColor={backgroundPanel} shouldFill>
+        {loading ? (
+          <text fg={Theme.textMuted}> Loading...</text>
+        ) : (
+          <>
+            {visibleItems.map((item, index) => {
+              const icon = item.isDirectory ? '📁 ' : '📄 '
+              const text = ' ' + icon + item.name
+              const padded = text.padEnd(contentWidth, ' ')
+              return (
+                <text
+                  key={item.path}
+                  fg={index === selectedIndex ? Theme.background : Theme.text}
+                  bg={index === selectedIndex ? Theme.primary : Theme.backgroundPanel}
+                >
+                  {padded}
+                </text>
+              )
+            })}
+            <text fg={Theme.textMuted}> {hintText}</text>
+          </>
+        )}
+      </box>
     </box>
   )
 }