termcast 1.3.30 → 1.3.32

package/src/components/detail.tsx

@@ -6,6 +6,7 @@ import { InFocus, useIsInFocus } from 'termcast/src/internal/focus-context'
 import { ActionPanel, Action } from 'termcast/src/components/actions'
 import { Image } from 'termcast/src/components/list'
 import { Color, resolveColor } from 'termcast/src/colors'
+import { Footer } from 'termcast/src/components/footer'
 
 import { useDialog } from 'termcast/src/internal/dialog'
 import { ScrollBox } from 'termcast/src/internal/scrollbox'
@@ -198,37 +199,32 @@ function DetailFooter({
   firstActionTitle?: string
 }): any {
   return (
-    <box
-      border={false}
-      style={{
-        paddingLeft: 1,
-        paddingRight: 1,
-        paddingTop: 1,
-        marginTop: 1,
-        flexDirection: 'row',
-      }}
-    >
-      <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-        esc
-      </text>
-      <text fg={Theme.textMuted}> go back</text>
-      {hasActions && (
-        <>
-          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-            {'   '}^k
-          </text>
-          <text fg={Theme.textMuted}> actions</text>
-        </>
-      )}
-      {hasActions && firstActionTitle && (
-        <>
-          <text fg={Theme.text} attributes={TextAttributes.BOLD}>
-            {'   '}↵
+    <Footer paddingLeft={0} paddingRight={0}>
+      <box style={{ flexDirection: 'row', gap: 3 }}>
+        <box style={{ flexDirection: 'row', gap: 1 }}>
+          <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+            esc
           </text>
-          <text fg={Theme.textMuted}> {firstActionTitle}</text>
-        </>
-      )}
-    </box>
+          <text flexShrink={0} fg={Theme.textMuted}>go back</text>
+        </box>
+        {hasActions && (
+          <box style={{ flexDirection: 'row', gap: 1 }}>
+            <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+              ^k
+            </text>
+            <text flexShrink={0} fg={Theme.textMuted}>actions</text>
+          </box>
+        )}
+        {hasActions && firstActionTitle && (
+          <box style={{ flexDirection: 'row', gap: 1 }}>
+            <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+              ↵
+            </text>
+            <text flexShrink={0} fg={Theme.textMuted}>{firstActionTitle}</text>
+          </box>
+        )}
+      </box>
+    </Footer>
   )
 }
 
@@ -277,20 +273,20 @@ const Detail: DetailType = (props) => {
   useKeyboard((evt) => {
     if (!inFocus) return
 
-    if (evt.name === 'k' && evt.ctrl && actions) {
-      // Ctrl+K shows actions (always show sheet)
-      dialog.push(actions, 'bottom-right')
+    if (evt.name === 'k' && evt.ctrl) {
+      // Ctrl+K shows actions (always show panel, even without actions)
+      dialog.pushActions(actions || <ActionPanel />)
     } else if (evt.name === 'return' && actions) {
       // Enter executes first action directly
       useStore.setState({ shouldAutoExecuteFirstAction: true })
-      dialog.push(actions, 'bottom-right')
+      dialog.pushActions(actions)
     }
   })
 
   const content = (
     <ScrollBox
       focused={true}
-      flexGrow={1}
+      // flexGrow={1}
       flexShrink={1}
       style={{
         rootOptions: {

package/src/components/dropdown.tsx

@@ -7,7 +7,7 @@ import React, {
   createContext,
   useContext,
 } from 'react'
-import { useKeyboard } from '@opentui/react'
+import { useKeyboard, flushSync } from '@opentui/react'
 import {
   TextAttributes,
   ScrollBoxRenderable,
@@ -38,6 +38,7 @@ export interface DropdownProps extends SearchBarInterface, CommonProps {
   defaultValue?: string
   children?: ReactNode
   onChange?: (newValue: string) => void
+  onSelectionChange?: (value: string) => void
 }
 
 export interface DropdownItemProps extends CommonProps {
@@ -78,6 +79,7 @@ interface DropdownContextValue {
   setSelectedIndex?: (index: number) => void
   currentValue?: string
   onChange?: (value: string) => void
+  onSelectionChange?: (value: string) => void
   scrollBoxRef?: React.RefObject<ScrollBoxRenderable | null>
 }
 
@@ -97,6 +99,7 @@ const Dropdown: DropdownType = (props) => {
   const {
     tooltip,
     onChange,
+    onSelectionChange,
     value,
     defaultValue,
     children,
@@ -120,19 +123,7 @@ const Dropdown: DropdownType = (props) => {
   const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
   const descendantsContext = useDropdownDescendants()
 
-  // Update textarea and reset selection - single source of truth is the ref
-  const setSearchText = (text: string) => {
-    inputRef.current?.setText(text)
-    setSearchTextState(text)
-    // TODO: use flushSync when available to force descendants to update visibility
-    const items = Object.values(descendantsContext.map.current)
-      .filter((item: any) => item.index !== -1 && !item.props?.hidden)
-      .sort((a: any, b: any) => a.index - b.index)
 
-    if (items.length > 0 && items[0]) {
-      setSelected(items[0].index)
-    }
-  }
 
   const scrollToItem = (item: { props?: DropdownItemDescendant }) => {
     const scrollBox = scrollBoxRef.current
@@ -160,9 +151,10 @@ const Dropdown: DropdownType = (props) => {
       setSelectedIndex: setSelected,
       currentValue,
       onChange: (value: string) => selectItem(value),
+      onSelectionChange,
       scrollBoxRef,
     }),
-    [searchText, filtering, selected, currentValue],
+    [searchText, filtering, selected, currentValue, onSelectionChange],
   )
 
   // Update controlled value
@@ -176,9 +168,10 @@ const Dropdown: DropdownType = (props) => {
   const handleSearchTextChange = (text: string) => {
     if (!inFocus) return
 
-    // Update state for context
-    setSearchTextState(text)
-    // TODO: use flushSync when available to force descendants to update visibility
+    // Update state for context, using flushSync to force descendants to update visibility
+    flushSync(() => {
+      setSearchTextState(text)
+    })
     const items = Object.values(descendantsContext.map.current)
       .filter((item: any) => item.index !== -1 && !item.props?.hidden)
       .sort((a: any, b: any) => a.index - b.index)
@@ -227,6 +220,9 @@ const Dropdown: DropdownType = (props) => {
     if (nextItem) {
       setSelected(nextItem.index)
       scrollToItem(nextItem)
+      if (onSelectionChange && nextItem.props) {
+        onSelectionChange((nextItem.props as DropdownItemDescendant).value)
+      }
     }
   }
 
@@ -296,13 +292,15 @@ const Dropdown: DropdownType = (props) => {
                   justifyContent: 'space-between',
                 }}
               >
-                <text attributes={TextAttributes.BOLD}>{tooltip}</text>
+                <text fg={Theme.textMuted}>{tooltip}</text>
                 <text fg={Theme.textMuted}>esc</text>
               </box>
-              <box style={{ paddingTop: 1, paddingBottom: 1 }}>
+              <box style={{ paddingTop: 1, paddingBottom: 1, flexDirection: 'row' }}>
+                <text flexShrink={0} fg={Theme.primary}>&gt; </text>
                 <textarea
                   ref={inputRef}
                   height={1}
+                  flexGrow={1}
                   wrapMode='none'
                   keyBindings={[
                     { name: 'return', action: 'submit' },
@@ -329,7 +327,7 @@ const Dropdown: DropdownType = (props) => {
               style={{
                 rootOptions: {
                   backgroundColor: undefined,
-                  maxHeight: 10,
+                  height: 7, // Fixed height prevents layout shift when content mounts incrementally
                 },
                 scrollbarOptions: {
 
@@ -450,7 +448,7 @@ const DropdownItem: (props: DropdownItemProps) => any = (props) => {
   const elementRef = useRef<{ y: number; height: number } | null>(null)
   const isOffscreen = useIsOffscreen()
   if (!context) return null
-  
+
   // Don't render UI when offscreen (used for collecting action descendants)
   if (isOffscreen) return null
 
@@ -492,6 +490,9 @@ const DropdownItem: (props: DropdownItemProps) => any = (props) => {
       index !== -1
     ) {
       context.setSelectedIndex(index)
+      if (context.onSelectionChange) {
+        context.onSelectionChange(props.value)
+      }
     }
   }
 
@@ -520,6 +521,7 @@ const DropdownItem: (props: DropdownItemProps) => any = (props) => {
 
 const DropdownSection: (props: DropdownSectionProps) => any = (props) => {
   const parentContext = useContext(DropdownContext)
+  const isOffscreen = useIsOffscreen()
   if (!parentContext) return null
 
   // Create new context with section title
@@ -531,6 +533,15 @@ const DropdownSection: (props: DropdownSectionProps) => any = (props) => {
     [parentContext, props.title],
   )
 
+  // When offscreen, just render children without section title UI
+  if (isOffscreen) {
+    return (
+      <DropdownContext.Provider value={sectionContextValue}>
+        {props.children}
+      </DropdownContext.Provider>
+    )
+  }
+
   return (
     <>
       {/* Render section title if provided */}

package/src/components/extension-preferences.tsx

@@ -52,9 +52,12 @@ export function ExtensionPreferences({
 
         let packageJson: RaycastPackageJson
 
-        if (extensionPath && extensionPackageJson?.name === extensionName) {
-          // Dev mode - use package.json from state or read from extensionPath
+        if (extensionPackageJson?.name === extensionName) {
+          // Dev mode or compiled extension - use package.json from state
           packageJson = extensionPackageJson
+        } else if (extensionPath && fs.existsSync(path.join(extensionPath, 'package.json'))) {
+          // Dev mode with extensionPath - read from disk
+          packageJson = JSON.parse(fs.readFileSync(path.join(extensionPath, 'package.json'), 'utf-8'))
         } else {
           // Store extension - read from store directory
           const storeDir = getStoreDirectory()
@@ -95,7 +98,7 @@ export function ExtensionPreferences({
           }
         }
 
-        return { preferences: prefsToUse, savedValues }
+        return { preferences: prefsToUse, savedValues, extensionTitle: packageJson.title || extensionName }
       } catch (error) {
         logger.error(`Failed to load preferences for ${extensionName}:`, error)
         showToast({
@@ -103,13 +106,14 @@ export function ExtensionPreferences({
           title: 'Failed to load preferences',
           message: String(error),
         })
-        return { preferences: [], savedValues: {} }
+        return { preferences: [], savedValues: {}, extensionTitle: extensionName }
       }
     },
   })
 
   const preferences = data?.preferences ?? []
   const savedValues = data?.savedValues ?? {}
+  const extensionTitle = data?.extensionTitle ?? extensionName
 
   const handleSubmit = async (values: Record<string, any>) => {
     try {
@@ -141,8 +145,8 @@ export function ExtensionPreferences({
         style: Toast.Style.Success,
         title: 'Preferences saved',
         message: commandName
-          ? `Preferences for ${extensionName}/${commandName} have been saved`
-          : `Preferences for ${extensionName} have been saved`,
+          ? `Preferences for ${extensionTitle}/${commandName} have been saved`
+          : `Preferences for ${extensionTitle} have been saved`,
       })
 
       if (onSubmit) {
@@ -181,8 +185,8 @@ export function ExtensionPreferences({
         <Form.Description
           text={
             commandName
-              ? `No preferences available for ${extensionName}/${commandName}`
-              : `No preferences available for ${extensionName}`
+              ? `No preferences available for ${extensionTitle}/${commandName}`
+              : `No preferences available for ${extensionTitle}`
           }
         />
       </Form>
@@ -198,8 +202,8 @@ export function ExtensionPreferences({
       }
       navigationTitle={
         commandName
-          ? `${extensionName}/${commandName} Preferences`
-          : `${extensionName} Preferences`
+          ? `${extensionTitle}/${commandName} Preferences`
+          : `${extensionTitle} Preferences`
       }
     >
       {preferences.map((pref) => {

package/src/components/footer.tsx

@@ -0,0 +1,241 @@
+import React, { ReactNode, useState, useEffect } from 'react'
+import { TextAttributes } from '@opentui/core'
+import { useTerminalDimensions, useKeyboard } from '@opentui/react'
+import { colord } from 'colord'
+import { Theme } from 'termcast/src/theme'
+import { openInBrowser } from 'termcast/src/action-utils'
+import {
+  useStore,
+  toastPrimaryActionKey,
+  toastSecondaryActionKey,
+  ToastData,
+} from 'termcast/src/state'
+import { useIsInFocus } from 'termcast/src/internal/focus-context'
+
+/** Returns white or black foreground color based on background lightness */
+function getFgForBg(bgColor: string): string {
+  return colord(bgColor).isLight() ? '#000000' : '#ffffff'
+}
+
+interface FooterProps {
+  children?: ReactNode
+  paddingLeft?: number
+  paddingRight?: number
+  paddingTop?: number
+  paddingBottom?: number
+  marginTop?: number
+  hidePoweredBy?: boolean
+}
+
+const MIN_WIDTH_FOR_POWERED_BY = 75
+
+function ToastInline({ toast }: { toast: ToastData }): any {
+  const inFocus = useIsInFocus()
+  const [animationFrame, setAnimationFrame] = useState(0)
+
+  // Keyboard handling for toast actions
+  useKeyboard((evt) => {
+    if (!inFocus) return
+
+    if (evt.name === 'escape') {
+      toast.onHide()
+    } else if (
+      toast.primaryAction &&
+      evt.ctrl &&
+      evt.name === toastPrimaryActionKey.name
+    ) {
+      toast.primaryAction.onAction()
+    } else if (
+      toast.secondaryAction &&
+      evt.ctrl &&
+      evt.name === toastSecondaryActionKey.name
+    ) {
+      toast.secondaryAction.onAction()
+    }
+  })
+
+  // Animation for animated toasts
+  useEffect(() => {
+    if (toast.style === 'ANIMATED') {
+      const interval = setInterval(() => {
+        setAnimationFrame((prev) => (prev + 1) % 8)
+      }, 100)
+      return () => clearInterval(interval)
+    }
+  }, [toast.style])
+
+  // Auto-dismiss for non-animated toasts
+  useEffect(() => {
+    if (toast.style !== 'ANIMATED') {
+      const duration = toast.style === 'FAILURE' ? 8000 : 5000
+      const timer = setTimeout(() => {
+        toast.onHide()
+      }, duration)
+      return () => clearTimeout(timer)
+    }
+  }, [toast.style, toast.onHide])
+
+  const getIcon = () => {
+    switch (toast.style) {
+      case 'SUCCESS':
+        return '✓'
+      case 'FAILURE':
+        return '✗'
+      case 'ANIMATED':
+        return '⣾⣽⣻⢿⡿⣟⣯⣷'[animationFrame]
+      default:
+        return '✓'
+    }
+  }
+
+  const getIconColor = () => {
+    switch (toast.style) {
+      case 'SUCCESS':
+        return Theme.success
+      case 'FAILURE':
+        return Theme.error
+      case 'ANIMATED':
+        return Theme.primary
+      default:
+        return Theme.success
+    }
+  }
+
+  const primaryBg = Theme.primary
+  const primaryFg = getFgForBg(primaryBg)
+  const keysBg = colord(primaryBg).darken(0.06).toHex()
+
+  const hasKeys = !!toast.primaryAction?.title || !!toast.secondaryAction?.title
+  return (
+    <box
+      flexDirection='row'
+      marginLeft={-3}
+      marginRight={-3}
+      flexGrow={1}
+      overflow='hidden'
+    >
+      {/* Title box */}
+      <box
+        flexDirection='row'
+        flexShrink={0}
+        backgroundColor={colord(primaryBg).lighten(0.1).toHex()}
+        paddingLeft={3}
+        paddingRight={1}
+      >
+        <text flexShrink={0} fg={getIconColor()}>
+          {getIcon()}{' '}
+        </text>
+        <text flexShrink={0} fg={primaryFg} attributes={TextAttributes.BOLD}>
+          {toast.title}
+        </text>
+      </box>
+      {/* Message/description box (in the middle with keys background) */}
+      <box
+        flexGrow={1}
+        backgroundColor={keysBg}
+        paddingLeft={1}
+        paddingRight={1}
+        flexDirection='row'
+        overflow='hidden'
+      >
+        <text fg={primaryFg} wrapMode='none'>
+          {toast.message || ''}
+        </text>
+      </box>
+      {/* Keys box (right aligned, no grow) */}
+
+      <box
+        backgroundColor={keysBg}
+        paddingLeft={1}
+        paddingRight={3}
+        gap={1}
+        flexDirection='row'
+        flexShrink={0}
+      >
+        {toast.primaryAction?.title && (
+          <box
+            flexShrink={0}
+            flexDirection='row'
+            onMouseDown={() => {
+              toast.primaryAction?.onAction()
+            }}
+          >
+            <text fg={primaryFg} attributes={TextAttributes.BOLD}>
+              {toast.primaryAction.title}
+            </text>
+            <text fg={primaryFg}> ctrl t</text>
+          </box>
+        )}
+        {toast.secondaryAction?.title && (
+          <box
+            flexShrink={0}
+            flexDirection='row'
+            onMouseDown={() => {
+              toast.secondaryAction?.onAction()
+            }}
+          >
+            <text fg={primaryFg} attributes={TextAttributes.BOLD}>
+              {toast.secondaryAction.title}
+            </text>
+            <text fg={primaryFg}> ctrl g</text>
+          </box>
+        )}
+      </box>
+    </box>
+  )
+}
+
+export function Footer({
+  children,
+  paddingLeft = 1,
+  paddingRight = 1,
+  paddingTop = 1,
+  paddingBottom,
+  marginTop = 1,
+  hidePoweredBy = false,
+}: FooterProps): any {
+  const { width } = useTerminalDimensions()
+  const showPoweredBy = !hidePoweredBy && width >= MIN_WIDTH_FOR_POWERED_BY
+  const toast = useStore((state) => state.toast)
+
+  return (
+    <box
+      border={false}
+      style={{
+        paddingLeft,
+        paddingRight,
+        paddingTop,
+        paddingBottom,
+        marginTop,
+        flexShrink: 0,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+      }}
+    >
+      {toast ? (
+        <ToastInline toast={toast} />
+      ) : (
+        <>
+          {children}
+          {showPoweredBy && (
+            <box flexDirection='row' gap={1}>
+              <text flexShrink={0} fg={Theme.textMuted}>
+                powered by
+              </text>
+              <text
+                flexShrink={0}
+                onMouseDown={() => {
+                  openInBrowser('https://termcast.app')
+                }}
+                fg={Theme.textMuted}
+                attributes={TextAttributes.BOLD}
+              >
+                termcast
+              </text>
+            </box>
+          )}
+        </>
+      )}
+    </box>
+  )
+}