termcast 1.3.32 → 1.3.34

package/src/components/form/dropdown.tsx

@@ -7,7 +7,7 @@ import React, {
   useLayoutEffect,
 } from 'react'
 import { BoxRenderable, ScrollBoxRenderable } from '@opentui/core'
-import { useKeyboard } from '@opentui/react'
+import { useKeyboard, flushSync } from '@opentui/react'
 import {
   useFormContext,
   Controller,
@@ -17,12 +17,12 @@ import {
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
 import { logger } from 'termcast/src/logger'
-import { Theme } from 'termcast/src/theme'
+import { useTheme } from 'termcast/src/theme'
 import {
   createDescendants,
   DescendantContextType,
 } from 'termcast/src/descendants'
-import { WithLeftBorder } from './with-left-border'
+import { WithLeftBorder, TitleIndicator } from './with-left-border'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useFormNavigationHelpers } from './use-form-navigation'
 import { LoadingText } from 'termcast/src/components/loading-text'
@@ -103,6 +103,7 @@ const FormDropdownContext = createContext<FormDropdownContextValue>({
 })
 
 const DropdownItem = (props: DropdownItemProps) => {
+  const theme = useTheme()
   const context = useContext(FormDropdownContext)
   const sectionContext = useContext(SectionContext)
   const elementRef = useRef<BoxRenderable | null>(null)
@@ -138,32 +139,27 @@ const DropdownItem = (props: DropdownItemProps) => {
 
   return (
     <box ref={elementRef} key={props.value}>
-      <WithLeftBorder
-        isFocused={context.isFocused}
-        paddingLeft={0}
-        paddingBottom={0}
+      <text
+        fg={
+          context.isFocused && isFocused
+            ? theme.accent
+            : context.isFocused
+              ? theme.text
+              : theme.textMuted
+        }
+        onMouseDown={() => {
+          context.handleSelect(descendant.descendantId)
+        }}
       >
-        <text
-          fg={
-            context.isFocused && isFocused
-              ? Theme.accent
-              : context.isFocused
-                ? Theme.text
-                : Theme.textMuted
-          }
-          onMouseDown={() => {
-            context.handleSelect(descendant.descendantId)
-          }}
-        >
-          {context.isFocused && isFocused ? '› ' : '  '}
-          {isSelected ? '●' : '○'} {props.title}
-        </text>
-      </WithLeftBorder>
+        {context.isFocused && isFocused ? '› ' : '  '}
+        {isSelected ? '●' : '○'} {props.title}
+      </text>
     </box>
   )
 }
 
 const DropdownSection = (props: DropdownSectionProps) => {
+  const theme = useTheme()
   const parentContext = useContext(FormDropdownContext)
 
   // Create section context value
@@ -178,13 +174,7 @@ const DropdownSection = (props: DropdownSectionProps) => {
     <SectionContext.Provider value={sectionContextValue}>
       <box flexDirection='column'>
         {props.title && (
-          <WithLeftBorder
-            paddingTop={0}
-            paddingBottom={0}
-            isFocused={parentContext.isFocused}
-          >
-            <text fg={Theme.textMuted}>{props.title}</text>
-          </WithLeftBorder>
+          <text fg={theme.textMuted}>  {props.title}</text>
         )}
         {props.children}
       </box>
@@ -203,6 +193,7 @@ const DropdownContent = ({
   fieldState,
   ...props
 }: DropdownContentProps) => {
+  const theme = useTheme()
   const descendantsContext = useFormDropdownDescendants()
   const isInFocus = useIsInFocus()
   const focusContext = useFocusContext()
@@ -224,10 +215,6 @@ const DropdownContent = ({
 
   const [selectedTitles, setSelectedTitles] = useState<string[]>([])
 
-  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(
-    props.id,
-  )
-
   const scrollToItem = (item: { props?: FormDropdownItemDescendant }) => {
     const scrollBox = scrollBoxRef.current
     const itemElementRef = item.props?.elementRef
@@ -244,11 +231,11 @@ const DropdownContent = ({
     scrollBox.scrollTo(Math.max(0, targetScrollTop))
   }
 
-  // Helper to get value for a descendantId
+  // Helper to get value for a descendantId - use committedMap for stability
   const getValueForDescendantId = (
     descendantId: string,
   ): string | undefined => {
-    const item = descendantsContext.map.current[descendantId]
+    const item = descendantsContext.committedMap[descendantId]
     return item?.props?.value
   }
 
@@ -256,7 +243,7 @@ const DropdownContent = ({
     const value = getValueForDescendantId(descendantId)
     if (!value) return
 
-    const item = descendantsContext.map.current[descendantId]
+    const item = descendantsContext.committedMap[descendantId]
     const title = item?.props?.title || value
 
     if (props.hasMultipleSelection) {
@@ -290,7 +277,7 @@ const DropdownContent = ({
   useKeyboard((evt) => {
     if (!isFocused || !isInFocus) return
 
-    const items = Object.values(descendantsContext.map.current)
+    const items = Object.values(descendantsContext.committedMap)
       .filter((item) => item.index !== -1)
       .sort((a, b) => a.index - b.index)
     const itemCount = items.length
@@ -298,21 +285,29 @@ const DropdownContent = ({
     if (itemCount > 0) {
       if (evt.name === 'down') {
         const nextIndex = (focusedIndex + 1) % itemCount
-        setFocusedIndex(nextIndex)
         const nextItem = items[nextIndex]
         if (nextItem) {
+          flushSync(() => {
+            setFocusedIndex(nextIndex)
+          })
           scrollToItem(nextItem)
         }
       } else if (evt.name === 'up') {
         const nextIndex = (focusedIndex - 1 + itemCount) % itemCount
-        setFocusedIndex(nextIndex)
         const nextItem = items[nextIndex]
         if (nextItem) {
+          flushSync(() => {
+            setFocusedIndex(nextIndex)
+          })
           scrollToItem(nextItem)
         }
-      } else if (evt.name === 'return' || evt.name === 'space') {
-        // Toggle selection of current focused item
-        const entries = Object.entries(descendantsContext.map.current)
+      } else if (
+        (evt.name === 'return' || evt.name === 'space') &&
+        !evt.ctrl &&
+        !evt.meta
+      ) {
+        // Toggle selection of current focused item (but not when ctrl/meta is held for form submission)
+        const entries = Object.entries(descendantsContext.committedMap)
         const sortedEntries = entries
           .filter(([_, item]) => item.index !== -1)
           .sort((a, b) => a[1].index - b[1].index)
@@ -324,16 +319,6 @@ const DropdownContent = ({
       }
     }
 
-    // Handle tab navigation
-    if (evt.name === 'tab') {
-      if (evt.shift) {
-        navigateToPrevious()
-      } else {
-        navigateToNext()
-      }
-      return
-    }
-
     // Type-ahead search
     if (
       evt.name.length === 1 &&
@@ -358,7 +343,9 @@ const DropdownContent = ({
         })
 
       if (matchingItem) {
-        setFocusedIndex(matchingItem.index)
+        flushSync(() => {
+          setFocusedIndex(matchingItem.index)
+        })
         scrollToItem(matchingItem)
       }
 
@@ -370,9 +357,9 @@ const DropdownContent = ({
 
   // Initialize selected titles from field value only once when descendants are loaded
   useLayoutEffect(() => {
-    if (field.value && Object.keys(descendantsContext.map.current).length > 0) {
+    if (field.value && Object.keys(descendantsContext.committedMap).length > 0) {
       const titles: string[] = []
-      const entries = Object.entries(descendantsContext.map.current)
+      const entries = Object.entries(descendantsContext.committedMap)
 
       entries.forEach(([id, item]) => {
         if (item.props) {
@@ -410,23 +397,23 @@ const DropdownContent = ({
     <FormDropdownDescendantsProvider value={descendantsContext}>
       <FormDropdownContext.Provider value={contextValue}>
         <box ref={elementRef} flexDirection='column'>
-          <WithLeftBorder withDiamond isFocused={isFocused} isLoading={focusContext.isLoading}>
-            <box
-              onMouseDown={() => {
-                setFocusedField(props.id)
-              }}
-            >
-              <LoadingText
-                isLoading={isFocused && focusContext.isLoading}
-                color={isFocused ? Theme.primary : Theme.text}
+          <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
+            <TitleIndicator isFocused={isFocused} isLoading={focusContext.isLoading}>
+              <box
+                onMouseDown={() => {
+                  setFocusedField(props.id)
+                }}
               >
-                {props.title || ''}
-              </LoadingText>
-            </box>
-          </WithLeftBorder>
-          <WithLeftBorder isFocused={isFocused}>
+                <LoadingText
+                  isLoading={isFocused && focusContext.isLoading}
+                  color={isFocused ? theme.primary : theme.text}
+                >
+                  {props.title || ''}
+                </LoadingText>
+              </box>
+            </TitleIndicator>
             <text
-              fg={selectedTitles.length > 0 ? Theme.text : Theme.textMuted}
+              fg={selectedTitles.length > 0 ? theme.text : theme.textMuted}
               selectable={false}
               onMouseDown={() => {
                 setFocusedField(props.id)
@@ -436,40 +423,45 @@ const DropdownContent = ({
                 ? selectedTitles.join(', ')
                 : props.placeholder || 'Select...'}
             </text>
-          </WithLeftBorder>
-
-          <scrollbox
-            ref={scrollBoxRef}
-            maxHeight={5}
-            flexShrink={1}
-            style={{
-              rootOptions: {
-                flexShrink: 1,
-              },
-              viewportOptions: {
-                flexShrink: 1,
-              },
-              scrollbarOptions: {
-                visible: false,
-              },
-            }}
-          >
-            {props.children}
-          </scrollbox>
-          <WithLeftBorder children={<box />} isFocused={isFocused} />
-
-          {(fieldState.error || props.error) && (
-            <WithLeftBorder isFocused={isFocused}>
-              <text fg={Theme.error}>
+            {props.children && (
+              <>
+                <box height={1} />
+                <box marginLeft={-2}>
+                  <scrollbox
+                    ref={scrollBoxRef}
+                    maxHeight={5}
+                    flexShrink={1}
+                    style={{
+                      rootOptions: {
+                        flexShrink: 1,
+                      },
+                      viewportOptions: {
+                        flexShrink: 1,
+                      },
+                      contentOptions: {
+                        flexShrink: 0,
+                        minHeight: 0,
+                      },
+                      scrollbarOptions: {
+                        visible: false,
+                      },
+                    }}
+                  >
+                    {props.children}
+                  </scrollbox>
+                </box>
+                <box height={1} />
+              </>
+            )}
+            {(fieldState.error || props.error) && (
+              <text fg={theme.error}>
                 {fieldState.error?.message || props.error}
               </text>
-            </WithLeftBorder>
-          )}
-          {props.info && (
-            <WithLeftBorder isFocused={isFocused}>
-              <text fg={Theme.textMuted}>{props.info}</text>
-            </WithLeftBorder>
-          )}
+            )}
+            {props.info && (
+              <text fg={theme.textMuted}>{props.info}</text>
+            )}
+          </WithLeftBorder>
         </box>
       </FormDropdownContext.Provider>
     </FormDropdownDescendantsProvider>

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import { Theme } from 'termcast/src/theme'
+import { useTheme } from 'termcast/src/theme'
 import { searchFiles, parsePath } from '../../utils/file-system'
 import { useKeyboard } from '@opentui/react'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
@@ -50,6 +50,7 @@ export const FileAutocompleteDialog = ({
   canChooseDirectories = false,
   initialDirectory,
 }: FileAutocompleteDialogProps): any => {
+  const theme = useTheme()
   const [selectedIndex, setSelectedIndex] = useState(0)
   const isInFocus = useIsInFocus()
   
@@ -119,16 +120,16 @@ export const FileAutocompleteDialog = ({
   return (
     <box flexDirection='column' paddingLeft={1} paddingRight={1} overflow='hidden'>
       <box flexDirection='row'>
-        <text fg={Theme.textMuted} wrapMode='none'>Filter: </text>
-        <text fg={Theme.primary} wrapMode='none'>
+        <text fg={theme.textMuted} wrapMode='none'>Filter: </text>
+        <text fg={theme.primary} wrapMode='none'>
           {filter ? filter.replace(homedir, '~') : '(type to filter)'}
         </text>
       </box>
       <box height={1} />
       {isLoading ? (
-        <text fg={Theme.textMuted}>Loading files...</text>
+        <text fg={theme.textMuted}>Loading files...</text>
       ) : visibleFiles.length === 0 ? (
-        <text fg={Theme.textMuted}>No files found</text>
+        <text fg={theme.textMuted}>No files found</text>
       ) : (
         <>
           {visibleFiles.map((item, index) => {
@@ -136,8 +137,8 @@ export const FileAutocompleteDialog = ({
             return (
               <text
                 key={item.path}
-                fg={index === selectedIndex ? Theme.background : Theme.text}
-                bg={index === selectedIndex ? Theme.primary : Theme.backgroundPanel}
+                fg={index === selectedIndex ? theme.background : theme.text}
+                bg={index === selectedIndex ? theme.primary : theme.backgroundPanel}
                 wrapMode='none'
               >
                 {' '}{icon}{item.name}{item.isDirectory ? '/' : ''}
@@ -147,7 +148,7 @@ export const FileAutocompleteDialog = ({
         </>
       )}
       <box height={1} />
-      <text fg={Theme.textMuted} wrapMode='none'>{hintText}</text>
+      <text fg={theme.textMuted} wrapMode='none'>{hintText}</text>
     </box>
   )
 }

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

@@ -1,7 +1,7 @@
-import React, { useRef } from 'react'
-import { Theme } from 'termcast/src/theme'
+import React, { useRef, useCallback } from 'react'
+import { useTheme } from 'termcast/src/theme'
 import { BoxRenderable, TextareaRenderable } from '@opentui/core'
-import { WithLeftBorder } from './with-left-border'
+import { WithLeftBorder, TitleIndicator } from './with-left-border'
 import { FormItemProps, FormItemRef } from './types'
 import { useFormContext, Controller } from 'react-hook-form'
 import { useFocusContext, useFormFieldDescendant } from './index'
@@ -11,6 +11,7 @@ import { FileAutocompleteDialog, createFileAutocompleteStore } from './file-auto
 import { useFormNavigationHelpers } from './use-form-navigation'
 import { useDialog } from 'termcast/src/internal/dialog'
 import { LoadingText } from 'termcast/src/components/loading-text'
+import { useStore } from 'termcast/src/state'
 
 export interface FilePickerProps extends FormItemProps<string[]> {
   /**
@@ -64,8 +65,26 @@ const FilePickerField = ({
   setFocusedField: (id: string) => void
   isFormLoading: boolean
 }): any => {
+  const theme = useTheme()
   const isInFocus = useIsInFocus()
   const inputRef = React.useRef<TextareaRenderable>(null)
+
+  // Ref callback that registers the textarea in global state for ESC handling
+  const setInputRef = useCallback((node: TextareaRenderable | null) => {
+    if (!node) return
+
+    inputRef.current = node
+    useStore.setState({ activeSearchInputRef: node })
+
+    // React 19: return cleanup function for unmount
+    return () => {
+      if (useStore.getState().activeSearchInputRef === node) {
+        useStore.setState({ activeSearchInputRef: null })
+      }
+      inputRef.current = null
+    }
+  }, [])
+
   const dialog = useDialog()
 
   // Create store once for sharing state with dialog
@@ -150,24 +169,24 @@ const FilePickerField = ({
 
   return (
     <box flexDirection='column'>
-      <WithLeftBorder withDiamond isFocused={isFocused} isLoading={isFormLoading}>
-        <box
-          onMouseDown={() => {
-            setFocusedField(props.id)
-          }}
-        >
-          <LoadingText
-            isLoading={isFocused && isFormLoading}
-            color={isFocused ? Theme.primary : Theme.text}
+      <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
+        <TitleIndicator isFocused={isFocused} isLoading={isFormLoading}>
+          <box
+            onMouseDown={() => {
+              setFocusedField(props.id)
+            }}
           >
-            {props.title || 'File Path'}
-          </LoadingText>
-        </box>
-      </WithLeftBorder>
-      <WithLeftBorder isFocused={isFocused}>
+            <LoadingText
+              isLoading={isFocused && isFormLoading}
+              color={isFocused ? theme.primary : theme.text}
+            >
+              {props.title || 'File Path'}
+            </LoadingText>
+          </box>
+        </TitleIndicator>
         <box flexDirection='column'>
           <textarea
-            ref={inputRef}
+            ref={setInputRef}
             height={1}
             wrapMode='none'
             keyBindings={[
@@ -189,28 +208,24 @@ const FilePickerField = ({
           />
           {selectedFiles.length > 0 && (
             <box flexDirection='column' marginTop={1}>
-              <text fg={Theme.textMuted}>Selected files:</text>
+              <text fg={theme.textMuted}>Selected files:</text>
               {selectedFiles.map((file: string, index: number) => (
-                <text key={index} fg={Theme.text}>
+                <text key={index} fg={theme.text}>
                   • {file}
                 </text>
               ))}
             </box>
           )}
         </box>
-      </WithLeftBorder>
-      {(fieldState.error || props.error) && (
-        <WithLeftBorder isFocused={isFocused}>
-          <text fg={Theme.error}>
+        {(fieldState.error || props.error) && (
+          <text fg={theme.error}>
             {fieldState.error?.message || props.error}
           </text>
-        </WithLeftBorder>
-      )}
-      {props.info && (
-        <WithLeftBorder isFocused={isFocused}>
-          <text fg={Theme.textMuted}>{props.info}</text>
-        </WithLeftBorder>
-      )}
+        )}
+        {props.info && (
+          <text fg={theme.textMuted}>{props.info}</text>
+        )}
+      </WithLeftBorder>
     </box>
   ) as React.ReactElement
 }
@@ -230,21 +245,6 @@ export const FilePicker = (props: FilePickerProps): any => {
     elementRef: elementRef.current,
   })
 
-  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(props.id)
-
-  // Handle keyboard navigation
-  useKeyboard((evt) => {
-    if (!isFocused || !isInFocus) return
-
-    if (evt.name === 'tab') {
-      if (evt.shift) {
-        navigateToPrevious()
-      } else {
-        navigateToNext()
-      }
-    }
-  })
-
   return (
     <Controller
       name={props.id}

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

@@ -1,8 +1,9 @@
 import React, { useState, useLayoutEffect } from 'react'
-import { Theme } from 'termcast/src/theme'
+import { useTheme } from 'termcast/src/theme'
 import { useFocusContext, useFormScrollContext } from './index'
 
 export const FormEnd = (): any => {
+  const theme = useTheme()
   const { focusedField } = useFocusContext()
   const scrollContext = useFormScrollContext()
   const [isLastFieldFocused, setIsLastFieldFocused] = useState(false)
@@ -12,7 +13,8 @@ export const FormEnd = (): any => {
       setIsLastFieldFocused(false)
       return
     }
-    const descendants = Object.values(scrollContext.descendantsContext.map.current)
+    // Use committedMap for stability
+    const descendants = Object.values(scrollContext.descendantsContext.committedMap)
       .filter((item) => item.index !== -1 && item.props?.id)
       .sort((a, b) => a.index - b.index)
     if (descendants.length === 0) {
@@ -21,7 +23,7 @@ export const FormEnd = (): any => {
     }
     const lastField = descendants[descendants.length - 1]
     setIsLastFieldFocused(lastField.props?.id === focusedField)
-  }, [focusedField])
+  }, [focusedField, scrollContext?.descendantsContext.committedMap])
 
-  return <text fg={isLastFieldFocused ? Theme.accent : Theme.text}>└</text>
+  return <text fg={isLastFieldFocused ? theme.accent : theme.text}>└</text>
 }