termcast 1.3.32 → 1.3.34

package/src/components/form/index.tsx

@@ -6,13 +6,14 @@ import React, {
   useRef,
   useEffect,
 } from 'react'
-import { useKeyboard } from '@opentui/react'
+import { useKeyboard, flushSync } from '@opentui/react'
 import { useForm, FormProvider } from 'react-hook-form'
 import { ActionPanel } from 'termcast/src/components/actions'
 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 { Offscreen } from 'termcast/src/internal/offscreen'
+import { useTheme } from 'termcast/src/theme'
 import { useStore } from 'termcast/src/state'
 import { Footer } from 'termcast/src/components/footer'
 import {
@@ -103,27 +104,28 @@ export const useFormSubmit = () => {
 }
 
 function FormFooter(): any {
+  const theme = useTheme()
   const hasToast = useStore((s) => s.toast !== null)
 
   const content = hasToast ? null : (
     <box style={{ flexDirection: 'row', gap: 3 }}>
       <box style={{ flexDirection: 'row', gap: 1 }}>
-        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           ctrl ↵
         </text>
-        <text flexShrink={0} fg={Theme.textMuted}>submit</text>
+        <text flexShrink={0} fg={theme.textMuted}>submit</text>
       </box>
       <box style={{ flexDirection: 'row', gap: 1 }}>
-        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           tab
         </text>
-        <text flexShrink={0} fg={Theme.textMuted}>navigate</text>
+        <text flexShrink={0} fg={theme.textMuted}>navigate</text>
       </box>
       <box style={{ flexDirection: 'row', gap: 1 }}>
-        <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+        <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           ^k
         </text>
-        <text flexShrink={0} fg={Theme.textMuted}>actions</text>
+        <text flexShrink={0} fg={theme.textMuted}>actions</text>
       </box>
     </box>
   )
@@ -197,20 +199,12 @@ export const Form: FormType = ((props) => {
   const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
   const descendantsContext = useFormFieldDescendants()
 
-  // Helper to get sorted field IDs
-  const getFieldIds = () => {
-    return Object.values(descendantsContext.map.current)
-      .filter((item) => item.index !== -1 && item.props?.id)
-      .sort((a, b) => a.index - b.index)
-      .map((item) => item.props!.id)
-  }
-
   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(
+    // Find field in committedMap by matching props.id
+    const field = Object.values(descendantsContext.committedMap).find(
       (item) => item.props?.id === fieldId,
     )
     const elementRef = field?.props?.elementRef
@@ -228,12 +222,22 @@ export const Form: FormType = ((props) => {
   }
 
   const setFocusedField = (id: string | null) => {
-    setFocusedFieldRaw(id)
+    flushSync(() => {
+      setFocusedFieldRaw(id)
+    })
     if (id) {
       scrollToField(id)
     }
   }
 
+  // Helper to get sorted field IDs - uses committedMap for stability
+  const getFieldIds = () => {
+    return Object.values(descendantsContext.committedMap)
+      .filter((item) => item.index !== -1 && item.props?.id)
+      .sort((a, b) => a.index - b.index)
+      .map((item) => item.props!.id)
+  }
+
   // Focus first field helper
   const focusFirstField = () => {
     const fieldIds = getFieldIds()
@@ -257,16 +261,15 @@ export const Form: FormType = ((props) => {
   }
 
   // Auto-focus first field when descendants become available
-  // Runs on every render until a field is focused (handles async loading)
   useEffect(() => {
     if (focusedField) return
 
     const fieldIds = getFieldIds()
     if (fieldIds.length > 0) {
       logger.log(`auto-focusing first field:`, fieldIds[0])
-      setFocusedFieldRaw(fieldIds[0])
+      setFocusedField(fieldIds[0])
     }
-  })
+  }, [descendantsContext.committedMap])
 
   // Get focus state and dialog
   const inFocus = useIsInFocus()
@@ -328,31 +331,15 @@ export const Form: FormType = ((props) => {
     }
 
     if (evt.name === 'k' && evt.ctrl) {
-      // Ctrl+K shows actions (always show panel, even without actions)
-      dialog.pushActions(
-        <FormSubmitContext.Provider value={submitContextValue}>
-          {props.actions || <ActionPanel />}
-        </FormSubmitContext.Provider>,
-        'center',
-      )
-    } else if (evt.name === 'return' && evt.ctrl && props.actions) {
-      // Ctrl+Return executes first action directly
-      useStore.setState({ shouldAutoExecuteFirstAction: true })
-      dialog.pushActions(
-        <FormSubmitContext.Provider value={submitContextValue}>
-          {props.actions}
-        </FormSubmitContext.Provider>,
-        'center',
-      )
-    } else if (evt.name === 'return' && evt.meta && props.actions) {
-      // Cmd+Return also executes first action directly
-      useStore.setState({ shouldAutoExecuteFirstAction: true })
-      dialog.pushActions(
-        <FormSubmitContext.Provider value={submitContextValue}>
-          {props.actions}
-        </FormSubmitContext.Provider>,
-        'center',
-      )
+      // Ctrl+K shows actions dialog via portal
+      if (props.actions) {
+        useStore.setState({ showActionsDialog: true })
+      }
+    } else if ((evt.name === 'return' && evt.ctrl) || (evt.name === 'return' && evt.meta)) {
+      // Ctrl+Return or Cmd+Return auto-executes first action via ActionPanel
+      if (props.actions) {
+        useStore.setState({ shouldAutoExecuteFirstAction: true })
+      }
     }
   })
 
@@ -426,6 +413,8 @@ export const Form: FormType = ((props) => {
                   </box>
                 </ScrollBox>
                 <FormFooter />
+                {/* Render actions offscreen to capture them with FormSubmitContext */}
+                {props.actions && <Offscreen>{props.actions}</Offscreen>}
               </box>
             </box>
           </FocusContext.Provider>
@@ -461,6 +450,7 @@ Form.Description = Description
 
 // LinkAccessory component - shows a link in the navigation bar
 function LinkAccessory(props: LinkAccessoryProps): any {
+  const theme = useTheme()
   return (
     <box
       style={{
@@ -471,7 +461,7 @@ function LinkAccessory(props: LinkAccessoryProps): any {
       }}
     >
       <text
-        fg={Theme.textMuted}
+        fg={theme.textMuted}
         attributes={TextAttributes.UNDERLINE}
         wrapMode='none'
       >

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

@@ -3,8 +3,8 @@ import { BoxRenderable } from '@opentui/core'
 import { useFormContext, Controller } from 'react-hook-form'
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
-import { Theme } from 'termcast/src/theme'
-import { WithLeftBorder } from './with-left-border'
+import { useTheme } from 'termcast/src/theme'
+import { WithLeftBorder, TitleIndicator } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
 import { LoadingText } from 'termcast/src/components/loading-text'
 
@@ -15,6 +15,7 @@ export interface PasswordFieldProps extends FormItemProps<string> {
 export type PasswordFieldRef = FormItemRef
 
 export const PasswordField = (props: PasswordFieldProps): any => {
+  const theme = useTheme()
   const { control } = useFormContext()
   const focusContext = useFocusContext()
   const { focusedField, setFocusedField } = focusContext
@@ -40,21 +41,21 @@ export const PasswordField = (props: PasswordFieldProps): any => {
 
         return (
           <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>
               <input
                 value={displayValue}
                 onInput={(newDisplay: string) => {
@@ -85,19 +86,16 @@ export const PasswordField = (props: PasswordFieldProps): any => {
                   setFocusedField(props.id)
                 }}
               />
-            </WithLeftBorder>
-            {(fieldState.error || props.error) && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.error}>
+              {(fieldState.error || props.error || props.info) && <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>
         ) as React.ReactElement
       }}

package/src/components/form/separator.tsx

@@ -1,13 +1,14 @@
 import React from 'react'
-import { Theme } from 'termcast/src/theme'
+import { useTheme } from 'termcast/src/theme'
 import { WithLeftBorder } from './with-left-border'
 
 export const Separator = (): any => {
+  const theme = useTheme()
   return null
   return (
     <>
       <WithLeftBorder withDiamond isFocused={false}>
-        <text fg={Theme.border}>{''.repeat(40)}</text>
+        <text fg={theme.border}>{''.repeat(40)}</text>
       </WithLeftBorder>
       |
     </>

package/src/components/form/tagpicker.tsx

@@ -6,6 +6,7 @@ import {
   RefAttributes,
 } from 'react'
 import { Image } from 'termcast/src/components/list'
+import { getIconValue } from 'termcast/src/components/icon'
 import { Dropdown, DropdownProps, DropdownItemProps } from './dropdown'
 
 /**
@@ -158,7 +159,7 @@ const TagPickerItem: FunctionComponent<TagPickerItemProps> = (props): any => {
     <Dropdown.Item
       value={props.value}
       title={props.title || props.value}
-      icon={props.icon as string | undefined}
+      icon={getIconValue(props.icon) || undefined}
     />
   )
 }

package/src/components/form/text-area.tsx

@@ -3,8 +3,8 @@ import { BoxRenderable, TextareaRenderable } from '@opentui/core'
 import { useFormContext } from 'react-hook-form'
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
-import { Theme } from 'termcast/src/theme'
-import { WithLeftBorder } from './with-left-border'
+import { useTheme } from 'termcast/src/theme'
+import { WithLeftBorder, TitleIndicator } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
 import { createTextareaFormRef } from './form-ref'
 import { LoadingText } from 'termcast/src/components/loading-text'
@@ -17,6 +17,7 @@ export interface TextAreaProps extends FormItemProps<string> {
 export type TextAreaRef = FormItemRef
 
 export const TextArea = (props: TextAreaProps): any => {
+  const theme = useTheme()
   const { register, formState } = useFormContext()
   const focusContext = useFocusContext()
   const { focusedField, setFocusedField } = focusContext
@@ -60,23 +61,22 @@ export const TextArea = (props: TextAreaProps): any => {
 
   return (
     <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}>
-        <box flexGrow={1}>
+            <LoadingText
+              isLoading={isFocused && focusContext.isLoading}
+              color={isFocused ? theme.primary : theme.text}
+            >
+              {props.title || ''}
+            </LoadingText>
+          </box>
+        </TitleIndicator>
+        <box flexGrow={1} paddingBottom={1}>
           <textarea
             ref={handleRef}
             wrapMode='none'
@@ -90,20 +90,15 @@ export const TextArea = (props: TextAreaProps): any => {
             }}
           />
         </box>
-      </WithLeftBorder>
-
-      {(fieldError || props.error) && (
-        <WithLeftBorder isFocused={isFocused}>
-          <text fg={Theme.error}>
+        {(fieldError || props.error) && (
+          <text fg={theme.error}>
             {(fieldError?.message as string) || 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>
   )
 }

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

@@ -3,8 +3,8 @@ import { BoxRenderable, TextareaRenderable } from '@opentui/core'
 import { useFormContext } from 'react-hook-form'
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
-import { Theme } from 'termcast/src/theme'
-import { WithLeftBorder } from './with-left-border'
+import { useTheme } from 'termcast/src/theme'
+import { WithLeftBorder, TitleIndicator } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
 import { createTextareaFormRef } from './form-ref'
 import { LoadingText } from 'termcast/src/components/loading-text'
@@ -16,6 +16,7 @@ export interface TextFieldProps extends FormItemProps<string> {
 export type TextFieldRef = FormItemRef
 
 export const TextField = (props: TextFieldProps): any => {
+  const theme = useTheme()
   const { register, formState } = useFormContext()
   const focusContext = useFocusContext()
   const { focusedField, setFocusedField } = focusContext
@@ -61,21 +62,21 @@ export const TextField = (props: TextFieldProps): any => {
 
   return (
     <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>
         <textarea
           ref={handleRef}
           height={1}
@@ -92,19 +93,16 @@ export const TextField = (props: TextFieldProps): any => {
             setFocusedField(props.id)
           }}
         />
-      </WithLeftBorder>
-      {(fieldError || props.error) && (
-        <WithLeftBorder isFocused={isFocused}>
-          <text fg={Theme.error}>
+        {(fieldError || props.error || props.info) && <box height={1} />}
+        {(fieldError || props.error) && (
+          <text fg={theme.error}>
             {(fieldError?.message as string) || 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>
   )
 }

package/src/components/form/use-form-navigation.tsx

@@ -7,10 +7,10 @@ export function useFormNavigationHelpers(id: string) {
   const scrollContext = useFormScrollContext()
   const { setFocusedField } = useFocusContext()
 
-  // Get sorted field IDs from descendants
+  // Get sorted field IDs from descendants - use committedMap for stability
   const getFieldIds = () => {
     if (!scrollContext) return []
-    const descendants = Object.values(scrollContext.descendantsContext.map.current)
+    const descendants = Object.values(scrollContext.descendantsContext.committedMap)
       .filter((item) => item.index !== -1 && item.props?.id)
       .sort((a, b) => a.index - b.index)
     return descendants.map((item) => item.props!.id)
@@ -53,9 +53,8 @@ export function useFormNavigation(
   const isInFocus = useIsInFocus()
   const isFocused = focusedField === id
 
-  let { handleArrows = true, handleTabs = true } = options || {}
-
-  handleArrows = false
+  // handleTabs defaults to false to avoid conflict with global Form handler
+  let { handleArrows = true, handleTabs = false } = options || {}
 
   const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(id)
 

package/src/components/form/with-left-border.tsx

@@ -1,17 +1,16 @@
 import React from 'react'
-import { Theme } from 'termcast/src/theme'
+import { useTheme } from 'termcast/src/theme'
 import { colord } from 'colord'
 import { useAnimationTick, TICK_DIVISORS } from 'termcast/src/components/animation-tick'
 
-const spinnerFrames = [
-  { char: ' ', color: Theme.accent },
-  { char: '·', color: Theme.accent },
-  { char: '•', color: colord(Theme.accent).lighten(0.1).toHex() },
-  // { char: '●', color: colord(Theme.accent).lighten(0.2).toHex() },
-]
-
 function Spinner(): any {
+  const theme = useTheme()
   const tick = useAnimationTick(TICK_DIVISORS.SPINNER)
+  const spinnerFrames = [
+    { char: ' ', color: theme.accent },
+    { char: '·', color: theme.accent },
+    { char: '•', color: colord(theme.accent).lighten(0.1).toHex() },
+  ]
   const frame = spinnerFrames[tick % spinnerFrames.length]
   return (
     <text flexShrink={0} fg={frame.color}>
@@ -20,6 +19,44 @@ function Spinner(): any {
   )
 }
 
+interface TitleIndicatorProps {
+  isFocused: boolean
+  isLoading?: boolean
+  customCharacter?: { focused: string; unfocused: string }
+  children: React.ReactNode
+}
+
+/**
+ * TitleIndicator renders a title row with a diamond/custom indicator that
+ * uses negative margin to overlay the left border character.
+ * Must be used inside a WithLeftBorder component.
+ */
+export const TitleIndicator = ({
+  isFocused,
+  isLoading,
+  customCharacter,
+  children,
+}: TitleIndicatorProps): any => {
+  const theme = useTheme()
+  const chars = customCharacter || { focused: '◆', unfocused: '◇' }
+  const color = isFocused ? theme.accent : theme.text
+
+  return (
+    <box flexDirection='row' marginLeft={-3}>
+      {isFocused && isLoading ? (
+        <Spinner />
+      ) : (
+        <text flexShrink={0} fg={color}>
+          <b>{isFocused ? chars.focused : chars.unfocused}</b>
+        </text>
+      )}
+      <box flexShrink={0} flexGrow={1} paddingLeft={2}>
+        {children}
+      </box>
+    </box>
+  )
+}
+
 interface WithLeftBorderProps {
   children: React.ReactNode
   withDiamond?: boolean
@@ -42,9 +79,10 @@ export const WithLeftBorder = ({
   paddingLeft = 2,
   paddingTop = 0,
 }: WithLeftBorderProps): any => {
+  const theme = useTheme()
   if (withDiamond || customCharacter) {
     const chars = customCharacter || { focused: '◆', unfocused: '◇' }
-    const color = isFocused ? Theme.accent : Theme.text
+    const color = isFocused ? theme.accent : theme.text
     return (
       <box flexDirection='row'>
         {isFocused && isLoading ? (
@@ -65,7 +103,7 @@ export const WithLeftBorder = ({
       paddingLeft={paddingLeft}
       border={['left']}
       // borderStyle={isFocused ? 'heavy' : 'single'}
-      borderColor={isFocused ? Theme.accent : Theme.text}
+      borderColor={isFocused ? theme.accent : theme.text}
       flexShrink={0}
       flexDirection='row'
     >

package/src/components/icon.tsx

@@ -529,6 +529,75 @@ export function getIconEmoji(icon: string): string {
   return icon
 }
 
+/**
+ * Extract icon string from any icon format.
+ * Handles all Raycast icon formats:
+ * - string: direct icon name or emoji
+ * - { source: string }: image with source
+ * - { source: string, tintColor?: string }: image with tint
+ * - { source: { light, dark } }: theme-aware source
+ * - { value: ImageLike, tooltip: string }: icon with tooltip
+ * - { light: string, dark: string }: theme-aware icon directly
+ * - { fileIcon: string }: file icon
+ *
+ * Returns empty string for unhandled formats (never [object Object])
+ */
+export function getIconValue(icon: unknown): string {
+  if (!icon) {
+    return ''
+  }
+
+  if (typeof icon === 'string') {
+    return getIconEmoji(icon)
+  }
+
+  if (typeof icon !== 'object') {
+    return ''
+  }
+
+  const obj = icon as Record<string, unknown>
+
+  // Handle { value: ..., tooltip: ... } format
+  if ('value' in obj && obj.value) {
+    return getIconValue(obj.value)
+  }
+
+  // Handle { source: ... } format
+  if ('source' in obj) {
+    const source = obj.source
+    if (typeof source === 'string') {
+      return getIconEmoji(source)
+    }
+    // Handle { source: { light, dark } }
+    if (typeof source === 'object' && source !== null) {
+      const sourceObj = source as Record<string, unknown>
+      if ('light' in sourceObj && typeof sourceObj.light === 'string') {
+        return getIconEmoji(sourceObj.light)
+      }
+      if ('dark' in sourceObj && typeof sourceObj.dark === 'string') {
+        return getIconEmoji(sourceObj.dark)
+      }
+    }
+    return ''
+  }
+
+  // Handle { light, dark } directly on icon
+  if ('light' in obj && typeof obj.light === 'string') {
+    return getIconEmoji(obj.light)
+  }
+  if ('dark' in obj && typeof obj.dark === 'string') {
+    return getIconEmoji(obj.dark)
+  }
+
+  // Handle { fileIcon: string }
+  if ('fileIcon' in obj && typeof obj.fileIcon === 'string') {
+    return '📁'
+  }
+
+  // Unknown format - return empty string instead of [object Object]
+  return ''
+}
+
 interface IconProps {
   source: string
   tintColor?: string