termcast 1.3.32 → 1.3.34

package/src/components/footer.tsx

@@ -2,8 +2,9 @@ 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 { useTheme } from 'termcast/src/theme'
 import { openInBrowser } from 'termcast/src/action-utils'
+import { termcastMaxContentWidth } from 'termcast/src/utils'
 import {
   useStore,
   toastPrimaryActionKey,
@@ -12,11 +13,6 @@ import {
 } 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
@@ -29,8 +25,12 @@ interface FooterProps {
 
 const MIN_WIDTH_FOR_POWERED_BY = 75
 
+const TOAST_MARGIN = 2
+
 function ToastInline({ toast }: { toast: ToastData }): any {
+  const theme = useTheme()
   const inFocus = useIsInFocus()
+  const { width: terminalWidth } = useTerminalDimensions()
   const [animationFrame, setAnimationFrame] = useState(0)
 
   // Keyboard handling for toast actions
@@ -91,66 +91,76 @@ function ToastInline({ toast }: { toast: ToastData }): any {
   const getIconColor = () => {
     switch (toast.style) {
       case 'SUCCESS':
-        return Theme.success
+        return theme.success
       case 'FAILURE':
-        return Theme.error
+        return theme.error
       case 'ANIMATED':
-        return Theme.primary
+        return theme.primary
       default:
-        return Theme.success
+        return theme.success
     }
   }
 
-  const primaryBg = Theme.primary
-  const primaryFg = getFgForBg(primaryBg)
-  const keysBg = colord(primaryBg).darken(0.06).toHex()
+  const primaryColor = theme.primary
+  const mutedColor = colord(primaryColor).darken(0.06).toHex()
+
+  const maxToastWidth = Math.min(terminalWidth, termcastMaxContentWidth)
+  const toastWidth = maxToastWidth - TOAST_MARGIN * 2
 
-  const hasKeys = !!toast.primaryAction?.title || !!toast.secondaryAction?.title
   return (
     <box
       flexDirection='row'
-      marginLeft={-3}
-      marginRight={-3}
-      flexGrow={1}
+      width={toastWidth}
+      marginLeft={-TOAST_MARGIN}
+      marginRight={-TOAST_MARGIN}
+      flexGrow={0}
+      flexShrink={0}
       overflow='hidden'
+      height={1}
     >
       {/* Title box */}
       <box
         flexDirection='row'
         flexShrink={0}
-        backgroundColor={colord(primaryBg).lighten(0.1).toHex()}
-        paddingLeft={3}
         paddingRight={1}
+        overflow='hidden'
+        height={1}
       >
-        <text flexShrink={0} fg={getIconColor()}>
+        <text flexShrink={0} fg={getIconColor()} wrapMode='none'>
           {getIcon()}{' '}
         </text>
-        <text flexShrink={0} fg={primaryFg} attributes={TextAttributes.BOLD}>
+        <text
+          flexShrink={1}
+          fg={primaryColor}
+          attributes={TextAttributes.BOLD}
+          wrapMode='none'
+        >
           {toast.title}
         </text>
       </box>
-      {/* Message/description box (in the middle with keys background) */}
+      {/* Message/description box */}
       <box
         flexGrow={1}
-        backgroundColor={keysBg}
+        flexShrink={1}
         paddingLeft={1}
         paddingRight={1}
         flexDirection='row'
         overflow='hidden'
+        height={1}
       >
-        <text fg={primaryFg} wrapMode='none'>
+        <text fg={mutedColor} flexShrink={1} 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}
+        overflow='hidden'
+        height={1}
       >
         {toast.primaryAction?.title && (
           <box
@@ -160,10 +170,17 @@ function ToastInline({ toast }: { toast: ToastData }): any {
               toast.primaryAction?.onAction()
             }}
           >
-            <text fg={primaryFg} attributes={TextAttributes.BOLD}>
+            <text
+              fg={mutedColor}
+              attributes={TextAttributes.BOLD}
+              wrapMode='none'
+            >
               {toast.primaryAction.title}
             </text>
-            <text fg={primaryFg}> ctrl t</text>
+            <text fg={mutedColor} wrapMode='none'>
+              {' '}
+              ctrl t
+            </text>
           </box>
         )}
         {toast.secondaryAction?.title && (
@@ -174,10 +191,17 @@ function ToastInline({ toast }: { toast: ToastData }): any {
               toast.secondaryAction?.onAction()
             }}
           >
-            <text fg={primaryFg} attributes={TextAttributes.BOLD}>
+            <text
+              fg={mutedColor}
+              attributes={TextAttributes.BOLD}
+              wrapMode='none'
+            >
               {toast.secondaryAction.title}
             </text>
-            <text fg={primaryFg}> ctrl g</text>
+            <text fg={mutedColor} wrapMode='none'>
+              {' '}
+              ctrl g
+            </text>
           </box>
         )}
       </box>
@@ -194,6 +218,7 @@ export function Footer({
   marginTop = 1,
   hidePoweredBy = false,
 }: FooterProps): any {
+  const theme = useTheme()
   const { width } = useTerminalDimensions()
   const showPoweredBy = !hidePoweredBy && width >= MIN_WIDTH_FOR_POWERED_BY
   const toast = useStore((state) => state.toast)
@@ -219,7 +244,7 @@ export function Footer({
           {children}
           {showPoweredBy && (
             <box flexDirection='row' gap={1}>
-              <text flexShrink={0} fg={Theme.textMuted}>
+              <text flexShrink={0} fg={theme.textMuted}>
                 powered by
               </text>
               <text
@@ -227,7 +252,7 @@ export function Footer({
                 onMouseDown={() => {
                   openInBrowser('https://termcast.app')
                 }}
-                fg={Theme.textMuted}
+                fg={theme.textMuted}
                 attributes={TextAttributes.BOLD}
               >
                 termcast

package/src/components/form/checkbox.tsx

@@ -5,8 +5,8 @@ import { useFormContext, Controller } from 'react-hook-form'
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
 import { logger } from 'termcast/src/logger'
-import { Theme } from 'termcast/src/theme'
-import { WithLeftBorder } from './with-left-border'
+import { useTheme } from 'termcast/src/theme'
+import { WithLeftBorder, TitleIndicator } from './with-left-border'
 import { useFormNavigation } from './use-form-navigation'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { LoadingText } from 'termcast/src/components/loading-text'
@@ -18,6 +18,7 @@ export interface CheckboxProps extends FormItemProps<boolean> {
 export type CheckboxRef = FormItemRef
 
 export const Checkbox = (props: CheckboxProps): any => {
+  const theme = useTheme()
   const { control, setValue, getValues } = useFormContext()
   const focusContext = useFocusContext()
   const { focusedField, setFocusedField } = focusContext
@@ -59,28 +60,28 @@ export const Checkbox = (props: CheckboxProps): any => {
       render={({ field, fieldState, formState }) => {
         return (
           <box ref={elementRef} flexDirection='column'>
-            <WithLeftBorder withDiamond isFocused={isFocused} isLoading={focusContext.isLoading}>
-              <box
-                onMouseDown={() => {
-                  // Always focus the field when clicked
-                  if (!isFocused) {
-                    setFocusedField(props.id)
-                  }
-                  // Always toggle the value when clicked
-                  handleToggle()
-                }}
-              >
-                <LoadingText
-                  isLoading={isFocused && focusContext.isLoading}
-                  color={isFocused ? Theme.primary : Theme.text}
+            <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
+              <TitleIndicator isFocused={isFocused} isLoading={focusContext.isLoading}>
+                <box
+                  onMouseDown={() => {
+                    // Always focus the field when clicked
+                    if (!isFocused) {
+                      setFocusedField(props.id)
+                    }
+                    // Always toggle the value when clicked
+                    handleToggle()
+                  }}
                 >
-                  {props.title || ''}
-                </LoadingText>
-              </box>
-            </WithLeftBorder>
-            <WithLeftBorder isFocused={isFocused}>
+                  <LoadingText
+                    isLoading={isFocused && focusContext.isLoading}
+                    color={isFocused ? theme.primary : theme.text}
+                  >
+                    {props.title || ''}
+                  </LoadingText>
+                </box>
+              </TitleIndicator>
               <text
-                fg={isFocused ? Theme.accent : Theme.text}
+                fg={isFocused ? theme.accent : theme.text}
                 selectable={false}
                 onMouseDown={() => {
                   if (!isFocused) {
@@ -91,17 +92,14 @@ export const Checkbox = (props: CheckboxProps): any => {
               >
                 {field.value ? '●' : '○'} {props.label}
               </text>
+              {(props.error || props.info) && <box height={1} />}
+              {props.error && (
+                <text fg={theme.error}>{props.error}</text>
+              )}
+              {props.info && (
+                <text fg={theme.textMuted}>{props.info}</text>
+              )}
             </WithLeftBorder>
-            {props.error && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.error}>{props.error}</text>
-              </WithLeftBorder>
-            )}
-            {props.info && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.textMuted}>{props.info}</text>
-              </WithLeftBorder>
-            )}
           </box>
         ) as React.ReactElement
       }}

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

@@ -4,8 +4,8 @@ import { useKeyboard } from '@opentui/react'
 import { useFormContext, Controller } from 'react-hook-form'
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
-import { Theme } from 'termcast/src/theme'
-import { WithLeftBorder } from './with-left-border'
+import { useTheme } from 'termcast/src/theme'
+import { WithLeftBorder, TitleIndicator } from './with-left-border'
 import { DatePickerWidget } from 'termcast/src/internal/date-picker-widget'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { useFormNavigationHelpers } from './use-form-navigation'
@@ -30,6 +30,7 @@ interface DatePickerComponentType {
 }
 
 const DatePickerComponent = (props: DatePickerProps): any => {
+  const theme = useTheme()
   const { control } = useFormContext()
   const focusContext = useFocusContext()
   const { focusedField, setFocusedField } = focusContext
@@ -44,21 +45,6 @@ const DatePickerComponent = (props: DatePickerProps): any => {
     elementRef: elementRef.current,
   })
 
-  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(props.id)
-
-  // Handle tab navigation only
-  useKeyboard((evt) => {
-    if (!isFocused || !isInFocus) return
-
-    if (evt.name === 'tab') {
-      if (evt.shift) {
-        navigateToPrevious()
-      } else {
-        navigateToNext()
-      }
-    }
-  })
-
   return (
     <Controller
       name={props.id}
@@ -67,21 +53,21 @@ const DatePickerComponent = (props: DatePickerProps): any => {
       render={({ field, fieldState, formState }) => {
         return (
           <box ref={elementRef} flexDirection='column'>
-            <WithLeftBorder withDiamond isFocused={isFocused} isLoading={focusContext.isLoading}>
-              <box
-                onMouseDown={() => {
-                  setFocusedField(props.id)
-                }}
-              >
-                <LoadingText
-                  isLoading={isFocused && focusContext.isLoading}
-                  color={isFocused ? Theme.primary : Theme.text}
+            <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
+              <TitleIndicator isFocused={isFocused} isLoading={focusContext.isLoading}>
+                <box
+                  onMouseDown={() => {
+                    setFocusedField(props.id)
+                  }}
                 >
-                  {props.title || ''}
-                </LoadingText>
-              </box>
-            </WithLeftBorder>
-            <WithLeftBorder isFocused={isFocused}>
+                  <LoadingText
+                    isLoading={isFocused && focusContext.isLoading}
+                    color={isFocused ? theme.primary : theme.text}
+                  >
+                    {props.title || ''}
+                  </LoadingText>
+                </box>
+              </TitleIndicator>
               <DatePickerWidget
                 enableColors={isFocused}
                 initialValue={field.value || undefined}
@@ -93,26 +79,20 @@ const DatePickerComponent = (props: DatePickerProps): any => {
                 }}
                 focused={isFocused}
               />
-            </WithLeftBorder>
-            {field.value && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.accent}>
+              {field.value && (
+                <text fg={theme.accent}>
                   Selected: {field.value.toISOString().split('T')[0]}
                 </text>
-              </WithLeftBorder>
-            )}
-            {(fieldState.error || props.error) && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.error}>
+              )}
+              {(fieldState.error || props.error) && (
+                <text fg={theme.error}>
                   {fieldState.error?.message || props.error}
                 </text>
-              </WithLeftBorder>
-            )}
-            {props.info && (
-              <WithLeftBorder isFocused={isFocused}>
-                <text fg={Theme.textMuted}>{props.info}</text>
-              </WithLeftBorder>
-            )}
+              )}
+              {props.info && (
+                <text fg={theme.textMuted}>{props.info}</text>
+              )}
+            </WithLeftBorder>
           </box>
         ) as React.ReactElement
       }}

package/src/components/form/description.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useId } from 'react'
 import { BoxRenderable, TextAttributes } from '@opentui/core'
-import { Theme } from 'termcast/src/theme'
-import { WithLeftBorder } from './with-left-border'
+import { useTheme } from 'termcast/src/theme'
+import { WithLeftBorder, TitleIndicator } from './with-left-border'
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { useFormNavigation } from './use-form-navigation'
 import { LoadingText } from 'termcast/src/components/loading-text'
@@ -13,9 +13,10 @@ export interface DescriptionProps {
   isFormTitle?: boolean
 }
 
-export const FORM_MAX_WIDTH = 70
+export const FORM_MAX_WIDTH = 120
 
 export const Description = (props: DescriptionProps): any => {
+  const theme = useTheme()
   const elementRef = useRef<BoxRenderable>(null)
   const autoId = useId()
   const id = props.id || autoId
@@ -41,22 +42,22 @@ export const Description = (props: DescriptionProps): any => {
         focusContext.setFocusedField(id)
       }}
     >
-      {props.title && (
-        <WithLeftBorder
-          customCharacter={{ focused: '■', unfocused: '▪︎' }}
-          isFocused={isFocused}
-          isLoading={focusContext.isLoading}
-        >
-          <LoadingText
-            isLoading={isFocused && focusContext.isLoading}
-            color={isFocused ? Theme.primary : Theme.text}
+      <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
+        {props.title && (
+          <TitleIndicator
+            isFocused={isFocused}
+            isLoading={focusContext.isLoading}
+            customCharacter={{ focused: '■', unfocused: '▪︎' }}
           >
-            {props.title}
-          </LoadingText>
-        </WithLeftBorder>
-      )}
-      <WithLeftBorder isFocused={isFocused}>
-        <text fg={Theme.textMuted}>{props.text}</text>
+            <LoadingText
+              isLoading={isFocused && focusContext.isLoading}
+              color={isFocused ? theme.primary : theme.text}
+            >
+              {props.title}
+            </LoadingText>
+          </TitleIndicator>
+        )}
+        <text fg={theme.textMuted}>{props.text}</text>
       </WithLeftBorder>
     </box>
   )