termcast 1.3.9 → 1.3.16

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

@@ -1,12 +1,14 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import { Theme } from 'termcast/src/theme'
+import { BoxRenderable, TextareaRenderable } from '@opentui/core'
 import { WithLeftBorder } from './with-left-border'
 import { FormItemProps, FormItemRef } from './types'
 import { useFormContext, Controller } from 'react-hook-form'
-import { useFocusContext } from './index'
+import { useFocusContext, useFormFieldDescendant } from './index'
 import { useKeyboard } from '@opentui/react'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { FileAutocomplete } from './file-autocomplete'
+import { useFormNavigationHelpers } from './use-form-navigation'
 
 export interface FilePickerProps extends FormItemProps<string[]> {
   /**
@@ -34,6 +36,11 @@ export interface FilePickerProps extends FormItemProps<string[]> {
    * Placeholder text for the input field
    */
   placeholder?: string
+  /**
+   * The initial directory to start browsing from.
+   * @defaultValue current working directory
+   */
+  initialDirectory?: string
 }
 
 export type FilePickerRef = FormItemRef
@@ -54,28 +61,34 @@ const FilePickerField = ({
   setFocusedField: (id: string) => void
 }): any => {
   const isInFocus = useIsInFocus()
-  const [inputValue, setInputValue] = React.useState('')
   const [showAutocomplete, setShowAutocomplete] = React.useState(false)
-  const inputRef = React.useRef<any>(null)
+  const [searchTrigger, setSearchTrigger] = React.useState(0)
+  const inputRef = React.useRef<TextareaRenderable>(null)
   const anchorRef = React.useRef<any>(null)
 
-  // Show autocomplete when typing
-  React.useEffect(() => {
-    if (inputValue && isFocused) {
-      setShowAutocomplete(true)
-    } else if (!inputValue) {
-      setShowAutocomplete(false)
-    }
-  }, [inputValue, isFocused])
-
-  // Handle Enter key
+  // Handle Enter key and left arrow for removing last file
   useKeyboard((evt) => {
     if (!isFocused || !isInFocus) return
 
+    // Left arrow removes last selected file when input is empty
+    if (evt.name === 'left') {
+      const inputValue = inputRef.current?.plainText || ''
+      if (!inputValue && selectedFiles.length > 0) {
+        const newFiles = selectedFiles.slice(0, -1)
+        field.onChange(newFiles)
+        if (props.onChange) {
+          props.onChange(newFiles)
+        }
+      }
+      return
+    }
+
     if (evt.name === 'return') {
+      const inputValue = inputRef.current?.plainText || ''
       // If input is empty, show files in current directory
       if (!inputValue && !showAutocomplete) {
         setShowAutocomplete(true)
+        setSearchTrigger((n) => n + 1)
       }
       // If autocomplete is not visible and input has value, add the path
       else if (inputValue.trim() && !showAutocomplete) {
@@ -88,7 +101,7 @@ const FilePickerField = ({
         if (props.onChange) {
           props.onChange(newFiles)
         }
-        setInputValue('')
+        inputRef.current?.setText('')
       }
     }
   })
@@ -101,7 +114,7 @@ const FilePickerField = ({
     if (props.onChange) {
       props.onChange(newFiles)
     }
-    setInputValue('')
+    inputRef.current?.setText('')
     setShowAutocomplete(false)
   }
 
@@ -111,7 +124,7 @@ const FilePickerField = ({
     <box flexDirection='column'>
       <WithLeftBorder withDiamond isFocused={isFocused}>
         <text
-          fg={Theme.text}
+          fg={isFocused ? Theme.primary : Theme.text}
           onMouseDown={() => {
             setFocusedField(props.id)
           }}
@@ -121,13 +134,26 @@ const FilePickerField = ({
       </WithLeftBorder>
       <WithLeftBorder isFocused={isFocused}>
         <box flexDirection='column' ref={anchorRef}>
-          <input
+          <textarea
             ref={inputRef}
-            value={inputValue}
+            height={1}
+            keyBindings={[
+              { name: 'return', action: 'submit' },
+              { name: 'linefeed', action: 'submit' },
+            ]}
+            initialValue=""
             placeholder={props.placeholder || 'Enter file path...'}
             focused={isFocused}
             onMouseDown={() => setFocusedField(props.id)}
-            onInput={(value: string) => setInputValue(value)}
+            onContentChange={() => {
+              const value = inputRef.current?.plainText || ''
+              if (value && isFocused) {
+                setShowAutocomplete(true)
+                setSearchTrigger((n) => n + 1)
+              } else if (!value) {
+                setShowAutocomplete(false)
+              }
+            }}
           />
           {selectedFiles.length > 0 && (
             <box flexDirection='column' marginTop={1}>
@@ -154,51 +180,35 @@ const FilePickerField = ({
         </WithLeftBorder>
       )}
       <FileAutocomplete
-        value={inputValue}
-        onChange={(newValue) => {
-          setInputValue(newValue)
-          // Move cursor to end when value changes
-          if (inputRef.current) {
-            inputRef.current.cursorPosition = newValue.length
-          }
-        }}
         onSelect={handleSelectFile}
         visible={showAutocomplete}
         onVisibilityChange={setShowAutocomplete}
         inputRef={inputRef}
         anchorRef={anchorRef}
+        searchTrigger={searchTrigger}
+        canChooseFiles={props.canChooseFiles}
+        canChooseDirectories={props.canChooseDirectories}
+        initialDirectory={props.initialDirectory}
       />
     </box>
   ) as React.ReactElement
 }
 
 export const FilePicker = (props: FilePickerProps): 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 keyboard navigation
   useKeyboard((evt) => {
@@ -206,9 +216,9 @@ export const FilePicker = (props: FilePickerProps): any => {
 
     if (evt.name === 'tab') {
       if (evt.shift) {
-        handleNavigateUp()
+        navigateToPrevious()
       } else {
-        handleNavigateDown()
+        navigateToNext()
       }
     }
   })
@@ -220,12 +230,14 @@ export const FilePicker = (props: FilePickerProps): any => {
       defaultValue={props.defaultValue || props.value || []}
       render={(renderProps) => {
         return (
-          <FilePickerField
-            {...renderProps}
-            props={props}
-            isFocused={isFocused}
-            setFocusedField={setFocusedField}
-          />
+          <box ref={elementRef} flexDirection='column'>
+            <FilePickerField
+              {...renderProps}
+              props={props}
+              isFocused={isFocused}
+              setFocusedField={setFocusedField}
+            />
+          </box>
         ) as React.ReactElement
       }}
     />

package/src/components/form/form-ref.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import { TextareaRenderable } from '@opentui/core'
+import { UseFormRegisterReturn } from 'react-hook-form'
+
+/**
+ * Creates a fake ref object that satisfies react-hook-form's register() requirements.
+ * RHF expects a ref with:
+ * - `name`: field name
+ * - `value`: getter/setter for reading/writing the field value
+ * - `focus()`: optional, for focusing on validation errors
+ *
+ * This allows using register() directly with non-HTML inputs like opentui's textarea.
+ */
+export function createReactHookFormRef(options: {
+  name: string
+  getValue: () => string
+  setValue: (value: string) => void
+  focus?: () => void
+}) {
+  return {
+    name: options.name,
+    get value() {
+      return options.getValue()
+    },
+    set value(v: string) {
+      options.setValue(v)
+    },
+    focus: options.focus || (() => {}),
+  }
+}
+
+/**
+ * Creates a react-hook-form adapter for opentui's TextareaRenderable.
+ *
+ * Returns:
+ * - `formRef`: A fake ref object that RHF can use to get/set values
+ * - `onContentChange`: Handler to trigger RHF's onChange
+ * - `refCallback`: A memoized ref callback to pass to the textarea's ref prop
+ *
+ * IMPORTANT: The refCallback must be memoized (via useCallback) at the call site
+ * because register() returns a new object on every render. Passing register().ref
+ * directly to the textarea ref prop causes unnecessary re-renders.
+ */
+export function createTextareaFormRef(
+  name: string,
+  textareaRef: React.RefObject<TextareaRenderable | null>,
+  registration: UseFormRegisterReturn<string>,
+) {
+  const formRef = createReactHookFormRef({
+    name,
+    getValue: () => textareaRef.current?.plainText || '',
+    setValue: (v) => {
+      textareaRef.current?.setText(v)
+    },
+  })
+
+  const onContentChange = () => {
+    registration.onChange({
+      target: formRef,
+      type: 'change',
+    })
+  }
+
+  return {
+    formRef,
+    onContentChange,
+  }
+}

package/src/components/form/index.tsx

@@ -1,4 +1,10 @@
-import React, { useState, createContext, useContext, useEffect } from 'react'
+import React, {
+  useState,
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useRef,
+} from 'react'
 import { useKeyboard } from '@opentui/react'
 import { useForm, FormProvider } from 'react-hook-form'
 import { ActionPanel } from 'termcast/src/components/actions'
@@ -6,8 +12,16 @@ import { logger } from 'termcast/src/logger'
 import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useDialog } from 'termcast/src/internal/dialog'
 import { Theme } from 'termcast/src/theme'
-import { TextAttributes } from '@opentui/core'
-import { useStore } from 'termcast/src/state'
+import {
+  TextAttributes,
+  ScrollBoxRenderable,
+  BoxRenderable,
+} from '@opentui/core'
+
+import {
+  createDescendants,
+  DescendantContextType,
+} from 'termcast/src/descendants'
 import {
   FormValues,
   FormProps,
@@ -20,10 +34,39 @@ import {
   FormProps_2,
   FormItemProps_2,
 } from './types'
+import { FORM_MAX_WIDTH } from './description'
+import { ScrollBox } from 'termcast/src/internal/scrollbox'
 
 export * from './types'
 export { useFormContext } from 'react-hook-form'
 
+// Form field descendant type - stores element ref for scrolling
+interface FormFieldDescendant {
+  id: string
+  elementRef?: BoxRenderable | null
+}
+
+// Create descendants for form fields
+const {
+  DescendantsProvider: FormFieldDescendantsProvider,
+  useDescendants: useFormFieldDescendants,
+  useDescendant: useFormFieldDescendant,
+} = createDescendants<FormFieldDescendant>()
+
+export { useFormFieldDescendant }
+
+// Context to provide scrollbox ref and descendants to form fields
+interface FormScrollContextValue {
+  scrollBoxRef: React.RefObject<ScrollBoxRenderable | null>
+  descendantsContext: DescendantContextType<FormFieldDescendant>
+}
+
+const FormScrollContext = createContext<FormScrollContextValue | null>(null)
+
+export const useFormScrollContext = () => {
+  return useContext(FormScrollContext)
+}
+
 // Context for managing focused field
 interface FocusContextValue {
   focusedField: string | null
@@ -52,26 +95,7 @@ export const useFormSubmit = () => {
   return context // Can be null if not in a form
 }
 
-// Footer component to show keyboard shortcuts
 function FormFooter(): any {
-  const toast = useStore((state) => state.toast)
-
-  if (toast) {
-    return (
-      <box
-        border={false}
-        style={{
-          paddingLeft: 1,
-          paddingRight: 1,
-          paddingTop: 1,
-          marginTop: 1,
-        }}
-      >
-        {toast}
-      </box>
-    )
-  }
-
   return (
     <box
       border={false}
@@ -83,16 +107,14 @@ function FormFooter(): any {
         flexDirection: 'row',
       }}
     >
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        ↵
-      </text>
+      <text fg={Theme.text} attributes={TextAttributes.BOLD}>ctrl ↵</text>
       <text fg={Theme.textMuted}> submit</text>
       <text fg={Theme.text} attributes={TextAttributes.BOLD}>
         {'   '}↑↓
       </text>
       <text fg={Theme.textMuted}> navigate</text>
       <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'   '}^k
+          {'   '}^k
       </text>
       <text fg={Theme.textMuted}> actions</text>
     </box>
@@ -157,14 +179,54 @@ export const Form: FormType = ((props) => {
     // mode: 'onChange',
   })
 
-  const [focusedField, setFocusedField] = useState<string | null>(null)
+  const [focusedField, setFocusedFieldRaw] = useState<string | null>(null)
+
+  const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
+  const descendantsContext = useFormFieldDescendants()
+
+  const scrollToField = (fieldId: string) => {
+    const scrollBox = scrollBoxRef.current
+    if (!scrollBox) return
+
+    // Find field in descendants map by matching props.id
+    const field = Object.values(descendantsContext.map.current).find(
+      (item) => item.props?.id === fieldId,
+    )
+    const elementRef = field?.props?.elementRef
+    if (!elementRef) return
 
-  // Auto-focus first field on mount
-  useEffect(() => {
-    const fieldNames = Object.keys(methods.getValues())
-    if (fieldNames.length > 0) {
-      logger.log(`focusing `, fieldNames[0])
-      setFocusedField(fieldNames[0])
+    const contentY = scrollBox.content?.y || 0
+    const viewportHeight = scrollBox.viewport?.height || 10
+    const currentScrollTop = scrollBox.scrollTop || 0
+
+    // Access current position from the BoxRenderable ref
+    const itemTop = elementRef.y - contentY
+    const itemBottom = itemTop + elementRef.height
+
+    if (itemTop < currentScrollTop) {
+      scrollBox.scrollTo(itemTop)
+    } else if (itemBottom > currentScrollTop + viewportHeight) {
+      scrollBox.scrollTo(itemBottom - viewportHeight)
+    }
+  }
+
+  const setFocusedField = (id: string | null) => {
+    setFocusedFieldRaw(id)
+    if (id) {
+      scrollToField(id)
+    }
+  }
+
+  // Auto-focus first field after children have registered as descendants
+  useLayoutEffect(() => {
+    const descendants = Object.values(descendantsContext.map.current)
+      .filter((item) => item.index !== -1 && item.props?.id)
+      .sort((a, b) => a.index - b.index)
+    
+    if (descendants.length > 0) {
+      const firstId = descendants[0].props!.id
+      logger.log(`focusing `, firstId)
+      setFocusedFieldRaw(firstId)
     } else {
       logger.log(`no fields to focus in form`)
     }
@@ -174,11 +236,28 @@ export const Form: FormType = ((props) => {
   const inFocus = useIsInFocus()
   const dialog = useDialog()
 
-  // Handle action key navigation only
+  // Handle action keys and page scrolling
   useKeyboard((evt) => {
     // Only handle keyboard events when form is in focus
     if (!inFocus) return
 
+    // Page up/down scrolling
+    if (evt.name === 'pageup' || evt.name === 'pagedown') {
+      const scrollBox = scrollBoxRef.current
+      if (!scrollBox) return
+
+      const viewportHeight = scrollBox.viewport?.height || 10
+      const currentScrollTop = scrollBox.scrollTop || 0
+      const scrollAmount = viewportHeight - 2 // Leave some overlap
+
+      if (evt.name === 'pageup') {
+        scrollBox.scrollTo(Math.max(0, currentScrollTop - scrollAmount))
+      } else {
+        scrollBox.scrollTo(currentScrollTop + scrollAmount)
+      }
+      return
+    }
+
     if (evt.name === 'k' && evt.ctrl && props.actions) {
       // Ctrl+K shows actions
       dialog.push(
@@ -187,6 +266,14 @@ export const Form: FormType = ((props) => {
         </FormSubmitContext.Provider>,
         'bottom-right',
       )
+    } else if (evt.name === 'return' && evt.ctrl && props.actions) {
+      // Ctrl+Return shows actions (form submit shortcut)
+      dialog.push(
+        <FormSubmitContext.Provider value={submitContextValue}>
+          {props.actions}
+        </FormSubmitContext.Provider>,
+        'bottom-right',
+      )
     } else if (evt.name === 'return' && evt.meta && props.actions) {
       // Cmd+Return also shows actions (consistent with List)
       dialog.push(
@@ -202,16 +289,40 @@ export const Form: FormType = ((props) => {
     getFormValues: () => methods.getValues(),
   }
 
+  const scrollContextValue: FormScrollContextValue = {
+    scrollBoxRef,
+    descendantsContext,
+  }
+
   return (
     <FormProvider {...methods}>
       <FormSubmitContext.Provider value={submitContextValue}>
-        <FocusContext.Provider value={{ focusedField, setFocusedField }}>
-          <box flexDirection='column'>
-            {props.children}
-            <FormEnd />
-            <FormFooter />
-          </box>
-        </FocusContext.Provider>
+        <FormScrollContext.Provider value={scrollContextValue}>
+          <FocusContext.Provider value={{ focusedField, setFocusedField }}>
+            <box flexDirection='row' flexGrow={1} justifyContent='center'>
+              <box flexDirection='column'>
+                <ScrollBox
+                  ref={scrollBoxRef}
+                  flexGrow={1}
+                  style={{
+                    rootOptions: {
+                      maxWidth: FORM_MAX_WIDTH,
+                    },
+                    contentOptions: {
+                      justifyContent: 'center',
+                    },
+                  }}
+                >
+                  <FormFieldDescendantsProvider value={descendantsContext}>
+                    {props.children}
+                    <FormEnd />
+                  </FormFieldDescendantsProvider>
+                </ScrollBox>
+                <FormFooter />
+              </box>
+            </box>
+          </FocusContext.Provider>
+        </FormScrollContext.Provider>
       </FormSubmitContext.Provider>
     </FormProvider>
   )

package/src/components/form/password-field.tsx

@@ -1,9 +1,8 @@
-import React, { useState } from 'react'
-import { TextAttributes } from '@opentui/core'
+import React, { useRef, useState } from 'react'
+import { BoxRenderable } from '@opentui/core'
 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 { useFormNavigation } from './use-form-navigation'
@@ -18,8 +17,15 @@ export const PasswordField = (props: PasswordFieldProps): any => {
   const { control } = useFormContext()
   const { focusedField, setFocusedField } = useFocusContext()
   const isFocused = focusedField === props.id
+  const elementRef = useRef<BoxRenderable>(null)
+  const realValueRef = useRef(props.defaultValue || props.value || '')
+  const [displayLength, setDisplayLength] = useState(realValueRef.current.length)
+
+  useFormFieldDescendant({
+    id: props.id,
+    elementRef: elementRef.current,
+  })
 
-  // Use form navigation hook
   useFormNavigation(props.id)
 
   return (
@@ -27,17 +33,14 @@ export const PasswordField = (props: PasswordFieldProps): any => {
       name={props.id}
       control={control}
       defaultValue={props.defaultValue || props.value || ''}
-      render={({ field, fieldState, formState }) => {
-        // Always show masked value when not focused
-        const displayValue = isFocused
-          ? field.value
-          : '*'.repeat(field.value.length)
+      render={({ field, fieldState }) => {
+        const displayValue = '*'.repeat(displayLength)
 
         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)
                 }}
@@ -48,17 +51,27 @@ export const PasswordField = (props: PasswordFieldProps): any => {
             <WithLeftBorder isFocused={isFocused}>
               <input
                 value={displayValue}
-                onInput={(value: string) => {
-                  // Ignore masked input (all asterisks) when not focused
-                  if (
-                    isFocused &&
-                    !(/^\*+$/.test(value) && !field.value.startsWith('*'))
-                  ) {
-                    field.onChange(value)
-                    if (props.onChange) {
-                      props.onChange(value)
-                    }
+                onInput={(newDisplay: string) => {
+                  if (!isFocused) return
+
+                  const currentValue = realValueRef.current
+                  const oldLen = currentValue.length
+                  const newLen = newDisplay.length
+
+                  let newValue: string
+                  if (newLen > oldLen) {
+                    const addedChars = newDisplay.replace(/\*/g, '')
+                    newValue = currentValue + addedChars
+                  } else if (newLen < oldLen) {
+                    newValue = currentValue.slice(0, newLen)
+                  } else {
+                    return
                   }
+
+                  realValueRef.current = newValue
+                  setDisplayLength(newValue.length)
+                  field.onChange(newValue)
+                  props.onChange?.(newValue)
                 }}
                 placeholder={props.placeholder}
                 focused={isFocused}