termcast 1.3.19 → 1.3.24

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

@@ -1,12 +1,41 @@
 import React from 'react'
 import { TextAttributes } from '@opentui/core'
 import { Theme } from 'termcast/src/theme'
+import { colord } from 'colord'
+
+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 [index, setIndex] = React.useState(0)
+
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((i) => (i + 1) % spinnerFrames.length)
+    }, 200)
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+  const frame = spinnerFrames[index]
+  return (
+    <text flexShrink={0} fg={frame.color}>
+      <b>{frame.char}</b>
+    </text>
+  )
+}
 
 interface WithLeftBorderProps {
   children: React.ReactNode
   withDiamond?: boolean
   customCharacter?: { focused: string; unfocused: string }
   isFocused: boolean
+  isLoading?: boolean
   paddingBottom?: number
   paddingLeft?: number
   paddingTop?: number
@@ -18,21 +47,24 @@ export const WithLeftBorder = ({
   withDiamond,
   customCharacter,
   isFocused,
+  isLoading,
   paddingBottom = 1,
   paddingLeft = 2,
   paddingTop = 0,
 }: WithLeftBorderProps): any => {
   if (withDiamond || customCharacter) {
     const chars = customCharacter || { focused: '◆', unfocused: '◇' }
+    const color = isFocused ? Theme.accent : Theme.text
     return (
       <box flexDirection='row'>
-        <text
-          key={String(isFocused)}
-          fg={isFocused ? Theme.accent : Theme.text}
-        >
-          <b>{isFocused ? chars.focused : chars.unfocused}</b>
-        </text>
-        <box flexGrow={1} paddingLeft={paddingLeft}>
+        {isFocused && isLoading ? (
+          <Spinner />
+        ) : (
+          <text key={String(isFocused)} flexShrink={0} fg={color}>
+            <b>{isFocused ? chars.focused : chars.unfocused}</b>
+          </text>
+        )}
+        <box flexShrink={0} flexGrow={1} paddingLeft={paddingLeft}>
           {children}
         </box>
       </box>
@@ -42,8 +74,9 @@ export const WithLeftBorder = ({
     <box
       paddingLeft={paddingLeft}
       border={['left']}
-      borderStyle={isFocused ? 'heavy' : 'single'}
+      // borderStyle={isFocused ? 'heavy' : 'single'}
       borderColor={isFocused ? Theme.accent : undefined}
+      flexShrink={0}
       flexDirection='row'
     >
       <box paddingTop={paddingTop} paddingBottom={paddingBottom} flexGrow={1}>

package/src/components/icon.tsx

@@ -6,11 +6,11 @@ const ICON_SHAPES = [
   '◆', // filled diamond
   '▲', // filled triangle up
   '▼', // filled triangle down
-  '★', // filled star
-  '♦', // diamond suit
-  '♥', // heart suit
-  '♠', // spade suit
-  '♣', // club suit
+  // '★', // filled star
+  // '♦', // diamond suit
+  // '♥', // heart suit
+  // '♠', // spade suit
+  // '♣', // club suit
 ]
 
 function hashString(str: string): number {
@@ -505,13 +505,28 @@ function createIconEnum(): Record<string, string> {
   return icons
 }
 
-export const Icon = createIconEnum()
+function createIconWithUnicode(): Record<string, string> {
+  const icons: Record<string, string> = {}
+
+  for (const iconId of iconIds) {
+    const name = iconId.replace(/-16$/, '')
+    const pascalName = pascalCase(name)
+    icons[pascalName] = getIconShape(iconId)
+  }
+
+  return icons
+}
+
+export const IconSource = createIconEnum()
+export const Icon = createIconWithUnicode()
 
 export function getIconEmoji(icon: string): string {
+  // If it's an icon ID (like 'pencil-16'), convert to unicode
   if (iconIds.includes(icon)) {
     return getIconShape(icon)
   }
-  return '?'
+  // Otherwise assume it's already unicode and return as-is
+  return icon
 }
 
 interface IconProps {
@@ -520,5 +535,9 @@ interface IconProps {
 }
 
 export function IconComponent({ source }: IconProps): any {
-  return getIconEmoji(source)
+  // If it's an icon ID, convert to unicode; otherwise return as-is
+  if (iconIds.includes(source)) {
+    return getIconShape(source)
+  }
+  return source
 }

package/src/components/list.tsx

@@ -18,9 +18,11 @@ import React, {
 } from 'react'
 import { LoadingBar } from 'termcast/src/components/loading-bar'
 import { createDescendants } from 'termcast/src/descendants'
+import { useStore } from 'termcast/src/state'
 import { useDialog } from 'termcast/src/internal/dialog'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useNavigationPending } from 'termcast/src/internal/navigation'
+import { Offscreen } from 'termcast/src/internal/offscreen'
 import { ScrollBox } from 'termcast/src/internal/scrollbox'
 
 import { Color, resolveColor } from 'termcast/src/colors'
@@ -67,6 +69,8 @@ interface ActionsInterface {
 }
 
 function ListFooter(): any {
+  const firstActionTitle = useStore((s) => s.firstActionTitle)
+
   return (
     <box
       border={false}
@@ -79,10 +83,14 @@ function ListFooter(): any {
         flexDirection: 'row',
       }}
     >
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        ↵
-      </text>
-      <text fg={Theme.textMuted}> select</text>
+      {firstActionTitle && (
+        <>
+          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+            ↵
+          </text>
+          <text fg={Theme.textMuted}> {firstActionTitle.toLowerCase()}</text>
+        </>
+      )}
       <text fg={Theme.text} attributes={TextAttributes.BOLD}>
         {'  '}↑↓
       </text>
@@ -175,13 +183,13 @@ export interface ItemProps extends ActionsInterface, CommonProps {
         tooltip: string
       }
   accessories?: ItemAccessory[]
-  detail?: ReactElement<DetailProps>
+  detail?: ReactNode
 }
 
 export interface DetailProps extends CommonProps {
   isLoading?: boolean
   markdown?: string
-  metadata?: ReactElement<MetadataProps> | null
+  metadata?: ReactNode
 }
 
 export interface MetadataProps extends CommonProps {
@@ -380,7 +388,14 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
   // Wrapper function that updates search text
   const setSearchText = (value: string) => {
     setSearchTextRaw(value)
-    setSelectedIndex(0) // Reset selection when search changes
+    // TODO: use flushSync when available to force descendants to update visibility
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item) => item.index !== -1 && item.props?.visible !== false)
+      .sort((a, b) => a.index - b.index)
+
+    if (items.length > 0 && items[0]) {
+      setSelectedIndex(items[0].index)
+    }
   }
 
 
@@ -456,6 +471,7 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
               <textarea
                 ref={inputRef}
                 height={1}
+                wrapMode='none'
                 keyBindings={[
                   { name: 'return', action: 'submit' },
                   { name: 'linefeed', action: 'submit' },
@@ -670,7 +686,7 @@ export const List: ListType = (props) => {
   const {
     children,
     onSelectionChange,
-    filtering = true,
+    filtering,
     searchText: controlledSearchText,
     onSearchTextChange,
     searchBarPlaceholder = 'Search...',
@@ -686,6 +702,7 @@ export const List: ListType = (props) => {
   const [selectedIndex, setSelectedIndex] = useState(0)
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
   const [currentDetail, setCurrentDetail] = useState<ReactNode>(null)
+  const [currentItemActions, setCurrentItemActions] = useState<ReactNode>(null)
   const inputRef = useRef<TextareaRenderable>(null)
   const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
   const descendantsContext = useListDescendants()
@@ -700,23 +717,35 @@ export const List: ListType = (props) => {
   useLayoutEffect(() => {
     if (controlledSearchText === undefined) return
     const textarea = inputRef.current
-    if (textarea && textarea.plainText !== controlledSearchText) {
-      textarea.setText(controlledSearchText)
-    }
+    if (!textarea) return
+
+    // Skip if textarea already has the correct value
+    if (textarea.plainText === controlledSearchText) return
+
+    // Save cursor position, set text, then restore cursor (clamped to valid range)
+    const cursorOffset = textarea.cursorOffset
+    textarea.setText(controlledSearchText)
+    textarea.cursorOffset = Math.min(cursorOffset, controlledSearchText.length)
   }, [controlledSearchText])
 
-  // Determine if filtering is enabled
-  // List filters automatically when:
-  // - filtering is not specified (defaults to true) OR filtering is explicitly true
-  // List does NOT filter automatically when:
-  // - When filtering={false}
-  // - When onSearchTextChange is provided (implicitly sets filtering to false)
-  // - Unless you explicitly set filtering={true} alongside onSearchTextChange
+  // Filtering logic (matches Raycast behavior):
+  //
+  // | filtering prop | onSearchTextChange | Result          |
+  // |----------------|-------------------|-----------------|
+  // | undefined      | undefined         | true (default)  |
+  // | undefined      | provided          | false           |
+  // | true           | undefined         | true            |
+  // | true           | provided          | true            |
+  // | false          | undefined         | false           |
+  // | false          | provided          | false           |
+  //
+  // Summary: filtering defaults to true, but is implicitly disabled when
+  // onSearchTextChange is provided (user manages filtering). Set filtering={true}
+  // explicitly to use built-in filtering alongside onSearchTextChange.
   const isFilteringEnabled = (() => {
     if (filtering === false) return false
     if (filtering === true) return true
-    // filtering is undefined/not specified
-    return !onSearchTextChange // defaults to true unless onSearchTextChange is provided
+    return !onSearchTextChange
   })()
 
   const openDropdown = () => {
@@ -726,8 +755,15 @@ export const List: ListType = (props) => {
   // Wrapper function that updates search text
   const setInternalSearchText = (value: string) => {
     setInternalSearchTextRaw(value)
-    // Reset to 0 when search changes - this is expected UX behavior
-    setSelectedIndex(0)
+    // TODO: use flushSync when available to force descendants to update visibility
+    // before querying. For now, we compute visibility inline with the new search value.
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item) => item.index !== -1 && item.props?.visible !== false)
+      .sort((a, b) => a.index - b.index)
+
+    if (items.length > 0 && items[0]) {
+      setSelectedIndex(items[0].index)
+    }
   }
 
   const listContextValue = useMemo<ListContextValue>(
@@ -758,27 +794,37 @@ export const List: ListType = (props) => {
     if (selectedItemId !== undefined) {
       const items = Object.values(descendantsContext.map.current)
         .filter((item) => item.index !== -1)
-        .sort((a, b) => a.index - b.index)
 
-      const index = items.findIndex((item) => item.props?.id === selectedItemId)
-      if (index !== -1) {
-        setSelectedIndex(index)
+      const foundItem = items.find((item) => item.props?.id === selectedItemId)
+      if (foundItem) {
+        setSelectedIndex(foundItem.index)
       }
     }
   }, [selectedItemId])
 
-  // Call onSelectionChange when selection changes
+  // Call onSelectionChange when selection changes and track current item's actions
   useEffect(() => {
-    if (!onSelectionChange) return
-
     const items = Object.values(descendantsContext.map.current)
       .filter((item) => item.index !== -1)
       .sort((a, b) => a.index - b.index)
 
     const currentItem = items.find((item) => item.index === selectedIndex)
-    const selectedId = currentItem?.props?.id ?? null
-    onSelectionChange(selectedId)
-  }, [selectedIndex])
+
+    // Track current item's actions for footer display
+    const actions = currentItem?.props?.actions ?? props.actions ?? null
+    setCurrentItemActions(actions)
+
+    // Clear first action title when there are no actions
+    if (!actions) {
+      useStore.setState({ firstActionTitle: '' })
+    }
+
+    // Call onSelectionChange callback if provided
+    if (onSelectionChange) {
+      const selectedId = currentItem?.props?.id ?? null
+      onSelectionChange(selectedId)
+    }
+  }, [selectedIndex, props.actions])
 
   const scrollToItem = (item: { props?: ListItemDescendant }) => {
     const scrollBox = scrollBoxRef.current
@@ -787,29 +833,24 @@ export const List: ListType = (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))
   }
 
   const move = (direction: -1 | 1) => {
+    // Get all visible items
     const items = Object.values(descendantsContext.map.current)
       .filter((item) => item.index !== -1 && item.props?.visible !== false)
       .sort((a, b) => a.index - b.index)
 
     if (items.length === 0) return
 
-
+    // Find currently selected item's position in visible items
     let currentVisibleIndex = items.findIndex(
       (item) => item.index === selectedIndex,
     )
@@ -817,19 +858,19 @@ export const List: ListType = (props) => {
       // If current selection is not visible, select first visible item
       if (items[0]) {
         setSelectedIndex(items[0].index)
-        scrollToItem(items[0])
       }
       return
     }
 
+    // Calculate next visible index
     let nextVisibleIndex = currentVisibleIndex + direction
     if (nextVisibleIndex < 0) nextVisibleIndex = items.length - 1
     if (nextVisibleIndex >= items.length) nextVisibleIndex = 0
 
     const nextItem = items[nextVisibleIndex]
     if (nextItem) {
-      setSelectedIndex(nextItem.index)
       scrollToItem(nextItem)
+      setSelectedIndex(nextItem.index)
     }
   }
 
@@ -845,14 +886,14 @@ export const List: ListType = (props) => {
       return
     }
 
-    // Handle Ctrl+K to show actions
-    if (evt.name === 'k' && evt.ctrl) {
-      const items = Object.values(descendantsContext.map.current)
-        .filter((item) => item.index !== -1)
-        .sort((a, b) => a.index - b.index)
-
-      const currentItem = items.find((item) => item.index === selectedIndex)
+    // Get current item by selectedIndex (which is a descendant index)
+    const items = Object.values(descendantsContext.map.current)
+      .filter((item) => item.index !== -1)
+      .sort((a, b) => a.index - b.index)
+    const currentItem = items.find((item) => item.index === selectedIndex)
 
+    // Handle Ctrl+K to show actions (always show sheet)
+    if (evt.name === 'k' && evt.ctrl) {
       // Show current item's actions if available
       if (currentItem?.props?.actions) {
         dialog.push(currentItem.props.actions, 'bottom-right')
@@ -866,15 +907,12 @@ export const List: ListType = (props) => {
 
     if (evt.name === 'up') move(-1)
     if (evt.name === 'down') move(1)
+    // Handle Enter to execute first action directly
     if (evt.name === 'return') {
-      const items = Object.values(descendantsContext.map.current)
-        .filter((item) => item.index !== -1)
-        .sort((a, b) => a.index - b.index)
-
-      const currentItem = items.find((item) => item.index === selectedIndex)
       if (!currentItem?.props) return
 
       if (currentItem.props.actions) {
+        useStore.setState({ shouldAutoExecuteFirstAction: true })
         dialog.push(currentItem.props.actions, 'bottom-right')
       }
     }
@@ -904,7 +942,10 @@ export const List: ListType = (props) => {
               border={false}
               style={{
                 paddingBottom: 0,
-                flexGrow: 1,
+                flexShrink: 0,
+                paddingLeft: 1,
+                paddingRight: 1,
+                overflow: 'hidden',
               }}
             >
               <LoadingBar
@@ -938,6 +979,7 @@ export const List: ListType = (props) => {
                 <textarea
                   ref={inputRef}
                   height={1}
+                  wrapMode='none'
                   keyBindings={[
                     { name: 'return', action: 'submit' },
                     { name: 'linefeed', action: 'submit' },
@@ -985,6 +1027,11 @@ export const List: ListType = (props) => {
 
               {/* Footer with keyboard shortcuts or toast */}
               <ListFooter />
+
+              {/* Render current item's actions offscreen to collect first action title */}
+              {currentItemActions && (
+                <Offscreen>{currentItemActions}</Offscreen>
+              )}
             </box>
 
             {/* Detail panel on the right */}
@@ -1076,7 +1123,7 @@ const ListItem: ListItemType = (props) => {
     elementRef: elementRef.current,
   })
 
-  // Get selected index from parent List context
+  // Check if this item is selected
   const selectedIndex = listContext?.selectedIndex ?? 0
   const isActive = index === selectedIndex
 
@@ -1156,7 +1203,7 @@ const ListItemDetail: ListItemDetailType = (props) => {
       )}
 
       <ScrollBox
-        focused={true}
+        focused={false}
         flexGrow={1}
         flexShrink={1}
         style={{
@@ -1200,8 +1247,8 @@ const ListItemDetailMetadata = (props: MetadataProps) => {
 
 const ListItemDetailMetadataLabel = (props: { title: string; text?: string; icon?: Image.ImageLike }) => {
   return (
-    <box style={{ flexDirection: 'row', paddingBottom: 0.5 }}>
-      <text fg={Theme.textMuted} style={{ minWidth: 15 }}>{props.title}:</text>
+    <box style={{ flexDirection: 'column', paddingBottom: 0.5 }}>
+      <text fg={Theme.textMuted}>{props.title}:</text>
       {props.text && <text fg={Theme.text}>{props.text}</text>}
     </box>
   )
@@ -1217,8 +1264,8 @@ const ListItemDetailMetadataSeparator = () => {
 
 const ListItemDetailMetadataLink = (props: { title: string; target: string; text: string }) => {
   return (
-    <box style={{ flexDirection: 'row', paddingBottom: 0.5 }}>
-      <text fg={Theme.textMuted} style={{ minWidth: 15 }}>{props.title}:</text>
+    <box style={{ flexDirection: 'column', paddingBottom: 0.5 }}>
+      <text fg={Theme.textMuted}>{props.title}:</text>
       <text fg={Theme.link}>{props.text}</text>
     </box>
   )
@@ -1568,13 +1615,21 @@ const ListSection = (props: SectionProps) => {
     [parentContext, props.title, searchText],
   )
 
-  // Hide section title when searching
-  const showTitle = props.title && !searchText.trim()
+  const isSearching = searchText.trim().length > 0
+
+  const children = (
+    <ListSectionContext.Provider value={sectionContextValue}>
+      {props.children}
+    </ListSectionContext.Provider>
+  )
+
+  if (isSearching) {
+    return children
+  }
 
   return (
     <box style={{ marginBottom: 1 }}>
-      {/* Render section title if provided and not searching */}
-      {showTitle && (
+      {props.title && (
         <box
           border={false}
           style={{
@@ -1586,18 +1641,82 @@ const ListSection = (props: SectionProps) => {
           </text>
         </box>
       )}
-      {/* Render children with section context */}
-      <ListSectionContext.Provider value={sectionContextValue}>
-        {props.children}
-      </ListSectionContext.Provider>
+      {children}
     </box>
   )
 }
 
 List.Section = ListSection
 List.Dropdown = ListDropdown
-List.EmptyView = (props) => {
-  return null
+List.EmptyView = (props: EmptyViewProps) => {
+  const dialog = useDialog()
+  const inFocus = useIsInFocus()
+
+  // Handle keyboard for actions
+  useKeyboard((evt) => {
+    if (!inFocus) return
+
+    // Handle Ctrl+K to show actions
+    if (evt.name === 'k' && evt.ctrl && props.actions) {
+      dialog.push(props.actions, 'bottom-right')
+      return
+    }
+
+    // Handle Enter to execute first action
+    if (evt.name === 'return' && props.actions) {
+      useStore.setState({ shouldAutoExecuteFirstAction: true })
+      dialog.push(props.actions, 'bottom-right')
+    }
+  })
+
+  // Get icon string from ImageLike
+  const getIconString = (icon: Image.ImageLike): string | null => {
+    if (typeof icon === 'string') {
+      return getIconEmoji(icon)
+    }
+    if (icon && typeof icon === 'object' && 'source' in icon) {
+      // For { source: string } or { source: { light, dark } } objects
+      const source = icon.source
+      if (typeof source === 'string') {
+        return getIconEmoji(source)
+      }
+    }
+    return null
+  }
+
+  const iconEmoji = props.icon ? getIconString(props.icon) : null
+
+  return (
+    <box
+      style={{
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexGrow: 1,
+        paddingTop: 2,
+        paddingBottom: 2,
+        paddingLeft: 2,
+        paddingRight: 2,
+        gap: 1,
+      }}
+    >
+      {iconEmoji && (
+        <text fg={Theme.textMuted} style={{ marginBottom: 1 }}>
+          {iconEmoji}
+        </text>
+      )}
+      {props.title && (
+        <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+          {props.title?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || ''}
+        </text>
+      )}
+      {props.description && (
+        <text fg={Theme.textMuted} wrapMode='word'>
+          {props.description?.replace(/\bRaycast\b/g, 'Termcast').replace(/\braycast\b/g, 'termcast') || ''}
+        </text>
+      )}
+    </box>
+  )
 }
 
 export default List

package/src/components/loading-bar.tsx

@@ -127,10 +127,11 @@ export function LoadingBar(props: LoadingBarProps): any {
       style={{
         flexDirection: 'row',
         flexGrow: 1,
-        paddingLeft: 1,
-        paddingRight: 1,
+        // paddingLeft: 1,
+        // paddingRight: 1,
       }}
     >
+
       {characters.map((char, index) => (
         <text key={index} fg={getCharacterColor(index)} flexShrink={0}>
           {char}