termcast 1.3.9 → 1.3.16

package/src/examples/internal/descendants-filtering.tsx

@@ -1,8 +1,9 @@
 // This example shows how to filter descendants by passing search query via context
 // Items conditionally render null when they don't match the search
 import { useKeyboard } from '@opentui/react'
+import { TextareaRenderable } from '@opentui/core'
 import { createDescendants } from 'termcast/src/descendants'
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useState, useRef } from 'react'
 import { renderWithProviders } from '../../utils'
 import { logger } from 'termcast/src/logger'
 
@@ -36,6 +37,7 @@ const Menu = ({ children }: { children: React.ReactNode }) => {
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
   const [selectedTitles, setSelectedTitles] = useState<string[]>([])
   const [searchQuery, setSearchQuery] = useState('')
+  const inputRef = useRef<TextareaRenderable>(null)
 
   useKeyboard((evt) => {
     const items = Object.values(descendantsContext.map.current).filter(
@@ -125,9 +127,15 @@ const Menu = ({ children }: { children: React.ReactNode }) => {
         <box flexDirection='column'>
           <box flexDirection='column' borderStyle='single' padding={1}>
             <text marginBottom={1}>Filter Menu</text>
-            <input
-              value={searchQuery}
-              onInput={(value) => {
+            <textarea
+              ref={inputRef}
+              height={1}
+              keyBindings={[
+                { name: 'return', action: 'submit' },
+                { name: 'linefeed', action: 'submit' },
+              ]}
+              onContentChange={() => {
+                const value = inputRef.current?.plainText || ''
                 setSearchQuery(value)
                 // Reset focus to first item when search changes
                 setFocusedIndex(0)
@@ -220,4 +228,4 @@ const Example = () => {
   )
 }
 
-renderWithProviders(<Example />)
+await renderWithProviders(<Example />)

package/src/examples/internal/descendants.tsx

@@ -1,9 +1,10 @@
 // read src/descendants.tsx to understand the core hooks that make this example possible
 //
 import { useKeyboard } from '@opentui/react'
+import { TextareaRenderable } from '@opentui/core'
 import { createDescendants } from 'termcast/src/descendants'
 import { useIsInFocus } from 'termcast/src/internal/focus-context'
-import { createContext, useContext, useState } from 'react'
+import { createContext, useContext, useState, useRef, useLayoutEffect } from 'react'
 import { renderWithProviders } from '../../utils'
 import { logger } from 'termcast/src/logger'
 
@@ -167,6 +168,7 @@ const Item = ({ title }: { title: string; key?: any }) => {
 
 const Example = () => {
   const [searchQuery, setSearchQuery] = useState('')
+  const inputRef = useRef<TextareaRenderable>(null)
   const allItems = [
     'First Item',
     'Second Item',
@@ -182,6 +184,7 @@ const Example = () => {
     'Twelfth Item',
   ]
 
+
   // Filter items based on search query
   const filteredItems = allItems.filter((title) =>
     title.toLowerCase().includes(searchQuery.toLowerCase()),
@@ -189,9 +192,18 @@ const Example = () => {
 
   return (
     <box flexDirection='column'>
-      <input
-        value={searchQuery}
-        onInput={setSearchQuery}
+      <textarea
+        ref={inputRef}
+        height={1}
+        keyBindings={[
+          { name: 'return', action: 'submit' },
+          { name: 'linefeed', action: 'submit' },
+        ]}
+        initialValue={searchQuery}
+        onContentChange={() => {
+          const value = inputRef.current?.plainText || ''
+          setSearchQuery(value)
+        }}
         focused
         placeholder='Search items...'
         marginBottom={1}
@@ -205,4 +217,4 @@ const Example = () => {
   )
 }
 
-renderWithProviders(<Example />)
+await renderWithProviders(<Example />)

package/src/examples/internal/rhf-custom-ref.tsx

@@ -0,0 +1,152 @@
+import React, { useRef, useState, useCallback } from 'react'
+import { TextareaRenderable } from '@opentui/core'
+import { useForm } from 'react-hook-form'
+import { useKeyboard } from '@opentui/react'
+import { renderWithProviders } from '../../utils'
+import { Theme } from 'termcast/src/theme'
+import { logger } from 'termcast/src/logger'
+import { createTextareaFormRef } from 'termcast/src/components/form/form-ref'
+
+interface FormData {
+  username: string
+  message: string
+}
+
+function RHFCustomRefExample() {
+  const textareaRef1 = useRef<TextareaRenderable>(null)
+  const textareaRef2 = useRef<TextareaRenderable>(null)
+  const [focusedField, setFocusedField] = useState<'username' | 'message'>('username')
+
+  const { register, handleSubmit, formState, reset, setValue, getValues, watch } =
+    useForm<FormData>({
+      defaultValues: {
+        username: '',
+        message: '',
+      },
+    })
+
+  const formValues = watch()
+
+  const onSubmit = (data: FormData) => {
+    logger.log('Form submitted:', data)
+  }
+
+  // Get register props
+  const usernameRegistration = register('username', { required: 'Username is required' })
+  const messageRegistration = register('message', { required: 'Message is required' })
+
+  // Create form ref adapters with onContentChange handlers
+  const { formRef: usernameFormRef, onContentChange: onUsernameChange } =
+    createTextareaFormRef('username', textareaRef1, usernameRegistration)
+  const { formRef: messageFormRef, onContentChange: onMessageChange } =
+    createTextareaFormRef('message', textareaRef2, messageRegistration)
+
+  // Memoize ref callbacks - register() returns new object every render,
+  // so we must not pass registration.ref directly to avoid re-renders
+  const handleUsernameRef = useCallback((el: TextareaRenderable | null) => {
+    textareaRef1.current = el
+    usernameRegistration.ref(usernameFormRef)
+  }, [])
+
+  const handleMessageRef = useCallback((el: TextareaRenderable | null) => {
+    textareaRef2.current = el
+    messageRegistration.ref(messageFormRef)
+  }, [])
+
+  useKeyboard((evt) => {
+    if (evt.name === 'escape') {
+      reset()
+      logger.log('Form reset')
+    }
+    if (evt.ctrl && evt.name === 's') {
+      handleSubmit(onSubmit)()
+    }
+    if (evt.ctrl && evt.name === 'v') {
+      setValue('username', 'test-user')
+      setValue('message', 'Hello from setValue!')
+      logger.log('Set values programmatically')
+    }
+    if (evt.ctrl && evt.name === 'g') {
+      logger.log('Current values:', getValues())
+    }
+  })
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <text fg={Theme.accent}>React Hook Form with Custom Ref Adapter</text>
+      <text fg={Theme.textMuted}>
+        This example uses register() directly with opentui textarea
+      </text>
+
+      <box flexDirection="column">
+        <text
+          fg={Theme.text}
+          onMouseDown={() => {
+            setFocusedField('username')
+          }}
+        >
+          Username:
+        </text>
+        <textarea
+          ref={handleUsernameRef}
+          height={1}
+          placeholder="Enter username..."
+          onContentChange={onUsernameChange}
+          onMouseDown={() => {
+            setFocusedField('username')
+          }}
+          focused={focusedField === 'username'}
+        />
+        {formState.errors.username && (
+          <text fg={Theme.error}>{formState.errors.username.message}</text>
+        )}
+      </box>
+
+      <box flexDirection="column">
+        <text
+          fg={Theme.text}
+          onMouseDown={() => {
+            setFocusedField('message')
+          }}
+        >
+          Message:
+        </text>
+        <textarea
+          ref={handleMessageRef}
+          height={2}
+          placeholder="Enter message..."
+          onContentChange={onMessageChange}
+          onMouseDown={() => {
+            setFocusedField('message')
+          }}
+          focused={focusedField === 'message'}
+        />
+        {formState.errors.message && (
+          <text fg={Theme.error}>{formState.errors.message.message}</text>
+        )}
+      </box>
+
+      <box flexDirection="column" marginTop={1}>
+        <text fg={Theme.textMuted}>Controls:</text>
+        <text fg={Theme.textMuted}>• Ctrl+S: Submit form</text>
+        <text fg={Theme.textMuted}>• Ctrl+V: Set values programmatically</text>
+        <text fg={Theme.textMuted}>• Ctrl+G: Get current values</text>
+        <text fg={Theme.textMuted}>• ESC: Reset form</text>
+      </box>
+
+      <box marginTop={1}>
+        <text fg={Theme.textMuted}>
+          isDirty: {String(formState.isDirty)} | isValid:{' '}
+          {String(formState.isValid)} | submitCount: {formState.submitCount}
+        </text>
+      </box>
+
+      <box marginTop={1} flexDirection="column">
+        <text fg={Theme.accent}>Form values:</text>
+        <text fg={Theme.text}>{JSON.stringify(formValues, null, 2)}</text>
+      </box>
+    </box>
+  )
+}
+
+renderWithProviders(<RHFCustomRefExample />)

package/src/examples/internal/scrollbox-demo.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react'
 import { renderWithProviders } from 'termcast'
 import { useKeyboard } from '@opentui/react'
-import { fg, bold } from '@opentui/core'
 
 function ScrollBoxListDemo(): any {
   const [selectedIndex, setSelectedIndex] = useState(0)
@@ -81,7 +80,11 @@ function ScrollBoxListDemo(): any {
   return (
     <box flexDirection='column' width='100%' height='100%'>
       <box padding={1} backgroundColor='#2e3440'>
-        <text>{bold(fg('#88c0d0')('ScrollBox Demo'))}</text>
+        <text>
+          <strong>
+            <span fg='#88c0d0'>ScrollBox Demo</span>
+          </strong>
+        </text>
         <text fg='#d8dee9'>
           ↑↓ Navigate | PgUp/PgDn Jump | Home/End First/Last
         </text>
@@ -89,6 +92,7 @@ function ScrollBoxListDemo(): any {
 
       <scrollbox
         ref={scrollBoxRef}
+        focused={true}
         flexGrow={1}
         flexShrink={1}
         style={{
@@ -105,7 +109,7 @@ function ScrollBoxListDemo(): any {
             flexShrink: 0,
           },
           scrollbarOptions: {
-            visible: true,
+
             showArrows: true,
           },
         }}
@@ -123,9 +127,13 @@ function ScrollBoxListDemo(): any {
               marginBottom={0.5}
             >
               <text>
-                {isSelected
-                  ? bold(fg('#eceff4')(`▶ ${item.title}`))
-                  : fg('#d8dee9')(`  ${item.title}`)}
+                {isSelected ? (
+                  <strong>
+                    <span fg='#eceff4'>{`▶ ${item.title}`}</span>
+                  </strong>
+                ) : (
+                  <span fg='#d8dee9'>{`  ${item.title}`}</span>
+                )}
               </text>
               <text fg={isSelected ? '#e5e9f0' : '#81a1c1'}>
                 {item.description}
@@ -145,5 +153,5 @@ function ScrollBoxListDemo(): any {
 }
 
 if (import.meta.main) {
-  renderWithProviders(<ScrollBoxListDemo />)
+  await renderWithProviders(<ScrollBoxListDemo />)
 }

package/src/examples/internal/scrollbox-with-descendants.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react'
+import { useKeyboard } from '@opentui/react'
+import { createDescendants } from 'termcast/src/descendants'
+import { renderWithProviders } from 'termcast/src/utils'
+
+interface ItemDescendant {
+  title: string
+  elementRef?: { y: number; height: number } | null
+}
+
+const { DescendantsProvider, useDescendants, useDescendant } =
+  createDescendants<ItemDescendant>()
+
+function ScrollboxWithDescendants() {
+  const context = useDescendants()
+  const [selectedIndex, setSelectedIndex] = React.useState(0)
+  const scrollBoxRef = React.useRef<any>(null)
+
+  const scrollToItem = (item: { props?: ItemDescendant }) => {
+    const scrollBox = scrollBoxRef.current
+    const elementRef = item.props?.elementRef
+    if (!scrollBox || !elementRef) return
+
+    const contentY = scrollBox.content?.y || 0
+    const viewportHeight = scrollBox.viewport?.height || 10
+    const currentScrollTop = scrollBox.scrollTop || 0
+
+    const itemTop = elementRef.y - contentY
+    const itemBottom = itemTop + elementRef.height
+
+    if (itemTop < currentScrollTop) {
+      scrollBox.scrollTo(itemTop)
+    } else if (itemBottom > currentScrollTop + viewportHeight) {
+      scrollBox.scrollTo(itemBottom - viewportHeight)
+    }
+  }
+
+  const move = (direction: -1 | 1) => {
+    const items = Object.values(context.map.current)
+      .filter((item) => item.index !== -1)
+      .sort((a, b) => a.index - b.index)
+
+    if (items.length === 0) return
+
+    let nextIndex = selectedIndex + direction
+    if (nextIndex < 0) nextIndex = items.length - 1
+    if (nextIndex >= items.length) nextIndex = 0
+
+    const nextItem = items[nextIndex]
+    if (nextItem) {
+      setSelectedIndex(nextIndex)
+      scrollToItem(nextItem)
+    }
+  }
+
+  useKeyboard((evt) => {
+    if (evt.name === 'up') move(-1)
+    if (evt.name === 'down') move(1)
+  })
+
+  const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`)
+
+  return (
+    <DescendantsProvider value={context}>
+      <box style={{ flexDirection: 'column', height: 10 }}>
+        <scrollbox ref={scrollBoxRef} focused={true} flexGrow={1} flexShrink={1}>
+          {items.map((title, i) => (
+            <Item key={i} title={title} isSelected={selectedIndex === i} />
+          ))}
+        </scrollbox>
+        <text>↑↓ to navigate</text>
+      </box>
+    </DescendantsProvider>
+  )
+}
+
+function Item(props: { title: string; isSelected: boolean }) {
+  const elementRef = React.useRef<any>(null)
+  const { index } = useDescendant({
+    title: props.title,
+    elementRef: elementRef.current,
+  })
+
+  return (
+    <box ref={elementRef}>
+      <text>
+        {props.isSelected ? '›' : ' '}
+        {props.title}
+      </text>
+    </box>
+  )
+}
+
+await renderWithProviders(<ScrollboxWithDescendants />)

package/src/examples/internal/simple-dialog.tsx

@@ -121,4 +121,4 @@ function App(): any {
   )
 }
 
-renderWithProviders(<App />)
+await renderWithProviders(<App />)

package/src/examples/internal/simple-scrollbox.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import { renderWithProviders } from 'termcast'
+import { useKeyboard } from '@opentui/react'
+import { ScrollBox } from 'termcast/src/internal/scrollbox'
+
+function SimpleScrollBoxDemo(): any {
+  useKeyboard((evt) => {
+    if (evt.name === 'q' || evt.name === 'escape') {
+      process.exit(0)
+    }
+  })
+
+  const colors = [
+    '#e06c75',
+    '#98c379',
+    '#e5c07b',
+    '#61afef',
+    '#c678dd',
+    '#56b6c2',
+    '#abb2bf',
+  ]
+
+  return (
+    <box flexDirection="column" width="100%" height="100%">
+      <box padding={1} backgroundColor="#282c34">
+        <text>
+          <strong>
+            <span fg='#61afef'>Simple ScrollBox Demo</span>
+          </strong>
+        </text>
+      </box>
+
+      <ScrollBox focused flexGrow={1} flexShrink={1}>
+        {Array.from({ length: 30 }, (_, i) => (
+          <box
+            key={i}
+            padding={1}
+            backgroundColor={colors[i % colors.length]}
+            marginBottom={1}
+          >
+            <text fg="#282c34">
+              <strong>{`Item ${i + 1}`}</strong> - This is content for item number{' '}
+              {i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            </text>
+          </box>
+        ))}
+      </ScrollBox>
+
+      <box padding={1} backgroundColor="#282c34">
+        <text fg="#abb2bf">Use mouse scroll or arrow keys | Press [q] to quit</text>
+      </box>
+    </box>
+  )
+}
+
+if (import.meta.main) {
+  await renderWithProviders(<SimpleScrollBoxDemo />)
+}

package/src/examples/internal/simple-scrollbox.vitest.tsx

@@ -0,0 +1,104 @@
+import { expect, test } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+test('simple scrollbox navigation and scrolling', async () => {
+  const session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/internal/simple-scrollbox.tsx'],
+  })
+
+  await session.text({
+    waitFor: (text) => text.includes('Simple ScrollBox Demo'),
+  })
+
+  const initialText = await session.text()
+  expect(initialText).toMatchInlineSnapshot(`
+    "
+
+
+
+    Simple ScrollBox Demo
+                                                                              ▀
+    Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+
+
+
+    Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+
+
+
+    Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+
+
+
+
+    Use mouse scroll or arrow keys | Press [q] to quit"
+  `)
+
+  // Scroll down to see more items
+  await session.scrollDown(3)
+
+  const afterScrollDownSnapshot = await session.text()
+  expect(afterScrollDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+    Simple ScrollBox Demo
+                                                                              ▄
+
+
+    Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+
+
+
+    Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+
+
+
+    Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+
+
+    Use mouse scroll or arrow keys | Press [q] to quit"
+  `)
+
+  // Scroll back up
+  await session.scrollUp(2)
+
+  const afterScrollUpSnapshot = await session.text()
+  expect(afterScrollUpSnapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+    Simple ScrollBox Demo
+    Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet,   ▀
+    consectetur adipiscing elit.
+
+
+
+    Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+
+
+
+    Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet,
+    consectetur adipiscing elit.
+
+
+
+    Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet,
+
+    Use mouse scroll or arrow keys | Press [q] to quit"
+  `)
+
+  await session.press('esc')
+
+  session.close()
+}, 30000)

package/src/examples/internal/text-stacking.tsx

@@ -1,4 +1,5 @@
-import { render } from '@opentui/react'
+import { createRoot } from '@opentui/react'
+import { createCliRenderer } from '@opentui/core'
 
 function TextStackingExample() {
   const items = [
@@ -87,4 +88,5 @@ function TextStackingExample() {
   )
 }
 
-render(<TextStackingExample />)
+const renderer = await createCliRenderer()
+createRoot(renderer).render(<TextStackingExample />)

package/src/examples/list-dropdown-default.tsx

@@ -66,4 +66,4 @@ function ListDropdownDefaultExample() {
   )
 }
 
-renderWithProviders(<ListDropdownDefaultExample />)
+await renderWithProviders(<ListDropdownDefaultExample />)