termcast 1.3.32 → 1.3.34

package/src/components/detail.tsx

@@ -1,16 +1,17 @@
 import React, { ReactNode, useMemo, ReactElement } from 'react'
 import { TextAttributes } from '@opentui/core'
-import { useKeyboard } from '@opentui/react'
-import { Theme, markdownSyntaxStyle } from 'termcast/src/theme'
+import { useKeyboard, useTerminalDimensions } from '@opentui/react'
+import { useTheme, markdownSyntaxStyle } from 'termcast/src/theme'
 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'
 import { useStore } from 'termcast/src/state'
+import { Offscreen } from 'termcast/src/internal/offscreen'
+import { Metadata, MetadataContext } from 'termcast/src/components/metadata'
+import type { LabelProps, SeparatorProps, LinkProps, TagListProps, TagListItemProps, MetadataConfig } from 'termcast/src/components/metadata'
 
 interface ActionsInterface {
   actions?: ReactNode
@@ -35,133 +36,11 @@ interface MetadataProps {
   children: ReactNode
 }
 
-interface LabelProps {
-  title: string
-  icon?: Image.ImageLike | undefined | null
-  text?:
-    | string
-    | {
-        value: string
-        color?: Color.ColorLike | null
-      }
-}
-
-interface SeparatorProps {}
-
-interface LinkProps {
-  title: string
-  target: string
-  text: string
-}
-
-interface TagListProps {
-  title: string
-  children: ReactNode
-}
-
-interface TagListItemProps {
-  icon?: Image.ImageLike | undefined | null
-  text?: string
-  color?: Color.ColorLike | undefined | null
-  onAction?: () => void
-}
-
-interface DetailType {
-  (props: DetailProps): any
-  Metadata: DetailMetadataType
-}
-
-const DetailMetadataLabel = (props: LabelProps): any => {
-  const textValue =
-    typeof props.text === 'string' ? props.text : props.text?.value
-  const textColor =
-    typeof props.text === 'object' ? props.text?.color : undefined
-
-  return (
-    <box
-      style={{
-        flexDirection: 'row',
-        paddingBottom: 1,
-      }}
-    >
-      <text fg={Theme.textMuted} style={{ minWidth: 15 }}>
-        {props.title}:
-      </text>
-      <text fg={resolveColor(textColor) || Theme.text}>{textValue || '—'}</text>
-    </box>
-  )
-}
-
-const DetailMetadataSeparator = (props: SeparatorProps): any => {
-  return (
-    <box
-      style={{
-        paddingTop: 1,
-        paddingBottom: 1,
-      }}
-    >
-      <text fg={Theme.textMuted}>{'─'.repeat(30)}</text>
-    </box>
-  )
-}
-
-const DetailMetadataLink = (props: LinkProps): any => {
-  return (
-    <box
-      style={{
-        flexDirection: 'row',
-        paddingBottom: 1,
-      }}
-    >
-      <text fg={Theme.textMuted} style={{ minWidth: 15 }}>
-        {props.title}:
-      </text>
-      <text fg={Theme.accent} attributes={TextAttributes.UNDERLINE}>
-        {props.text}
-      </text>
-    </box>
-  )
-}
-
-const DetailMetadataTagListItem = (props: TagListItemProps): any => {
-  const displayText = props.text || ''
-
-  return (
-    <text
-      fg={resolveColor(props.color) || Theme.text}
-      style={{
-        paddingRight: 1,
-        paddingLeft: props.icon ? 1 : 0,
-      }}
-    >
-      {displayText}
-    </text>
-  )
-}
-
 interface DetailMetadataTagListType {
   (props: TagListProps): any
   Item: (props: TagListItemProps) => any
 }
 
-const DetailMetadataTagList: DetailMetadataTagListType = (props) => {
-  return (
-    <box
-      style={{
-        flexDirection: 'column',
-        paddingBottom: 1,
-      }}
-    >
-      <text fg={Theme.textMuted} style={{ minWidth: 15 }}>
-        {props.title}:
-      </text>
-      <box style={{ flexDirection: 'row' }}>{props.children}</box>
-    </box>
-  )
-}
-
-DetailMetadataTagList.Item = DetailMetadataTagListItem
-
 interface DetailMetadataType {
   (props: MetadataProps): any
   Label: (props: LabelProps) => any
@@ -170,26 +49,47 @@ interface DetailMetadataType {
   TagList: DetailMetadataTagListType
 }
 
+interface DetailType {
+  (props: DetailProps): any
+  Metadata: DetailMetadataType
+}
+
 const DetailMetadata: DetailMetadataType = (props) => {
+  const { width } = useTerminalDimensions()
+
+  // Dynamic config based on terminal width
+  // Calculate maxValueLen as a function of title length:
+  // availableWidth = terminalWidth - padding(~4) - titleWidth - colon+space(2)
+  const config: MetadataConfig = {
+    maxValueLen: (titleLen: number) => {
+      const padding = 4
+      const colonSpace = 2
+      const titleWidth = Math.max(titleLen, 15) // minimum title width
+      return Math.max(10, width - padding - titleWidth - colonSpace)
+    },
+    titleMinWidth: 15,
+    paddingBottom: 1,
+    separatorWidth: Math.min(30, width - 4),
+  }
+
   return (
-    <box
-      style={{
-        flexDirection: 'column',
-        paddingTop: 1,
-      }}
-      border={['top']}
-      borderStyle='single'
-      borderColor={Theme.border}
-    >
-      {props.children}
-    </box>
+    <MetadataContext.Provider value={config}>
+      <box
+        style={{
+          flexDirection: 'column',
+          paddingTop: 1,
+        }}
+      >
+        {props.children}
+      </box>
+    </MetadataContext.Provider>
   )
 }
 
-DetailMetadata.Label = DetailMetadataLabel
-DetailMetadata.Separator = DetailMetadataSeparator
-DetailMetadata.Link = DetailMetadataLink
-DetailMetadata.TagList = DetailMetadataTagList
+DetailMetadata.Label = Metadata.Label
+DetailMetadata.Separator = Metadata.Separator
+DetailMetadata.Link = Metadata.Link
+DetailMetadata.TagList = Metadata.TagList
 
 function DetailFooter({
   hasActions,
@@ -198,29 +98,31 @@ function DetailFooter({
   hasActions?: boolean
   firstActionTitle?: string
 }): any {
+  const theme = useTheme()
+
   return (
     <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}>
+          <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
             esc
           </text>
-          <text flexShrink={0} fg={Theme.textMuted}>go back</text>
+          <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}>
+            <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>
         )}
         {hasActions && firstActionTitle && (
           <box style={{ flexDirection: 'row', gap: 1 }}>
-            <text flexShrink={0} fg={Theme.text} attributes={TextAttributes.BOLD}>
+            <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
               ↵
             </text>
-            <text flexShrink={0} fg={Theme.textMuted}>{firstActionTitle}</text>
+            <text flexShrink={0} fg={theme.textMuted}>{firstActionTitle}</text>
           </box>
         )}
       </box>
@@ -274,12 +176,13 @@ const Detail: DetailType = (props) => {
     if (!inFocus) return
 
     if (evt.name === 'k' && evt.ctrl) {
-      // Ctrl+K shows actions (always show panel, even without actions)
-      dialog.pushActions(actions || <ActionPanel />)
+      // Ctrl+K shows actions dialog via portal
+      if (actions) {
+        useStore.setState({ showActionsDialog: true })
+      }
     } else if (evt.name === 'return' && actions) {
-      // Enter executes first action directly
+      // Enter auto-executes first action via ActionPanel's layout effect
       useStore.setState({ shouldAutoExecuteFirstAction: true })
-      dialog.pushActions(actions)
     }
   })
 
@@ -317,6 +220,8 @@ const Detail: DetailType = (props) => {
         hasActions={!!actions}
         firstActionTitle={firstActionTitle}
       />
+      {/* Render actions offscreen to capture them */}
+      {actions && <Offscreen>{actions}</Offscreen>}
     </box>
   )
 }

package/src/components/dropdown.tsx

@@ -1,9 +1,10 @@
 import React, {
   ReactNode,
   useState,
-  useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
+  useCallback,
   createContext,
   useContext,
 } from 'react'
@@ -13,8 +14,10 @@ import {
   ScrollBoxRenderable,
   TextareaRenderable,
 } from '@opentui/core'
-import { Theme } from 'termcast/src/theme'
+import { useTheme } from 'termcast/src/theme'
+import { getIconValue } from 'termcast/src/components/icon'
 import { logger } from 'termcast/src/logger'
+import { useStore } from 'termcast/src/state'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useIsOffscreen } from 'termcast/src/internal/offscreen'
 import { CommonProps } from 'termcast/src/utils'
@@ -43,7 +46,7 @@ export interface DropdownProps extends SearchBarInterface, CommonProps {
 
 export interface DropdownItemProps extends CommonProps {
   title: string
-  value: string
+  value?: string
   icon?: ReactNode
 
   keywords?: string[]
@@ -111,6 +114,7 @@ const Dropdown: DropdownType = (props) => {
     throttle,
   } = props
 
+  const theme = useTheme()
   const isOffscreen = useIsOffscreen()
   const [selected, setSelected] = useState(0)
   const [searchText, setSearchTextState] = useState('')
@@ -118,6 +122,23 @@ const Dropdown: DropdownType = (props) => {
     value || defaultValue,
   )
   const inputRef = 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 lastSearchTextRef = useRef('')
   const throttleTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
   const scrollBoxRef = useRef<ScrollBoxRenderable>(null)
@@ -157,8 +178,8 @@ const Dropdown: DropdownType = (props) => {
     [searchText, filtering, selected, currentValue, onSelectionChange],
   )
 
-  // Update controlled value
-  useEffect(() => {
+  // Update controlled value (before paint to avoid flash)
+  useLayoutEffect(() => {
     if (value !== undefined) {
       setCurrentValue(value)
     }
@@ -177,7 +198,10 @@ const Dropdown: DropdownType = (props) => {
       .sort((a: any, b: any) => a.index - b.index)
 
     if (items.length > 0 && items[0]) {
-      setSelected(items[0].index)
+      flushSync(() => {
+        setSelected(items[0].index)
+      })
+      scrollToItem(items[0])
     }
 
     if (onSearchTextChange) {
@@ -218,7 +242,9 @@ const Dropdown: DropdownType = (props) => {
 
     const nextItem = items[nextVisibleIndex]
     if (nextItem) {
-      setSelected(nextItem.index)
+      flushSync(() => {
+        setSelected(nextItem.index)
+      })
       scrollToItem(nextItem)
       if (onSelectionChange && nextItem.props) {
         onSelectionChange((nextItem.props as DropdownItemDescendant).value)
@@ -292,13 +318,13 @@ const Dropdown: DropdownType = (props) => {
                   justifyContent: 'space-between',
                 }}
               >
-                <text fg={Theme.textMuted}>{tooltip}</text>
-                <text fg={Theme.textMuted}>esc</text>
+                <text fg={theme.textMuted}>{tooltip}</text>
+                <text fg={theme.textMuted}>esc</text>
               </box>
               <box style={{ paddingTop: 1, paddingBottom: 1, flexDirection: 'row' }}>
-                <text flexShrink={0} fg={Theme.primary}>&gt; </text>
+                <text flexShrink={0} fg={theme.primary}>&gt; </text>
                 <textarea
-                  ref={inputRef}
+                  ref={setInputRef}
                   height={1}
                   flexGrow={1}
                   wrapMode='none'
@@ -313,9 +339,9 @@ const Dropdown: DropdownType = (props) => {
                   placeholder={placeholder}
                   focused={inFocus}
                   initialValue=""
-                  focusedBackgroundColor={Theme.backgroundPanel}
-                  cursorColor={Theme.primary}
-                  focusedTextColor={Theme.textMuted}
+                  focusedBackgroundColor={theme.backgroundPanel}
+                  cursorColor={theme.primary}
+                  focusedTextColor={theme.textMuted}
                 />
               </box>
             </box>
@@ -350,14 +376,14 @@ const Dropdown: DropdownType = (props) => {
               flexDirection: 'row',
             }}
           >
-            <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+            <text fg={theme.text} attributes={TextAttributes.BOLD}>
               ↵
             </text>
-            <text fg={Theme.textMuted}> select</text>
-            <text fg={Theme.text} attributes={TextAttributes.BOLD}>
+            <text fg={theme.textMuted}> select</text>
+            <text fg={theme.text} attributes={TextAttributes.BOLD}>
               {'   '}↑↓
             </text>
-            <text fg={Theme.textMuted}> navigate</text>
+            <text fg={theme.textMuted}> navigate</text>
           </box>
         </box>
       </DropdownContext.Provider>
@@ -376,6 +402,7 @@ function ItemOption(props: {
   onMouseMove?: () => void
   elementRef?: React.Ref<any>
 }) {
+  const theme = useTheme()
   const [isHovered, setIsHovered] = useState(false)
 
   return (
@@ -384,9 +411,9 @@ function ItemOption(props: {
       style={{
         flexDirection: 'row',
         backgroundColor: props.active
-          ? Theme.primary
+          ? theme.primary
           : isHovered
-            ? Theme.backgroundPanel
+            ? theme.backgroundPanel
             : undefined,
         paddingLeft: props.active ? 0 : 1,
         paddingRight: 1,
@@ -402,27 +429,27 @@ function ItemOption(props: {
     >
       <box style={{ flexDirection: 'row' }}>
         {props.active && (
-          <text fg={Theme.background} selectable={false}>
+          <text fg={theme.background} selectable={false}>
             ›{''}
           </text>
         )}
         {props.icon && (
           <text
-            fg={props.active ? Theme.background : Theme.text}
+            fg={props.active ? theme.background : theme.text}
             selectable={false}
           >
-            {String(props.icon)}{' '}
+            {getIconValue(props.icon)}{' '}
           </text>
         )}
         <text
           fg={
             props.active
-              ? Theme.background
+              ? theme.background
               : props.color
                 ? props.color
                 : props.current
-                  ? Theme.primary
-                  : Theme.text
+                  ? theme.primary
+                  : theme.text
           }
           attributes={props.active ? TextAttributes.BOLD : undefined}
           selectable={false}
@@ -432,7 +459,7 @@ function ItemOption(props: {
       </box>
       {props.label && (
         <text
-          fg={props.active ? Theme.background : Theme.textMuted}
+          fg={props.active ? theme.background : theme.textMuted}
           attributes={props.active ? TextAttributes.BOLD : undefined}
           selectable={false}
         >
@@ -466,9 +493,10 @@ const DropdownItem: (props: DropdownItemProps) => any = (props) => {
     return !searchableText.includes(needle)
   })()
 
-  // Register as descendant
+  // Register as descendant - use title as fallback for value
+  const value = props.value ?? props.title
   const { index } = useDropdownItemDescendant({
-    value: props.value,
+    value,
     title: props.title,
     hidden: shouldHide,
     elementRef: elementRef.current,
@@ -479,7 +507,7 @@ const DropdownItem: (props: DropdownItemProps) => any = (props) => {
 
   // Determine if active (index will be -1 if hidden)
   const isActive = index === selectedIndex && index !== -1
-  const isCurrent = props.value === currentValue
+  const isCurrent = value === currentValue
 
   // Handle mouse events
   const handleMouseMove = () => {
@@ -491,15 +519,15 @@ const DropdownItem: (props: DropdownItemProps) => any = (props) => {
     ) {
       context.setSelectedIndex(index)
       if (context.onSelectionChange) {
-        context.onSelectionChange(props.value)
+        context.onSelectionChange(value)
       }
     }
   }
 
   const handleMouseDown = () => {
     // Trigger selection on click
-    if (context.onChange && props.value) {
-      context.onChange(props.value)
+    if (context.onChange && value) {
+      context.onChange(value)
     }
   }
 
@@ -520,6 +548,7 @@ const DropdownItem: (props: DropdownItemProps) => any = (props) => {
 }
 
 const DropdownSection: (props: DropdownSectionProps) => any = (props) => {
+  const theme = useTheme()
   const parentContext = useContext(DropdownContext)
   const isOffscreen = useIsOffscreen()
   if (!parentContext) return null
@@ -542,12 +571,17 @@ const DropdownSection: (props: DropdownSectionProps) => any = (props) => {
     )
   }
 
+  // Hide section titles when filtering is active and there's search text
+  // This prevents showing empty section headers when all items are filtered out
+  const hideTitle =
+    parentContext.filtering && parentContext.searchText.trim().length > 0
+
   return (
     <>
-      {/* Render section title if provided */}
-      {props.title && (
+      {/* Render section title if provided and not hidden by filtering */}
+      {props.title && !hideTitle && (
         <box style={{ paddingTop: 1, paddingLeft: 1 }}>
-          <text fg={Theme.accent} attributes={TextAttributes.BOLD}>
+          <text fg={theme.accent} attributes={TextAttributes.BOLD}>
             {props.title}
           </text>
         </box>