termcast 1.4.1 → 1.5.0

package/src/components/horizontal-bar-graph.tsx

@@ -0,0 +1,279 @@
+/**
+ * HorizontalBarGraph renders multi-series horizontal stacked bars.
+ *
+ * Each row is one category, usually a time bucket. The left chart area grows to
+ * fill available space while the right legend uses only the width needed for
+ * colored series rows and percentages.
+ */
+
+import React, { ReactNode, useMemo } from 'react'
+import { BoxProps } from '@opentui/react'
+import { Color, resolveColor } from 'termcast/src/colors'
+import { getThemePalette, useTheme } from 'termcast/src/theme'
+
+export interface HorizontalBarGraphSeriesProps {
+  /** One value per row/category position. */
+  data: number[]
+  /** Series label shown in the legend. */
+  title?: string
+  /** Override the auto-assigned color. */
+  color?: Color.ColorLike
+}
+
+export interface HorizontalBarGraphProps extends BoxProps {
+  /** Row labels, one per bar position. Usually time buckets. */
+  labels?: string[]
+  /** Maximum chart rows to render. Defaults to all rows. */
+  height?: number
+  /** Character used for bar cells. Matches Histogram by default. */
+  barCharacter?: string
+  /** Show header row. Default true. */
+  showHeader?: boolean
+  /** Show right-side legend. Default true when any series has a title. */
+  showLegend?: boolean
+  /** Max display width for labels; longer labels are truncated. Default 16. */
+  maxLabelWidth?: number
+  /** Header text for the category column. Default "category". */
+  categoryTitle?: string
+  /** Header text for the bar column. Default "distribution". */
+  distributionTitle?: string
+  /** Header text for the legend column. Default "legend". */
+  legendTitle?: string
+  /** HorizontalBarGraph.Series children. */
+  children: ReactNode
+}
+
+interface HorizontalBarGraphType {
+  (props: HorizontalBarGraphProps): any
+  Series: (props: HorizontalBarGraphSeriesProps) => any
+}
+
+function truncateLabel(label: string, maxLabelWidth: number): string {
+  if (label.length <= maxLabelWidth) {
+    return label
+  }
+  return label.slice(0, maxLabelWidth - 1) + '…'
+}
+
+function padRight(value: string, width: number): string {
+  if (value.length >= width) {
+    return value
+  }
+  return value + ' '.repeat(width - value.length)
+}
+
+function padLeft(value: string, width: number): string {
+  if (value.length >= width) {
+    return value
+  }
+  return ' '.repeat(width - value.length) + value
+}
+
+function formatPercentage(value: number, total: number): string {
+  if (total <= 0) {
+    return '0%'
+  }
+  return `${Math.round((value / total) * 100)}%`
+}
+
+const HorizontalBarGraphSeries = (_props: HorizontalBarGraphSeriesProps): any => {
+  return null
+}
+
+const HorizontalBarGraph: HorizontalBarGraphType = (props) => {
+  const theme = useTheme()
+  const {
+    labels = [],
+    height,
+    barCharacter = '╻',
+    showHeader = true,
+    showLegend,
+    maxLabelWidth = 16,
+    categoryTitle = 'category',
+    distributionTitle = 'distribution',
+    legendTitle = 'legend',
+    children,
+    ...rest
+  } = props
+
+  const palette = getThemePalette(theme)
+
+  const seriesList = useMemo<Array<{ data: number[]; color: string; title?: string }>>(() => {
+    const childArray = React.Children.toArray(children)
+    return childArray
+      .filter(React.isValidElement)
+      .map((child, index) => {
+        const childProps = child.props as HorizontalBarGraphSeriesProps
+        return {
+          data: childProps.data,
+          title: childProps.title,
+          color: resolveColor(childProps.color) || palette[index % palette.length]!,
+        }
+      })
+      .filter((series) => {
+        return Array.isArray(series.data)
+      })
+  }, [children, palette])
+
+  const rowCount = useMemo(() => {
+    return Math.max(labels.length, ...seriesList.map((series) => series.data.length), 0)
+  }, [labels, seriesList])
+
+  const rows = useMemo<Array<{ label: string; total: number; values: number[] }>>(() => {
+    return Array.from({ length: rowCount }, (_, rowIndex) => {
+      const values = seriesList.map((series) => {
+        return series.data[rowIndex] || 0
+      })
+      const total = values.reduce((sum, value) => {
+        return sum + value
+      }, 0)
+      return {
+        label: labels[rowIndex] ?? String(rowIndex + 1),
+        total,
+        values,
+      }
+    })
+  }, [labels, rowCount, seriesList])
+
+  const visibleRows = useMemo(() => {
+    return rows.slice(0, height ?? rows.length)
+  }, [height, rows])
+
+  const maxTotal = useMemo(() => {
+    return Math.max(0, ...rows.map((row) => row.total))
+  }, [rows])
+
+  const legendRows = useMemo<Array<{ title: string; color: string; percentage: string; total: number }>>(() => {
+    const grandTotal = rows.reduce((sum, row) => {
+      return sum + row.total
+    }, 0)
+    return seriesList
+      .map((series, seriesIndex) => {
+        const seriesTotal = series.data.reduce((sum, value) => {
+          return sum + value
+        }, 0)
+        return {
+          title: series.title ?? `Series ${seriesIndex + 1}`,
+          color: series.color,
+          percentage: formatPercentage(seriesTotal, grandTotal),
+          total: seriesTotal,
+        }
+      })
+      .filter((row) => {
+        return row.title.length > 0
+      })
+      .sort((a, b) => {
+        return b.total - a.total
+      })
+  }, [rows, seriesList])
+
+  const legendVisible = showLegend ?? seriesList.some((series) => {
+    return Boolean(series.title)
+  })
+
+  if (seriesList.length === 0 || visibleRows.length === 0 || maxTotal === 0) {
+    return null
+  }
+
+  const displayLabels = visibleRows.map((row) => {
+    return truncateLabel(row.label, maxLabelWidth)
+  })
+  const displayCategoryTitle = truncateLabel(categoryTitle, maxLabelWidth)
+  const labelWidth = Math.max(5, displayCategoryTitle.length, ...displayLabels.map((label) => label.length))
+
+  const legendGap = 2
+  const legendTitleWidth = Math.max(6, ...legendRows.map((row) => row.title.length))
+  const legendPercentageWidth = Math.max(3, ...legendRows.map((row) => row.percentage.length))
+  const legendWidth = legendVisible ? legendGap + 2 + legendTitleWidth + 2 + legendPercentageWidth : 0
+  const headerHeight = showHeader ? 2 : 0
+  const chartHeight = headerHeight + visibleRows.length
+
+  return (
+    <box flexDirection="column" width="100%" flexShrink={0} {...rest}>
+      {showHeader && (
+        <>
+          <box flexDirection="row" height={1} flexShrink={0}>
+            <box width={labelWidth + 2} flexShrink={0} overflow="hidden">
+              <text fg={theme.textMuted} wrapMode="none">{padRight(displayCategoryTitle, labelWidth)}  </text>
+            </box>
+            <box flexGrow={1} flexShrink={1} overflow="hidden">
+              <text fg={theme.textMuted} wrapMode="none">{distributionTitle}</text>
+            </box>
+            {legendVisible && (
+              <box width={legendWidth} flexShrink={0} overflow="hidden">
+                <text fg={theme.textMuted} wrapMode="none">{' '.repeat(legendGap)}{legendTitle}</text>
+              </box>
+            )}
+          </box>
+          <box flexDirection="row" height={1} flexShrink={0}>
+            <box width={labelWidth + 2} flexShrink={0} overflow="hidden">
+              <text fg={theme.borderSubtle} wrapMode="none">{'─'.repeat(labelWidth)}  </text>
+            </box>
+            <box flexGrow={1} flexShrink={1} overflow="hidden">
+              <text fg={theme.borderSubtle} wrapMode="none">{'─'.repeat(200)}</text>
+            </box>
+            {legendVisible && (
+              <box width={legendWidth} flexShrink={0} overflow="hidden">
+                <text fg={theme.borderSubtle} wrapMode="none">{' '.repeat(legendGap)}{'─'.repeat(legendWidth - legendGap)}</text>
+              </box>
+            )}
+          </box>
+        </>
+      )}
+
+      <box flexDirection="row" height={chartHeight - headerHeight} flexShrink={0}>
+        <box flexDirection="column" flexGrow={1} flexShrink={1} overflow="hidden">
+          {visibleRows.map((row, rowIndex) => {
+            return (
+              <box key={row.label} flexDirection="row" height={1} flexShrink={0} overflow="hidden">
+                <box width={labelWidth + 2} flexShrink={0} overflow="hidden">
+                  <text fg={theme.text} wrapMode="none">
+                    {padRight(displayLabels[rowIndex]!, labelWidth)}  
+                  </text>
+                </box>
+                <box flexDirection="row" flexGrow={1} flexShrink={1} overflow="hidden">
+                  {row.values.map((value, seriesIndex) => {
+                    if (value <= 0) {
+                      return null
+                    }
+                    const series = seriesList[seriesIndex]!
+                    return (
+                      <box key={seriesIndex} flexGrow={value} flexBasis={0} flexShrink={1} overflow="hidden">
+                        <box position="absolute" width="100%" height="100%" overflow="hidden">
+                          <text fg={series.color} wrapMode="none">{barCharacter.repeat(200)}</text>
+                        </box>
+                      </box>
+                    )
+                  })}
+                  {maxTotal > row.total && (
+                    <box flexGrow={maxTotal - row.total} flexBasis={0} flexShrink={1} />
+                  )}
+                </box>
+              </box>
+            )
+          })}
+        </box>
+
+        {legendVisible && (
+          <box flexDirection="column" width={legendWidth} flexShrink={0} overflow="hidden">
+            {legendRows.map((row) => {
+              return (
+                <box key={row.title} height={1} flexShrink={0} flexDirection="row" overflow="hidden">
+                  <box width={legendGap} flexShrink={0} />
+                  <text fg={row.color} wrapMode="none">● </text>
+                  <text fg={theme.textMuted} wrapMode="none">
+                    {padRight(row.title, legendTitleWidth)}  {padLeft(row.percentage, legendPercentageWidth)}
+                  </text>
+                </box>
+              )
+            })}
+          </box>
+        )}
+      </box>
+    </box>
+  )
+}
+
+HorizontalBarGraph.Series = HorizontalBarGraphSeries
+
+export { HorizontalBarGraph }

package/src/components/list.tsx

@@ -374,6 +374,8 @@ export interface DropdownProps extends SearchBarInterface, CommonProps {
   storeValue?: boolean
   value?: string
   defaultValue?: string
+  /** Override the text shown in the search bar for the active selection. When set, this is displayed instead of the selected item's title. Useful for managed state where the display label doesn't match any dropdown item. */
+  displayValue?: string
   onChange?: (newValue: string) => void
   children?: ReactNode
 }
@@ -946,9 +948,9 @@ function ListItemRow(props: {
             <text flexShrink={0} fg={active ? theme.background : theme.text} attributes={active ? TextAttributes.BOLD : undefined} selectable={false} wrapMode="none">{active ? '›' : ' '}</text>
             {icon && <text flexShrink={0} fg={active ? theme.background : iconColor || theme.text} selectable={false} wrapMode="none">{getIconEmoji(icon)} </text>}
             <text
-              flexShrink={0}
+              flexShrink={1}
+              truncate
               fg={active ? theme.background : theme.text}
-
               attributes={TextAttributes.BOLD}
               selectable={false}
               wrapMode="none"
@@ -969,9 +971,10 @@ function ListItemRow(props: {
         </box>
         {/* Line 2: subtitle indented to align with title */}
         {subtitle && (
-          <box style={{ paddingLeft: subtitleIndent }}>
+          <box style={{ paddingLeft: subtitleIndent, overflow: 'hidden' }}>
             <text
-              flexShrink={0}
+              flexShrink={1}
+              truncate
               fg={active ? theme.background : theme.text}
               selectable={false}
               wrapMode="none"
@@ -1006,11 +1009,12 @@ function ListItemRow(props: {
       onMouseDown={handleMouseDown}
     >
       <box style={{ flexDirection: 'row', flexGrow: 1, flexShrink: 1, overflow: 'hidden', gap: 1 }}>
-        <box style={{ flexDirection: 'row', flexShrink: 0 }}>
+        <box style={{ flexDirection: 'row', flexShrink: 1, overflow: 'hidden' }}>
           <text flexShrink={0} fg={active ? theme.background : theme.text} attributes={active ? TextAttributes.BOLD : undefined} selectable={false} wrapMode="none">{active ? '›' : ' '}</text>
           {icon && <text flexShrink={0} fg={active ? theme.background : iconColor || theme.text} selectable={false} wrapMode="none">{getIconEmoji(icon)} </text>}
           <text
-            flexShrink={0}
+            flexShrink={1}
+            truncate
             fg={active ? theme.background : theme.text}
             attributes={active ? TextAttributes.BOLD : undefined}
             selectable={false}
@@ -1021,7 +1025,8 @@ function ListItemRow(props: {
         </box>
         {subtitle && (
           <text
-            flexShrink={0}
+            flexShrink={3}
+            truncate
             fg={active ? theme.background : theme.textMuted}
             selectable={false}
             wrapMode="none"
@@ -2127,9 +2132,9 @@ const ListDropdown: ListDropdownType = (props) => {
 
   const { isDropdownOpen, setIsDropdownOpen } = listContext
 
-  const setDropdownSelection = (props: { value: string; title: string }) => {
-    setDropdownState({ value: props.value, title: props.title })
-    useStore.setState({ dropdownFooterLabel: props.title || 'dropdown' })
+  const setDropdownSelection = (selectionProps: { value: string; title: string }) => {
+    setDropdownState({ value: selectionProps.value, title: selectionProps.title })
+    useStore.setState({ dropdownFooterLabel: props.displayValue ?? (selectionProps.title || 'dropdown') })
   }
   // Store both value and title together
   const [dropdownState, setDropdownState] = useState<{
@@ -2168,7 +2173,7 @@ const ListDropdown: ListDropdownType = (props) => {
 
     if (!valueToUse) {
       useStore.setState({
-        dropdownFooterLabel: dropdownState.title || 'dropdown',
+        dropdownFooterLabel: props.displayValue ?? (dropdownState.title || 'dropdown'),
       })
       return
     }
@@ -2189,8 +2194,8 @@ const ListDropdown: ListDropdownType = (props) => {
       return
     }
 
-    useStore.setState({ dropdownFooterLabel: title || 'dropdown' })
-  }, [props.value]) // Run when props.value changes and on mount
+    useStore.setState({ dropdownFooterLabel: props.displayValue ?? (title || 'dropdown') })
+  }, [props.value, props.displayValue]) // Run when props.value or displayValue changes and on mount
 
   const dropdownContextValue = useMemo<DropdownContextValue>(
     () => ({
@@ -2242,8 +2247,8 @@ const ListDropdown: ListDropdownType = (props) => {
     }
   }, [isDropdownOpen, props.children])
 
-  // Display the title from our state
-  const displayValue = dropdownState.title || 'All'
+  // Display the title from our state, or use the caller's override
+  const displayValue = props.displayValue ?? (dropdownState.title || 'All')
   const openDropdownIfClosed = () => {
     if (!isDropdownOpen) {
       listContext.openDropdown()

package/src/examples/action-shortcut.vitest.tsx

@@ -27,18 +27,18 @@ afterEach(() => {
 test('ctrl+r shortcut should trigger Refresh action directly', async () => {
   // Wait for list to render
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   const initial = await session.text()
-  expect(initial).toContain('Refresh count: 0')
+  expect(initial).toContain('nt: 0')
 
   // Press ctrl+r directly to trigger Refresh action
   await session.press(['ctrl', 'r'])
 
   // Wait for the refresh to take effect
   const afterCtrlR = await session.text({
-    waitFor: (text) => /Refresh count: 1/.test(text),
+    waitFor: (text) => /nt: 1/.test(text),
     timeout: 5000,
   })
   expect(afterCtrlR).toMatchInlineSnapshot(`
@@ -49,7 +49,7 @@ test('ctrl+r shortcut should trigger Refresh action directly', async () => {
 
        > Search...
 
-      ›Refresh count: 1 Press ctrl+r to refresh (shortcut) or Enter the
+      ›Refre...nt: 1Press ctrl+r to refresh ...nter then select Refresh
 
 
 
@@ -69,7 +69,7 @@ test('ctrl+r shortcut should trigger Refresh action directly', async () => {
 test('action shortcut is displayed in action panel', async () => {
   // Wait for list to render
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   // Open action panel with ctrl+k
@@ -110,30 +110,30 @@ test('action shortcut is displayed in action panel', async () => {
 test('action works via Enter (auto-execute first action)', async () => {
   // Wait for list to render
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   // Press Enter to auto-execute first action (Refresh)
   await session.press('return')
 
   const afterEnter = await session.text({
-    waitFor: (text) => /Refresh count: 1/.test(text),
+    waitFor: (text) => /nt: 1/.test(text),
     timeout: 5000,
   })
 
-  expect(afterEnter).toContain('Refresh count: 1')
+  expect(afterEnter).toContain('nt: 1')
 }, 30000)
 
 test('ctrl+x shortcut should trigger Reset action directly', async () => {
   // Wait for list to render and increment once via Enter
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   // Increment via Enter first
   await session.press('return')
   await session.text({
-    waitFor: (text) => /Refresh count: 1/.test(text),
+    waitFor: (text) => /nt: 1/.test(text),
     timeout: 5000,
   })
 
@@ -142,27 +142,27 @@ test('ctrl+x shortcut should trigger Reset action directly', async () => {
 
   // Wait for the reset to take effect
   const afterCtrlX = await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
     timeout: 5000,
   })
-  expect(afterCtrlX).toContain('Refresh count: 0')
+  expect(afterCtrlX).toContain('nt: 0')
 }, 30000)
 
 test('alt+d shortcut should trigger Double action directly', async () => {
   // Wait for list to render
   await session.text({
-    waitFor: (text) => /Refresh count: 0/.test(text),
+    waitFor: (text) => /nt: 0/.test(text),
   })
 
   // Increment twice via Enter to get count=2
   await session.press('return')
   await session.text({
-    waitFor: (text) => /Refresh count: 1/.test(text),
+    waitFor: (text) => /nt: 1/.test(text),
     timeout: 5000,
   })
   await session.press('return')
   await session.text({
-    waitFor: (text) => /Refresh count: 2/.test(text),
+    waitFor: (text) => /nt: 2/.test(text),
     timeout: 5000,
   })
 
@@ -171,8 +171,8 @@ test('alt+d shortcut should trigger Double action directly', async () => {
 
   // Wait for the double to take effect
   const afterAltD = await session.text({
-    waitFor: (text) => /Refresh count: 4/.test(text),
+    waitFor: (text) => /nt: 4/.test(text),
     timeout: 5000,
   })
-  expect(afterAltD).toContain('Refresh count: 4')
+  expect(afterAltD).toContain('nt: 4')
 }, 30000)

package/src/examples/bar-graph-weekly.tsx

@@ -151,7 +151,7 @@ function BarGraphWeeklyExample() {
           <List.Item.Detail
             metadata={
               <List.Item.Detail.Metadata>
-                <BarGraph height={10} labels={manyColsLabels}>
+                <BarGraph height={10} labels={manyColsLabels} barWidth={1}>
                   {manyColsSeries.map((s, i) => {
                     return <BarGraph.Series key={i} data={s.data} title={s.title} />
                   })}
@@ -261,4 +261,4 @@ function BarGraphWeeklyExample() {
   )
 }
 
-renderWithProviders(<BarGraphWeeklyExample />)
+void renderWithProviders(<BarGraphWeeklyExample />)