termcast 1.3.21 → 1.3.25

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,9 +69,34 @@ interface ActionsInterface {
 }
 
 function ListFooter(): any {
+  const firstActionTitle = useStore((s) => s.firstActionTitle)
+  const hasToast = useStore((s) => s.toast !== null)
+
+  const content = hasToast ? null : (
+    <>
+      {firstActionTitle && (
+        <>
+          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+            ↵
+          </text>
+          <text fg={Theme.textMuted}> {firstActionTitle.toLowerCase()}</text>
+        </>
+      )}
+      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        {'  '}↑↓
+      </text>
+      <text fg={Theme.textMuted}> navigate</text>
+      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        {'  '}^k
+      </text>
+      <text fg={Theme.textMuted}> actions</text>
+    </>
+  )
+
   return (
     <box
       border={false}
+      height={1}
       style={{
         paddingLeft: 1,
         flexShrink: 0,
@@ -79,18 +106,7 @@ function ListFooter(): any {
         flexDirection: 'row',
       }}
     >
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        ↵
-      </text>
-      <text fg={Theme.textMuted}> select</text>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'  '}↑↓
-      </text>
-      <text fg={Theme.textMuted}> navigate</text>
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        {'  '}^k
-      </text>
-      <text fg={Theme.textMuted}> actions</text>
+      {content}
     </box>
   )
 }
@@ -175,13 +191,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 +396,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 +479,7 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
               <textarea
                 ref={inputRef}
                 height={1}
+                wrapMode='none'
                 keyBindings={[
                   { name: 'return', action: 'submit' },
                   { name: 'linefeed', action: 'submit' },
@@ -499,30 +523,45 @@ function ListDropdownDialog(props: ListDropdownDialogProps): any {
           )}
         </box>
 
-        <box
-          border={false}
-          style={{
-            paddingRight: 2,
-            paddingLeft: 3,
-            paddingBottom: 1,
-            paddingTop: 1,
-            flexDirection: 'row',
-          }}
-        >
-          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-            ↵
-          </text>
-          <text fg={Theme.textMuted}> select</text>
-          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-            {'   '}↑↓
-          </text>
-          <text fg={Theme.textMuted}> navigate</text>
-        </box>
+        <DropdownFooter />
       </box>
     </DropdownDescendantsProvider>
   )
 }
 
+function DropdownFooter(): any {
+  const hasToast = useStore((s) => s.toast !== null)
+
+  const content = hasToast ? null : (
+    <>
+      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        ↵
+      </text>
+      <text fg={Theme.textMuted}> select</text>
+      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+        {'   '}↑↓
+      </text>
+      <text fg={Theme.textMuted}> navigate</text>
+    </>
+  )
+
+  return (
+    <box
+      border={false}
+      height={1}
+      style={{
+        paddingRight: 2,
+        paddingLeft: 3,
+        paddingBottom: 1,
+        paddingTop: 1,
+        flexDirection: 'row',
+      }}
+    >
+      {content}
+    </box>
+  )
+}
+
 // Render a single list item row
 function ListItemRow(props: {
   title: string
@@ -670,7 +709,7 @@ export const List: ListType = (props) => {
   const {
     children,
     onSelectionChange,
-    filtering = true,
+    filtering,
     searchText: controlledSearchText,
     onSearchTextChange,
     searchBarPlaceholder = 'Search...',
@@ -686,6 +725,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 +740,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 +778,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 +817,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 +856,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 +881,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 +909,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 +930,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 +965,10 @@ export const List: ListType = (props) => {
               border={false}
               style={{
                 paddingBottom: 0,
-                flexGrow: 1,
+                flexShrink: 0,
+                paddingLeft: 1,
+                paddingRight: 1,
+                overflow: 'hidden',
               }}
             >
               <LoadingBar
@@ -938,6 +1002,7 @@ export const List: ListType = (props) => {
                 <textarea
                   ref={inputRef}
                   height={1}
+                  wrapMode='none'
                   keyBindings={[
                     { name: 'return', action: 'submit' },
                     { name: 'linefeed', action: 'submit' },
@@ -985,6 +1050,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 +1146,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 +1226,7 @@ const ListItemDetail: ListItemDetailType = (props) => {
       )}
 
       <ScrollBox
-        focused={true}
+        focused={false}
         flexGrow={1}
         flexShrink={1}
         style={{
@@ -1200,8 +1270,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 +1287,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 +1638,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 +1664,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}

package/src/components/loading-text.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { colord } from 'colord'
+
+interface LoadingTextProps {
+  children: string
+  isLoading?: boolean
+  color: string
+}
+
+/**
+ * Generate wave colors based on base color
+ * Creates a gradient from base color to a lighter version and back
+ * Uses a shorter wave (12 chars) compared to LoadingBar
+ */
+function generateWaveColors(baseColor: string): string[] {
+  const base = colord(baseColor)
+  // Shorter wave for text - lighten factors from 0 to 0.5 and back
+  const steps = [0, 10, 20, 30, 40, 50, 40, 30, 20, 10, 0, 0]
+  return steps.map((percent) => base.lighten(percent / 100).toHex())
+}
+
+export function LoadingText(props: LoadingTextProps): any {
+  const { children, isLoading = false, color = '#FFC000' } = props
+  const [position, setPosition] = useState(0)
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  const characters = children.split('')
+  const waveColors = generateWaveColors(color)
+  const waveWidth = waveColors.length
+  // Add padding at the end to create a delay before the next loop
+  const endPadding = 10
+  const totalLength = characters.length + waveWidth + endPadding
+
+  useEffect(() => {
+    if (isLoading) {
+      intervalRef.current = setInterval(() => {
+        setPosition((prev) => (prev + 1) % totalLength)
+      }, 30)
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+      setPosition(0)
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+    }
+  }, [isLoading, totalLength])
+
+  const getCharacterColor = (index: number): string => {
+    if (!isLoading) {
+      return color
+    }
+
+    const distance = position - index
+
+    // If character is within the wave (behind the current position)
+    if (distance >= 0 && distance < waveWidth) {
+      return waveColors[distance]
+    }
+
+    // Default to base color for characters outside the wave
+    return color
+  }
+
+  return (
+    <box flexDirection="row">
+      {characters.map((char, index) => (
+        <text key={index} fg={getCharacterColor(index)} flexShrink={0}>
+          {char}
+        </text>
+      ))}
+    </box>
+  )
+}

package/src/descendants.tsx

@@ -113,6 +113,7 @@ const MenuExample = () => {
           <textarea
             ref={inputRef}
             height={1}
+            wrapMode='none'
             keyBindings={[
               { name: 'return', action: 'submit' },
               { name: 'linefeed', action: 'submit' },