termcast 1.3.10 → 1.3.18

package/src/components/loading-bar.tsx

@@ -132,7 +132,7 @@ export function LoadingBar(props: LoadingBarProps): any {
       }}
     >
       {characters.map((char, index) => (
-        <text key={index} fg={getCharacterColor(index)}>
+        <text key={index} fg={getCharacterColor(index)} flexShrink={0}>
           {char}
         </text>
       ))}

package/src/descendants.tsx

@@ -1,6 +1,7 @@
 // inspired by https://github.com/pacocoursey/use-descendants
 //
 import * as React from 'react'
+import { TextareaRenderable } from '@opentui/core'
 
 type DescendantMap<T> = { [id: string]: { index: number; props?: T } }
 
@@ -92,12 +93,10 @@ const FilteredIndexesContext = React.createContext<number[]>([])
 
 const MenuExample = () => {
   const context = useDescendants()
-  const [search, setSearchRaw] = React.useState('')
   const [filteredIndexes, setFilteredIndexes] = React.useState<number[]>([])
+  const inputRef = React.useRef<TextareaRenderable>(null)
 
-  // Filtering logic is now in this wrapper
-  const setSearch = (value: string) => {
-    setSearchRaw(value)
+  const updateFilter = (value: string) => {
     const items = Object.entries(context.map.current)
     const filtered = items
       .filter(([, item]) =>
@@ -111,7 +110,18 @@ const MenuExample = () => {
     <DescendantsProvider value={context}>
       <FilteredIndexesContext.Provider value={filteredIndexes}>
         <box>
-          <input value={search} onInput={setSearch} placeholder='Search...' />
+          <textarea
+            ref={inputRef}
+            height={1}
+            keyBindings={[
+              { name: 'return', action: 'submit' },
+              { name: 'linefeed', action: 'submit' },
+            ]}
+            onContentChange={() => {
+              updateFilter(inputRef.current?.plainText || '')
+            }}
+            placeholder='Search...'
+          />
           <Item title='First Item' />
           <Item title='Second Item' />
           <Item title='Third Item' />

package/src/examples/action-show-in-finder.tsx

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

package/src/examples/environment-test.tsx

@@ -46,5 +46,5 @@ Command Mode: ${environment.commandMode}
 import { ActionPanel, Action } from 'termcast'
 
 if (require.main === module) {
-  renderWithProviders(<EnvironmentExample />)
+  await renderWithProviders(<EnvironmentExample />)
 }

package/src/examples/error-boundary.tsx

@@ -214,4 +214,4 @@ export default function ErrorBoundaryExample(): any {
 }
 ErrorBoundaryExample.displayName = 'ErrorBoundaryExample'
 
-renderWithProviders(<ErrorBoundaryExample />)
+await renderWithProviders(<ErrorBoundaryExample />)

package/src/examples/file-autocomplete.vitest.tsx

@@ -0,0 +1,245 @@
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { launchTerminal, Session } from 'tuistory/src'
+
+let session: Session
+
+beforeEach(async () => {
+  session = await launchTerminal({
+    command: 'bun',
+    args: ['src/examples/simple-file-picker.tsx'],
+    cols: 70,
+    rows: 30,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('autocomplete shows on ./ input with proper background', async () => {
+  await session.text({
+    waitFor: (text) => text.includes('Select Files') && text.includes('Select Folder'),
+  })
+
+  await session.press('tab')
+  await session.press('tab')
+
+  await session.type('./')
+
+  const snapshot = await session.text({
+    waitFor: (text) => text.includes('📁'),
+  })
+  expect(snapshot).toMatchInlineSnapshot(`
+    "
+
+
+
+
+    ◇  Your Name
+    │  John Doe
+    │  ┌────────────────────────────────────────────────────────────┐
+    ◇  │ 📁 dist                                                    │
+    │  │ 📁 fixtures                                                │
+    │  │ 📁 node_modules                                            │
+    │  │ 📁 src                                                     │
+    │  │ ↑↓ navigate  ⏎ open folder  ⇥ select folder  esc close     │
+    ◆  └────────────────────────────────────────────────────────────┘
+    ┃  ./
+    ┃
+    ┃  Choose a folder for output
+    ┃
+    ◇  Select Single File
+    │  Enter file path...
+    │
+    │  Choose exactly one file
+    │
+    └
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+}, 10000)
+
+test('autocomplete dropdown covers background content', async () => {
+  await session.text({
+    waitFor: (text) => text.includes('Select Files'),
+  })
+
+  await session.press('tab')
+  await session.press('tab')
+
+  await session.type('src/')
+
+  const snapshot = await session.text({
+    waitFor: (text) => text.includes('📁 apis'),
+  })
+  expect(snapshot).toMatchInlineSnapshot(`
+    "
+
+
+       ┌────────────────────────────────────────────────────────────┐
+       │ 📁 apis                                                    │
+    ◇  │ 📁 components                                              │
+    │  │ 📁 examples                                                │
+    │  │ 📁 extensions                                              │
+    ◇  │ 📁 hooks                                                   │
+    │  │ 📁 internal                                                │
+    │  │ 📁 store-api                                               │
+    │  │ 📁 utils                                                   │
+    │  │ ↑↓ navigate  ⏎ open folder  ⇥ select folder  esc close     │
+    ◆  └────────────────────────────────────────────────────────────┘
+    ┃  src/
+    ┃
+    ┃  Choose a folder for output
+    ┃
+    ◇  Select Single File
+    │  Enter file path...
+    │
+    │  Choose exactly one file
+    │
+    └
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+}, 10000)
+
+test('autocomplete navigation with down/up keys', async () => {
+  await session.text({
+    waitFor: (text) => text.includes('Select Files'),
+  })
+
+  await session.press('tab')
+  await session.press('tab')
+  await session.type('src/')
+
+  await session.text({
+    waitFor: (text) => text.includes('📁 apis'),
+  })
+
+  await session.press('down')
+  await session.press('down')
+
+  const afterDown = await session.text({})
+  expect(afterDown).toMatchInlineSnapshot(`
+    "
+
+
+       ┌────────────────────────────────────────────────────────────┐
+       │ 📁 apis                                                    │
+    ◇  │ 📁 components                                              │
+    │  │ 📁 examples                                                │
+    │  │ 📁 extensions                                              │
+    ◇  │ 📁 hooks                                                   │
+    │  │ 📁 internal                                                │
+    │  │ 📁 store-api                                               │
+    │  │ 📁 utils                                                   │
+    │  │ ↑↓ navigate  ⏎ open folder  ⇥ select folder  esc close     │
+    ◆  └────────────────────────────────────────────────────────────┘
+    ┃  src/
+    ┃
+    ┃  Choose a folder for output
+    ┃
+    ◇  Select Single File
+    │  Enter file path...
+    │
+    │  Choose exactly one file
+    │
+    └
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+
+  await session.press('up')
+
+  const afterUp = await session.text({})
+  expect(afterUp).toMatchInlineSnapshot(`
+    "
+
+
+       ┌────────────────────────────────────────────────────────────┐
+       │ 📁 apis                                                    │
+    ◇  │ 📁 components                                              │
+    │  │ 📁 examples                                                │
+    │  │ 📁 extensions                                              │
+    ◇  │ 📁 hooks                                                   │
+    │  │ 📁 internal                                                │
+    │  │ 📁 store-api                                               │
+    │  │ 📁 utils                                                   │
+    │  │ ↑↓ navigate  ⏎ open folder  ⇥ select folder  esc close     │
+    ◆  └────────────────────────────────────────────────────────────┘
+    ┃  src/
+    ┃
+    ┃  Choose a folder for output
+    ┃
+    ◇  Select Single File
+    │  Enter file path...
+    │
+    │  Choose exactly one file
+    │
+    └
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+}, 10000)
+
+test('escape closes autocomplete', async () => {
+  await session.text({
+    waitFor: (text) => text.includes('Select Files'),
+  })
+
+  await session.press('tab')
+  await session.press('tab')
+  await session.type('./')
+
+  await session.text({
+    waitFor: (text) => text.includes('📁'),
+  })
+
+  await session.press('esc')
+
+  const afterEsc = await session.text({
+    waitFor: (text) => !text.includes('📁'),
+  })
+  expect(afterEsc).toMatchInlineSnapshot(`
+    "
+
+
+
+
+    ◇  Your Name
+    │  John Doe
+    │
+    ◇  Select Files
+    │  Enter file path...
+    │
+    │  Choose one or more files to upload
+    │
+    ◆  Select Folder
+    ┃  ./
+    ┃
+    ┃  Choose a folder for output
+    ┃
+    ◇  Select Single File
+    │  Enter file path...
+    │
+    │  Choose exactly one file
+    │
+    └
+
+
+
+
+     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+}, 10000)

package/src/examples/form-basic.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react'
-import { render } from '@opentui/react'
 import { Form, ActionPanel, Action } from 'termcast'
 import { logger } from 'termcast'
 import { showToast, Toast } from 'termcast'
@@ -19,7 +18,7 @@ export function FormBasicExample(): any {
   }
 
   return (
-    <box flexDirection='column'>
+
       <Form
         actions={
           <ActionPanel>
@@ -105,18 +104,19 @@ export function FormBasicExample(): any {
           title='Form Navigation'
           text='• ↑↓/Tab: Navigate fields | Space: Toggle checkbox | Enter/Space: Open dropdown | ^K/⌘↵: Show actions'
         />
+        {submittedData && (
+
+            <Form.Description
+              title='Submitted Data:'
+              text={JSON.stringify(submittedData, null, 2)}
+            />
+
+        )}
       </Form>
 
-      {submittedData && (
-        <box flexDirection='column' marginTop={2}>
-          <Form.Description
-            title='Submitted Data:'
-            text={JSON.stringify(submittedData, null, 2)}
-          />
-        </box>
-      )}
-    </box>
+
+
   )
 }
 
-renderWithProviders(<FormBasicExample />)
+await renderWithProviders(<FormBasicExample />)