termcast 1.3.50 → 1.3.52

package/src/components/form/index.tsx

@@ -15,7 +15,7 @@ import { useDialog } from 'termcast/src/internal/dialog'
 import { Offscreen } from 'termcast/src/internal/offscreen'
 import { useTheme } from 'termcast/src/theme'
 import { useStore } from 'termcast/src/state'
-import { Footer } from 'termcast/src/components/footer'
+import { Footer, Hoverable } from 'termcast/src/components/footer'
 import {
   TextAttributes,
   ScrollBoxRenderable,
@@ -77,7 +77,7 @@ export const useFormScrollContext = () => {
 // Context for managing focused field and loading state
 interface FocusContextValue {
   focusedField: string | null
-  setFocusedField: (id: string | null) => void
+  setFocusedField: (id: string | null, opts?: { skipScroll?: boolean }) => void
   isLoading: boolean
 }
 
@@ -121,12 +121,16 @@ function FormFooter(): any {
         </text>
         <text flexShrink={0} fg={theme.textMuted}>navigate</text>
       </box>
-      <box style={{ flexDirection: 'row', gap: 1 }}>
+      <Hoverable
+        onMouseDown={() => {
+          useStore.setState({ showActionsDialog: true })
+        }}
+      >
         <text flexShrink={0} fg={theme.text} attributes={TextAttributes.BOLD}>
           ^k
         </text>
         <text flexShrink={0} fg={theme.textMuted}>actions</text>
-      </box>
+      </Hoverable>
     </box>
   )
 
@@ -221,11 +225,11 @@ export const Form: FormType = ((props) => {
     scrollBox.scrollTo(Math.max(0, targetScrollTop))
   }
 
-  const setFocusedField = (id: string | null) => {
+  const setFocusedField = (id: string | null, opts?: { skipScroll?: boolean }) => {
     flushSync(() => {
       setFocusedFieldRaw(id)
     })
-    if (id) {
+    if (id && !opts?.skipScroll) {
       scrollToField(id)
     }
   }
@@ -330,7 +334,7 @@ export const Form: FormType = ((props) => {
       return
     }
 
-    if (evt.name === 'k' && evt.ctrl) {
+    if (evt.name === 'k' && (evt.ctrl || evt.super)) {
       // 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)) {

package/src/components/form/password-field.tsx

@@ -40,12 +40,12 @@ export const PasswordField = (props: PasswordFieldProps): any => {
         const displayValue = '*'.repeat(displayLength)
 
         return (
-          <box ref={elementRef} flexDirection="column">
+          <box ref={elementRef} flexDirection="column" onMouseDown={() => { setFocusedField(props.id, { skipScroll: true }) }}>
             <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
               <TitleIndicator isFocused={isFocused} isLoading={focusContext.isLoading}>
                 <box
                   onMouseDown={() => {
-                    setFocusedField(props.id)
+                    setFocusedField(props.id, { skipScroll: true })
                   }}
                 >
                   <LoadingText
@@ -83,7 +83,7 @@ export const PasswordField = (props: PasswordFieldProps): any => {
                 placeholder={props.placeholder}
                 focused={isFocused}
                 onMouseDown={() => {
-                  setFocusedField(props.id)
+                  setFocusedField(props.id, { skipScroll: true })
                 }}
               />
               {(fieldState.error || props.error || props.info) && <box height={1} />}

package/src/components/form/text-area.tsx

@@ -1,12 +1,14 @@
 import React, { useRef, useCallback } from 'react'
 import { BoxRenderable, TextareaRenderable } from '@opentui/core'
+import { useKeyboard } from '@opentui/react'
 import { useFormContext } from 'react-hook-form'
 import { useFocusContext, useFormFieldDescendant } from './index'
 import { FormItemProps, FormItemRef } from './types'
 import { useTheme } from 'termcast/src/theme'
 import { WithLeftBorder, TitleIndicator } from './with-left-border'
-import { useFormNavigation } from './use-form-navigation'
+import { useFormNavigation, useFormNavigationHelpers } from './use-form-navigation'
 import { createTextareaFormRef } from './form-ref'
+import { useIsInFocus } from 'termcast/src/internal/focus-context'
 import { LoadingText } from 'termcast/src/components/loading-text'
 
 export interface TextAreaProps extends FormItemProps<string> {
@@ -21,7 +23,9 @@ export const TextArea = (props: TextAreaProps): any => {
   const { register, formState } = useFormContext()
   const focusContext = useFocusContext()
   const { focusedField, setFocusedField } = focusContext
+  const isInFocus = useIsInFocus()
   const isFocused = focusedField === props.id
+  const { navigateToPrevious, navigateToNext } = useFormNavigationHelpers(props.id)
 
   const elementRef = useRef<BoxRenderable>(null)
   const textareaRef = useRef<TextareaRenderable>(null)
@@ -32,8 +36,29 @@ export const TextArea = (props: TextAreaProps): any => {
     elementRef: elementRef.current,
   })
 
-  // TODO in textarea arrows should probably go to lines instead of other forms
-  useFormNavigation(props.id)
+  useFormNavigation(props.id, { handleArrows: false })
+
+  useKeyboard((evt) => {
+    if (!isFocused || !isInFocus) return
+    if (evt.name !== 'up' && evt.name !== 'down') return
+
+    const textarea = textareaRef.current
+    if (!textarea) return
+
+    const cursorLine = textarea.logicalCursor.row
+    const lastLine = textarea.lineCount - 1
+
+    if (evt.name === 'up' && cursorLine <= 0) {
+      navigateToPrevious()
+      evt.stopPropagation()
+      return
+    }
+
+    if (evt.name === 'down' && cursorLine >= lastLine) {
+      navigateToNext()
+      evt.stopPropagation()
+    }
+  })
 
   // Get register props
   const registration = register(props.id)
@@ -60,12 +85,12 @@ export const TextArea = (props: TextAreaProps): any => {
   const fieldError = formState.errors[props.id]
 
   return (
-    <box ref={elementRef} flexDirection="column">
+    <box ref={elementRef} flexDirection="column" onMouseDown={() => { setFocusedField(props.id, { skipScroll: true }) }}>
       <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
         <TitleIndicator isFocused={isFocused} isLoading={focusContext.isLoading}>
           <box
             onMouseDown={() => {
-              setFocusedField(props.id)
+              setFocusedField(props.id, { skipScroll: true })
             }}
           >
             <LoadingText
@@ -86,7 +111,7 @@ export const TextArea = (props: TextAreaProps): any => {
             placeholder={props.placeholder}
             focused={isFocused}
             onMouseDown={() => {
-              setFocusedField(props.id)
+              setFocusedField(props.id, { skipScroll: true })
             }}
           />
         </box>

package/src/components/form/text-field.tsx

@@ -61,12 +61,12 @@ export const TextField = (props: TextFieldProps): any => {
   const fieldError = formState.errors[props.id]
 
   return (
-    <box ref={elementRef} flexDirection="column">
+    <box ref={elementRef} flexDirection="column" onMouseDown={() => { setFocusedField(props.id, { skipScroll: true }) }}>
       <WithLeftBorder isFocused={isFocused} paddingBottom={1}>
         <TitleIndicator isFocused={isFocused} isLoading={focusContext.isLoading}>
           <box
             onMouseDown={() => {
-              setFocusedField(props.id)
+              setFocusedField(props.id, { skipScroll: true })
             }}
           >
             <LoadingText
@@ -90,7 +90,7 @@ export const TextField = (props: TextFieldProps): any => {
           placeholder={props.placeholder}
           focused={isFocused}
           onMouseDown={() => {
-            setFocusedField(props.id)
+            setFocusedField(props.id, { skipScroll: true })
           }}
         />
         {(fieldError || props.error || props.info) && <box height={1} />}

package/src/components/graph.tsx

@@ -38,14 +38,15 @@ import { Color, resolveColor } from 'termcast/src/colors'
 export type GraphVariant = 'area' | 'filled' | 'striped'
 
 // ── Block characters for Filled/Striped modes ───────────────────────
-// We use ▀/▄ with fg+bg color encoding to eliminate the tiny gaps
-// some terminals show between adjacent █ rows.
-// ▀ = top half drawn with fg, bottom half shows bg
-// ▄ = bottom half drawn with fg, top half shows bg
-// ▁ = lower 1/8 block, used as a thin baseline for zero/minimum values
-const UPPER_HALF = '▀'    // U+2580
-const LOWER_HALF = '▄'    // U+2584
-const LOWER_EIGHTH = '▁'  // U+2581
+// We use left-half and quadrant characters so each bar column is 50%
+// cell width, creating visible vertical gaps between adjacent bars.
+// ▌ = left half block (full height, left 50%)
+// ▘ = quadrant upper left (top half height, left 50%)
+// ▖ = quadrant lower left (bottom half height, left 50%)
+// All three align at left 50%, maintaining 2x vertical sub-row resolution.
+const LEFT_HALF = '▌'     // U+258C
+const QUAD_UL = '▘'       // U+2598
+const QUAD_LL = '▖'       // U+2596
 
 // ── Braille bit map ──────────────────────────────────────────────────
 // Maps (subCol, subRow) to the braille bit for that dot position.
@@ -287,8 +288,8 @@ export class GraphPlotRenderable extends Renderable {
   }
 
   // ── Style: Filled / Striped (block characters) ───────────────
-  // Always uses ▀ (upper-half block) with fg=top color, bg=bottom color.
-  // This eliminates the tiny gaps some terminals show between adjacent █ rows.
+  // Uses left-half and quadrant characters for thin bars with visible gaps.
+  // ▌ (left half) for full rows, ▘/▖ (quadrants) for top/bottom edge rows.
   // Filled: every column uses the series color.
   // Striped: all columns filled, even cols = stripeColor1, odd = stripeColor2.
   //          Pass a transparent color to skip those columns (gap-style bars).
@@ -323,10 +324,10 @@ export class GraphPlotRenderable extends Renderable {
         const topVRow = lineY[col]!
         if (topVRow >= virtualH) continue
 
-        // Fill from topVRow down to virtualH-1 using ▀/▄ with fg+bg encoding.
-        // ▀: fg paints top half, bg paints bottom half.
-        // ▄: fg paints bottom half, bg paints top half.
-        // We never set fg=transparent on a visible glyph part (would show as black).
+        // Fill from topVRow down using left-half/quadrant chars.
+        // ▌: full height left-half (both sub-rows filled)
+        // ▘: upper-left quadrant (top sub-row only)
+        // ▖: lower-left quadrant (bottom sub-row only)
         for (let row = 0; row < plotH; row++) {
           const vTop = row * 2       // virtual row for top half
           const vBot = row * 2 + 1   // virtual row for bottom half
@@ -336,18 +337,14 @@ export class GraphPlotRenderable extends Renderable {
           if (!topFilled && !botFilled) continue
 
           if (topFilled && botFilled) {
-            // Both halves: ▀ with fg=color, bg=color → seamless full block
-            buffer.setCell(plotX + col, plotY + row, UPPER_HALF, fillColor, fillColor)
+            // Both halves: ▌ left half block
+            buffer.setCell(plotX + col, plotY + row, LEFT_HALF, fillColor, transparent)
           } else if (topFilled) {
-            // Top only: ▀ with fg=color, bg=transparent
-            buffer.setCell(plotX + col, plotY + row, UPPER_HALF, fillColor, transparent)
-          } else if (topVRow >= virtualH - 1) {
-            // Minimum fill: only the very last virtual row is filled (zero/min value).
-            // Use ▁ (lower 1/8 block) for a thin baseline indicator.
-            buffer.setCell(plotX + col, plotY + row, LOWER_EIGHTH, fillColor, transparent)
+            // Top only: ▘ quadrant upper left
+            buffer.setCell(plotX + col, plotY + row, QUAD_UL, fillColor, transparent)
           } else {
-            // Bottom only: ▄ with fg=color, bg=transparent
-            buffer.setCell(plotX + col, plotY + row, LOWER_HALF, fillColor, transparent)
+            // Bottom only: ▖ quadrant lower left
+            buffer.setCell(plotX + col, plotY + row, QUAD_LL, fillColor, transparent)
           }
         }
       }