termcast 1.3.48 → 1.3.50

package/src/components/bar-graph.tsx

@@ -0,0 +1,214 @@
+/**
+ * BarGraph component for rendering vertical stacked bar charts in the terminal.
+ *
+ * Pure React/opentui implementation using <box> elements with justifyContent
+ * "space-evenly" for bar distribution. Each bar is a column of stacked colored
+ * segments sized via flexGrow. Labels sit below each bar, truncated with
+ * overflow="hidden" when the bar is narrower than the label text.
+ *
+ * Legend is a compact row of ■ Title pairs, no border.
+ *
+ * Color palette (same as Graph and BarChart):
+ *   accent, info, success, warning, error, secondary, primary (cycles with %)
+ */
+
+import React, { ReactNode, useMemo } from 'react'
+import { BoxProps } from '@opentui/react'
+import { useTheme, getThemePalette } from 'termcast/src/theme'
+import { Color, resolveColor } from 'termcast/src/colors'
+
+// ── Types ────────────────────────────────────────────────────────────
+
+export interface BarGraphSeriesProps {
+  /** One value per bar position */
+  data: number[]
+  /** Override the auto-assigned color */
+  color?: Color.ColorLike
+  /** Series label shown in legend */
+  title?: string
+}
+
+export interface BarGraphProps extends BoxProps {
+  /** Height of the bar area in terminal rows (default: 15) */
+  height?: number
+  /** X-axis labels, one per bar position */
+  labels?: string[]
+  /** Show compact legend below the chart (default: true when any series has a title) */
+  showLegend?: boolean
+  /** BarGraph.Series children */
+  children: ReactNode
+}
+
+interface BarGraphType {
+  (props: BarGraphProps): any
+  Series: (props: BarGraphSeriesProps) => any
+}
+
+// ── Internal types ───────────────────────────────────────────────────
+
+interface CollectedSeries {
+  data: number[]
+  color: string
+  title?: string
+}
+
+// ── BarGraph.Series (data-only, renders null like Graph.Line) ────────
+
+const BarGraphSeries = (_props: BarGraphSeriesProps): any => {
+  return null
+}
+
+// ── Main BarGraph component ──────────────────────────────────────────
+
+const BarGraph: BarGraphType = (props) => {
+  const theme = useTheme()
+  const { height = 15, labels = [], showLegend, children, ...rest } = props
+
+  const palette = getThemePalette(theme)
+
+  // Collect series from children
+  const seriesList = useMemo<CollectedSeries[]>(() => {
+    const result: CollectedSeries[] = []
+    let colorIndex = 0
+    React.Children.forEach(children, (child) => {
+      if (!React.isValidElement(child)) {
+        return
+      }
+      const childProps = child.props as BarGraphSeriesProps
+      if (!childProps.data) {
+        return
+      }
+      const color = resolveColor(childProps.color) || palette[colorIndex % palette.length]!
+      result.push({
+        data: childProps.data,
+        color,
+        title: childProps.title,
+      })
+      colorIndex++
+    })
+    return result
+  }, [children, palette])
+
+  // Compute number of bars from max data length across series
+  const numBars = useMemo(() => {
+    return Math.max(0, ...seriesList.map((s) => s.data.length))
+  }, [seriesList])
+
+  // Compute stacked totals per bar position and the global max
+  const { stackedTotals, maxTotal } = useMemo(() => {
+    const totals: number[] = []
+    for (let i = 0; i < numBars; i++) {
+      let sum = 0
+      for (const series of seriesList) {
+        sum += series.data[i] || 0
+      }
+      totals.push(sum)
+    }
+    const max = Math.max(0, ...totals)
+    return { stackedTotals: totals, maxTotal: max }
+  }, [seriesList, numBars])
+
+  // Whether to show legend: explicit prop, or auto when any series has a title
+  const legendVisible = showLegend ?? seriesList.some((s) => s.title)
+
+  if (numBars === 0 || maxTotal === 0) {
+    return null
+  }
+
+  return (
+    <box flexDirection="column" {...rest}>
+      {/* Bars area: overflow="hidden" clips excess bars when there are too many.
+          alignItems="flex-start" left-aligns bars in wide containers. */}
+      <box flexDirection="row" height={height} width="100%" alignItems="flex-start" overflow="hidden">
+        {Array.from({ length: numBars }, (_, barIdx) => {
+          const barTotal = stackedTotals[barIdx]!
+          const emptyGrow = maxTotal - barTotal
+          const label = labels[barIdx]
+
+          const barElements: any[] = []
+
+          // Min 1-col gap between bars (not before the first bar)
+          if (barIdx > 0) {
+            barElements.push(
+              <box key={`gap-${barIdx}`} width={1} flexShrink={0} />
+            )
+          }
+
+          barElements.push(
+            <box
+              key={barIdx}
+              flexDirection="column"
+              height="100%"
+              flexGrow={0}
+              flexShrink={0}
+              width={3}
+            >
+              {/* Plot area: spacer on top pushes colored segments to the bottom
+                  so all bars are bottom-aligned regardless of total value. */}
+              <box flexDirection="column" flexGrow={1} width="100%">
+                {emptyGrow > 0 && (
+                  <box flexGrow={emptyGrow} />
+                )}
+                {/* Segments: last series at top, first at bottom.
+                    Each segment uses backgroundColor for the visual fill, plus
+                    a single █ with matching fg so bars appear in text snapshots.
+                    wrapMode="none" prevents text from expanding the segment height. */}
+                {[...seriesList].reverse().map((series, reverseIdx) => {
+                  const value = series.data[barIdx] || 0
+                  if (value <= 0) {
+                    return null
+                  }
+                  return (
+                    <box
+                      key={reverseIdx}
+                      flexGrow={value}
+                      backgroundColor={series.color}
+                      width="100%"
+                      minHeight={1}
+                      overflow="hidden"
+                    >
+                      {/* Absolute-positioned text doesn't affect flex layout.
+                          The parent height is purely from flexGrow. The text
+                          wraps to fill the area and gets clipped. */}
+                      <box position="absolute" width="100%" height="100%" overflow="hidden">
+                        <text fg={series.color}>{'█'.repeat(200)}</text>
+                      </box>
+                    </box>
+                  )
+                })}
+              </box>
+              {/* X-axis label */}
+              {label !== undefined && (
+                <box height={1} width="100%" overflow="hidden" flexShrink={0}>
+                  <text wrapMode="none" fg={theme.textMuted}>{label}</text>
+                </box>
+              )}
+            </box>
+          )
+
+          return barElements
+        })}
+      </box>
+      {/* Legend: single line, no wrap, clips when too many series */}
+      {legendVisible && (
+        <box height={1} width="100%" flexShrink={0} overflow="hidden">
+          <text wrapMode="none">
+            {seriesList.filter((s) => s.title).map((series, i, arr) => {
+              const sep = i < arr.length - 1 ? ' ' : ''
+              return (
+                <React.Fragment key={i}>
+                  <span fg={series.color}>■ </span>
+                  <span fg={theme.textMuted}>{series.title}{sep}</span>
+                </React.Fragment>
+              )
+            })}
+          </text>
+        </box>
+      )}
+    </box>
+  )
+}
+
+BarGraph.Series = BarGraphSeries
+
+export { BarGraph }

package/src/components/detail.tsx

@@ -72,7 +72,7 @@ const DetailMetadata: DetailMetadataType = (props) => {
   const config: MetadataConfig = {
     maxValueLen: 9999, // No limit - let text wrap naturally
     titleMinWidth: computedTitleWidth,
-    paddingBottom: 1,
+    paddingBottom: 0,
     // Keep separators deterministic by rendering a fixed number of chars.
     // The content area has paddingRight=2 in <Detail>, so leave some margin.
     separatorWidth: Math.max(20, width - 6),
@@ -81,6 +81,7 @@ const DetailMetadata: DetailMetadataType = (props) => {
   return (
     <MetadataContext.Provider value={config}>
       <box
+        gap={1}
         style={{
           flexDirection: 'column',
           paddingTop: 1,
@@ -195,10 +196,8 @@ const Detail: DetailType = (props) => {
     if (!inFocus) return
 
     if (evt.name === 'k' && evt.ctrl) {
-      // Ctrl+K shows actions dialog via portal
-      if (actions) {
-        useStore.setState({ showActionsDialog: true })
-      }
+      // Always open — built-in actions (Change Theme, etc.) are always available
+      useStore.setState({ showActionsDialog: true })
     } else if (evt.name === 'return' && actions) {
       // Enter auto-executes first action via ActionPanel's layout effect
       useStore.setState({ shouldAutoExecuteFirstAction: true })
@@ -236,11 +235,11 @@ const Detail: DetailType = (props) => {
     <box style={{ flexDirection: 'column', height: '100%', flexGrow: 1 }}>
       {content}
       <DetailFooter
-        hasActions={!!actions}
+        hasActions={true}
         firstActionTitle={firstActionTitle}
       />
-      {/* Render actions offscreen to capture them */}
-      {actions && <Offscreen>{actions}</Offscreen>}
+      {/* Always mount ActionPanel offscreen so built-in actions are available */}
+      <Offscreen>{actions || <ActionPanel />}</Offscreen>
     </box>
   )
 }

package/src/components/footer.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode, useState, useEffect } from 'react'
 import { TextAttributes } from '@opentui/core'
 import { useTerminalDimensions, useKeyboard } from '@opentui/react'
-import { colord } from 'colord'
+
 import { useTheme } from 'termcast/src/theme'
 import { openInBrowser } from 'termcast/src/action-utils'
 import { termcastMaxContentWidth } from 'termcast/src/utils'
@@ -88,7 +88,8 @@ function ToastInline({ toast }: { toast: ToastData }): any {
     }
   }
 
-  const getIconColor = () => {
+  // All toast styles use a colored background with contrasting text
+  const toastBg = (() => {
     switch (toast.style) {
       case 'SUCCESS':
         return theme.success
@@ -99,10 +100,8 @@ function ToastInline({ toast }: { toast: ToastData }): any {
       default:
         return theme.success
     }
-  }
-
-  const primaryColor = theme.primary
-  const mutedColor = colord(primaryColor).darken(0.06).toHex()
+  })()
+  const toastFg = theme.background
 
   const maxToastWidth = Math.min(terminalWidth, termcastMaxContentWidth)
   const toastWidth = maxToastWidth - TOAST_MARGIN * 2
@@ -117,6 +116,7 @@ function ToastInline({ toast }: { toast: ToastData }): any {
       flexShrink={0}
       overflow='hidden'
       height={1}
+      backgroundColor={toastBg}
     >
       {/* Title box */}
       <box
@@ -126,12 +126,12 @@ function ToastInline({ toast }: { toast: ToastData }): any {
         overflow='hidden'
         height={1}
       >
-        <text flexShrink={0} fg={getIconColor()} wrapMode='none'>
+        <text flexShrink={0} fg={toastFg} wrapMode='none'>
           {getIcon()}{' '}
         </text>
         <text
           flexShrink={1}
-          fg={primaryColor}
+          fg={toastFg}
           attributes={TextAttributes.BOLD}
           wrapMode='none'
         >
@@ -148,14 +148,13 @@ function ToastInline({ toast }: { toast: ToastData }): any {
         overflow='hidden'
         height={1}
       >
-        <text fg={mutedColor} flexShrink={1} wrapMode='none'>
+        <text fg={toastFg} flexShrink={1} wrapMode='none'>
           {toast.message || ''}
         </text>
       </box>
       {/* Keys box (right aligned, no grow) */}
       <box
         paddingLeft={1}
-
         gap={1}
         flexDirection='row'
         flexShrink={0}
@@ -171,13 +170,13 @@ function ToastInline({ toast }: { toast: ToastData }): any {
             }}
           >
             <text
-              fg={mutedColor}
+              fg={toastFg}
               attributes={TextAttributes.BOLD}
               wrapMode='none'
             >
               {toast.primaryAction.title}
             </text>
-            <text fg={mutedColor} wrapMode='none'>
+            <text fg={toastFg} wrapMode='none'>
               {' '}
               ctrl t
             </text>
@@ -192,13 +191,13 @@ function ToastInline({ toast }: { toast: ToastData }): any {
             }}
           >
             <text
-              fg={mutedColor}
+              fg={toastFg}
               attributes={TextAttributes.BOLD}
               wrapMode='none'
             >
               {toast.secondaryAction.title}
             </text>
-            <text fg={mutedColor} wrapMode='none'>
+            <text fg={toastFg} wrapMode='none'>
               {' '}
               ctrl g
             </text>
@@ -257,7 +256,7 @@ export function Footer({
                 fg={theme.textMuted}
                 attributes={TextAttributes.BOLD}
               >
-                termcast
+                termcast.app
               </text>
             </box>
           )}

package/src/components/form/date-picker.tsx

@@ -34,6 +34,9 @@ const DatePickerComponent = (props: DatePickerProps): any => {
   const { control } = useFormContext()
   const focusContext = useFocusContext()
   const { focusedField, setFocusedField } = focusContext
+  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(
+    props.id,
+  )
   const isFocused = focusedField === props.id
   const isInFocus = useIsInFocus()
 
@@ -71,6 +74,12 @@ const DatePickerComponent = (props: DatePickerProps): any => {
               <DatePickerWidget
                 enableColors={isFocused}
                 initialValue={field.value || undefined}
+                onFirstRowUpKey={() => {
+                  navigateToPrevious()
+                }}
+                onLastRowDownKey={() => {
+                  navigateToNext()
+                }}
                 onChange={(date) => {
                   field.onChange(date)
                   if (props.onChange) {

package/src/components/form/dropdown.tsx

@@ -198,6 +198,9 @@ const DropdownContent = ({
   const isInFocus = useIsInFocus()
   const focusContext = useFocusContext()
   const { focusedField, setFocusedField } = focusContext
+  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(
+    props.id,
+  )
   const isFocused = focusedField === props.id
   const [focusedIndex, setFocusedIndex] = useState(0)
 
@@ -295,7 +298,6 @@ const DropdownContent = ({
   // Handle keyboard navigation when focused
   useKeyboard((evt) => {
     if (!isFocused || !isInFocus) return
-
     const items = Object.values(descendantsContext.committedMap)
       .filter((item) => item.index !== -1)
       .sort((a, b) => a.index - b.index)
@@ -303,7 +305,11 @@ const DropdownContent = ({
 
     if (itemCount > 0) {
       if (evt.name === 'down') {
-        if (focusedIndex >= itemCount - 1) return
+        if (focusedIndex >= itemCount - 1) {
+          navigateToNext()
+          evt.stopPropagation()
+          return
+        }
         const nextIndex = focusedIndex + 1
         const nextItem = items[nextIndex]
         if (nextItem) {
@@ -313,7 +319,11 @@ const DropdownContent = ({
           scrollToItemIfNeeded({ item: nextItem, direction: 1 })
         }
       } else if (evt.name === 'up') {
-        if (focusedIndex <= 0) return
+        if (focusedIndex <= 0) {
+          navigateToPrevious()
+          evt.stopPropagation()
+          return
+        }
         const nextIndex = focusedIndex - 1
         const nextItem = items[nextIndex]
         if (nextItem) {

package/src/components/form/index.tsx

@@ -331,10 +331,8 @@ export const Form: FormType = ((props) => {
     }
 
     if (evt.name === 'k' && evt.ctrl) {
-      // Ctrl+K shows actions dialog via portal
-      if (props.actions) {
-        useStore.setState({ showActionsDialog: true })
-      }
+      // Always open — built-in actions (Change Theme, etc.) are always available
+      useStore.setState({ showActionsDialog: true })
     } else if ((evt.name === 'return' && evt.ctrl) || (evt.name === 'return' && evt.meta)) {
       // Ctrl+Return or Cmd+Return auto-executes first action via ActionPanel
       if (props.actions) {
@@ -413,8 +411,8 @@ export const Form: FormType = ((props) => {
                   </box>
                 </ScrollBox>
                 <FormFooter />
-                {/* Render actions offscreen to capture them with FormSubmitContext */}
-                {props.actions && <Offscreen>{props.actions}</Offscreen>}
+                {/* Always mount ActionPanel offscreen so built-in actions are available */}
+                <Offscreen>{props.actions || <ActionPanel />}</Offscreen>
               </box>
             </box>
           </FocusContext.Provider>

package/src/components/form/use-form-navigation.tsx

@@ -68,11 +68,17 @@ export function useFormNavigation(
       } else {
         navigateToNext()
       }
+      evt.stopPropagation()
     } else if (handleArrows) {
+      // Prevent the newly-focused field from also processing this arrow.
+      // setFocusedField uses flushSync which updates all useKeyboard handler
+      // refs via useEffectEvent before the next handler in the dispatch loop runs.
       if (evt.name === 'up') {
         navigateToPrevious()
+        evt.stopPropagation()
       } else if (evt.name === 'down') {
         navigateToNext()
+        evt.stopPropagation()
       }
     }
   })