termcast 1.3.21 → 1.3.24

package/src/components/loading-text.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { colord } from 'colord'
+
+interface LoadingTextProps {
+  children: string
+  isLoading?: boolean
+  color: string
+}
+
+/**
+ * Generate wave colors based on base color
+ * Creates a gradient from base color to a lighter version and back
+ * Uses a shorter wave (12 chars) compared to LoadingBar
+ */
+function generateWaveColors(baseColor: string): string[] {
+  const base = colord(baseColor)
+  // Shorter wave for text - lighten factors from 0 to 0.5 and back
+  const steps = [0, 10, 20, 30, 40, 50, 40, 30, 20, 10, 0, 0]
+  return steps.map((percent) => base.lighten(percent / 100).toHex())
+}
+
+export function LoadingText(props: LoadingTextProps): any {
+  const { children, isLoading = false, color = '#FFC000' } = props
+  const [position, setPosition] = useState(0)
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+
+  const characters = children.split('')
+  const waveColors = generateWaveColors(color)
+  const waveWidth = waveColors.length
+  // Add padding at the end to create a delay before the next loop
+  const endPadding = 10
+  const totalLength = characters.length + waveWidth + endPadding
+
+  useEffect(() => {
+    if (isLoading) {
+      intervalRef.current = setInterval(() => {
+        setPosition((prev) => (prev + 1) % totalLength)
+      }, 30)
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+      }
+      setPosition(0)
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+      }
+    }
+  }, [isLoading, totalLength])
+
+  const getCharacterColor = (index: number): string => {
+    if (!isLoading) {
+      return color
+    }
+
+    const distance = position - index
+
+    // If character is within the wave (behind the current position)
+    if (distance >= 0 && distance < waveWidth) {
+      return waveColors[distance]
+    }
+
+    // Default to base color for characters outside the wave
+    return color
+  }
+
+  return (
+    <box flexDirection="row">
+      {characters.map((char, index) => (
+        <text key={index} fg={getCharacterColor(index)} flexShrink={0}>
+          {char}
+        </text>
+      ))}
+    </box>
+  )
+}

package/src/descendants.tsx

@@ -113,6 +113,7 @@ const MenuExample = () => {
           <textarea
             ref={inputRef}
             height={1}
+            wrapMode='none'
             keyBindings={[
               { name: 'return', action: 'submit' },
               { name: 'linefeed', action: 'submit' },

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

@@ -16,18 +16,19 @@ afterEach(() => {
   session?.close()
 })
 
-test('autocomplete shows on ./ input with proper background', async () => {
+test('autocomplete shows flat file list in dialog', async () => {
   await session.text({
     waitFor: (text) => text.includes('Select Files') && text.includes('Select Folder'),
   })
 
+  // Navigate to folder picker (canChooseDirectories=true)
   await session.press('tab')
   await session.press('tab')
 
-  await session.type('./')
+  await session.type('s')
 
   const snapshot = await session.text({
-    waitFor: (text) => text.includes('📁'),
+    waitFor: (text) => text.includes('Filter:') && text.includes('📁'),
   })
   expect(snapshot).toMatchInlineSnapshot(`
     "
@@ -37,74 +38,28 @@ test('autocomplete shows on ./ input with proper background', async () => {
 
     ◇  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
+    ◇  Select Files
     │  Enter file path...
-    │
-    │  Choose exactly one file
-    │
-    └
-
-
-
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    │┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    │┃
+    │┃ Filter: s
+    ◆┃
+    │┃  📁 extensions/
+    │┃  📁 extensions/messages/
+    │┃  📁 extensions/messages/assets/
+    │┃  📁 extensions/messages/metadata/
+    ◇┃  📁 extensions/messages/src/
+    │┃  📁 extensions/messages/src/api/
+    │┃  📁 extensions/messages/src/components/
+    │┃  📁 extensions/messages/src/hooks/
+    │┃  📁 extensions/messages/src/tools/
+    └┃  📁 extensions/messages/swift/
+     ┃
+     ┃ ↑↓ navigate  ⏎/tab select  esc close
+     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 10000)
 
@@ -115,10 +70,10 @@ test('autocomplete navigation with down/up keys', async () => {
 
   await session.press('tab')
   await session.press('tab')
-  await session.type('src/')
+  await session.type('s')
 
   await session.text({
-    waitFor: (text) => text.includes('📁 apis'),
+    waitFor: (text) => text.includes('📁'),
   })
 
   await session.press('down')
@@ -129,32 +84,32 @@ test('autocomplete navigation with down/up keys', async () => {
     "
 
 
-       ┌────────────────────────────────────────────────────────────┐
-       │ 📁 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"
+    ◇  Your Name
+    │  John Doe
+    │
+    ◇  Select Files
+    │  Enter file path...
+    │┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    │┃
+    │┃ Filter: s
+    ◆┃
+    │┃  📁 extensions/
+    │┃  📁 extensions/messages/
+    │┃  📁 extensions/messages/assets/
+    │┃  📁 extensions/messages/metadata/
+    ◇┃  📁 extensions/messages/src/
+    │┃  📁 extensions/messages/src/api/
+    │┃  📁 extensions/messages/src/components/
+    │┃  📁 extensions/messages/src/hooks/
+    │┃  📁 extensions/messages/src/tools/
+    └┃  📁 extensions/messages/swift/
+     ┃
+     ┃ ↑↓ navigate  ⏎/tab select  esc close
+     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('up')
@@ -164,52 +119,102 @@ test('autocomplete navigation with down/up keys', async () => {
     "
 
 
-       ┌────────────────────────────────────────────────────────────┐
-       │ 📁 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
+
+
+    ◇  Your Name
+    │  John Doe
     │
-    └
+    ◇  Select Files
+    │  Enter file path...
+    │┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    │┃
+    │┃ Filter: s
+    ◆┃
+    │┃  📁 extensions/
+    │┃  📁 extensions/messages/
+    │┃  📁 extensions/messages/assets/
+    │┃  📁 extensions/messages/metadata/
+    ◇┃  📁 extensions/messages/src/
+    │┃  📁 extensions/messages/src/api/
+    │┃  📁 extensions/messages/src/components/
+    │┃  📁 extensions/messages/src/hooks/
+    │┃  📁 extensions/messages/src/tools/
+    └┃  📁 extensions/messages/swift/
+     ┃
+     ┃ ↑↓ navigate  ⏎/tab select  esc close
+     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+     ctrl ↵ submit   tab navigate   ^k actions"
+  `)
+}, 10000)
+
+test('file picker shows only files, not folders', async () => {
+  await session.text({
+    waitFor: (text) => text.includes('Select Files'),
+  })
+
+  // Navigate to file picker (canChooseFiles=true, canChooseDirectories=false)
+  await session.press('tab') // to Select Files field
+
+  await session.type('t')
+
+  const snapshot = await session.text({
+    waitFor: (text) => text.includes('Filter:') && text.includes('📄'),
+  })
+  
+  // Should show files (📄) not folders (📁)
+  expect(snapshot).toMatchInlineSnapshot(`
+    "
 
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+    ◇  Your Name
+    │  John Doe
+    │
+    ◆  Select Files
+    │  t
+    │┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+    │┃
+    │┃ Filter: t
+    ◇┃
+    │┃  📄 ARCHITECTURE.md
+    │┃  📄 EXTENSIONS.md
+    │┃  📄 OAUTH_SETUP.md
+    │┃  📄 RAYCAST_SCROLLING.md
+    ◇┃  📄 TESTING_RAYCAST_EXTENSIONS.md
+    │┃  📄 bunfig.toml
+    │┃  📄 extensions/messages/CHANGELOG.md
+    │┃  📄 extensions/messages/README.md
+    │┃  📄 extensions/messages/assets/apple-messages-icon.png
+    └┃  📄 extensions/messages/bun.lock
+     ┃
+     ┃ ↑↓ navigate  ⏎/tab select  esc close
+     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
+  expect(snapshot).toContain('📄')
+  expect(snapshot).not.toContain('📁')
 }, 10000)
 
-test('escape closes autocomplete', async () => {
+test('escape closes autocomplete and form stays visible', async () => {
   await session.text({
     waitFor: (text) => text.includes('Select Files'),
   })
 
   await session.press('tab')
   await session.press('tab')
-  await session.type('./')
+  await session.type('s')
 
   await session.text({
-    waitFor: (text) => text.includes('📁'),
+    waitFor: (text) => text.includes('Filter:'),
   })
 
   await session.press('esc')
 
   const afterEsc = await session.text({
-    waitFor: (text) => !text.includes('📁'),
+    waitFor: (text) => text.includes('Select Folder') && !text.includes('Filter:'),
   })
   expect(afterEsc).toMatchInlineSnapshot(`
     "
@@ -226,10 +231,10 @@ test('escape closes autocomplete', async () => {
     │  Choose one or more files to upload
     │
     ◆  Select Folder
-    ┃  ./
-    ┃
-    ┃  Choose a folder for output
-    ┃
+    │  s
+    │
+    │  Choose a folder for output
+    │
     ◇  Select Single File
     │  Enter file path...
     │
@@ -240,6 +245,6 @@ test('escape closes autocomplete', async () => {
 
 
 
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 10000)