termcast 1.3.9

package/src/examples/nested-navigation.tsx

@@ -0,0 +1,118 @@
+import React from 'react'
+import { render } from '@opentui/react'
+import List from 'termcast'
+import { Action, ActionPanel } from 'termcast'
+import { useNavigation } from 'termcast/src/internal/navigation'
+import { Providers } from 'termcast/src/internal/providers'
+
+function ThirdLevel({ path }: { path: string[] }): any {
+  const { pop } = useNavigation()
+  const fullPath = path.join(' > ')
+
+  return (
+    <List
+      searchBarPlaceholder='Third level - Press ESC to go back'
+      navigationTitle={fullPath}
+    >
+      <List.Section title='Final Level'>
+        <List.Item
+          id='info'
+          title="You've reached the deepest level"
+          subtitle={`Path: ${fullPath}`}
+          actions={
+            <ActionPanel>
+              <Action title='← Go Back' onAction={() => pop()} />
+              <Action.CopyToClipboard content={fullPath} title='Copy Path' />
+            </ActionPanel>
+          }
+        />
+      </List.Section>
+    </List>
+  )
+}
+
+function SecondLevel({ category }: { category: string }): any {
+  const { push, pop } = useNavigation()
+
+  const items = ['Item A', 'Item B', 'Item C']
+
+  return (
+    <List
+      searchBarPlaceholder='Second level - Press ESC to go back'
+      navigationTitle={category}
+    >
+      <List.Section title={`${category} Items`}>
+        {items.map((item) => (
+          <List.Item
+            id={`item-${item}`}
+            title={item}
+            subtitle={`View details for ${item}`}
+            actions={
+              <ActionPanel>
+                <Action
+                  title='View Details'
+                  onAction={() => {
+                    push(<ThirdLevel path={[category, item]} />, () =>
+                      console.log(`Popped from ${item}`),
+                    )
+                  }}
+                />
+                <Action title='← Back' onAction={() => pop()} />
+              </ActionPanel>
+            }
+          />
+        ))}
+      </List.Section>
+    </List>
+  )
+}
+
+function FirstLevel(): any {
+  const { push } = useNavigation()
+
+  const categories = [
+    { id: 'docs', title: 'Documents', icon: '📄' },
+    { id: 'images', title: 'Images', icon: '🖼️' },
+    { id: 'videos', title: 'Videos', icon: '🎥' },
+    { id: 'music', title: 'Music', icon: '🎵' },
+  ]
+
+  return (
+    <List
+      searchBarPlaceholder='Search categories'
+      navigationTitle='Nested Navigation Demo'
+    >
+      <List.Section title='Categories'>
+        {categories.map((cat) => (
+          <List.Item
+            id={cat.id}
+            title={`${cat.icon} ${cat.title}`}
+            subtitle={`Browse ${cat.title.toLowerCase()}`}
+            actions={
+              <ActionPanel>
+                <Action
+                  title='Open Category'
+                  onAction={() => {
+                    push(<SecondLevel category={cat.title} />, () =>
+                      console.log(`Popped from ${cat.title}`),
+                    )
+                  }}
+                />
+              </ActionPanel>
+            }
+          />
+        ))}
+      </List.Section>
+    </List>
+  )
+}
+
+function App(): any {
+  return (
+    <Providers>
+      <FirstLevel />
+    </Providers>
+  )
+}
+
+render(<App />)

package/src/examples/preferences-test.tsx

@@ -0,0 +1,82 @@
+import React from 'react'
+import { List, Action, ActionPanel, showToast, Toast } from 'termcast'
+import {
+  getPreferenceValues,
+  openExtensionPreferences,
+  openCommandPreferences,
+} from 'termcast'
+import { renderWithProviders } from 'termcast'
+
+function PreferencesTestExample(): any {
+  const handleGetPreferences = () => {
+    const prefs = getPreferenceValues()
+    showToast({
+      style: Toast.Style.Success,
+      title: 'Current Preferences',
+      message:
+        Object.keys(prefs).length > 0
+          ? JSON.stringify(prefs, null, 2)
+          : 'No preferences set',
+    })
+  }
+
+  const handleOpenExtensionPrefs = async () => {
+    try {
+      await openExtensionPreferences()
+    } catch (error) {
+      showToast({
+        style: Toast.Style.Failure,
+        title: 'Error',
+        message: String(error),
+      })
+    }
+  }
+
+  const handleOpenCommandPrefs = async () => {
+    try {
+      await openCommandPreferences()
+    } catch (error) {
+      showToast({
+        style: Toast.Style.Failure,
+        title: 'Error',
+        message: String(error),
+      })
+    }
+  }
+
+  return (
+    <List navigationTitle='Preferences Test'>
+      <List.Item
+        title='Get Current Preferences'
+        subtitle='Shows current preference values'
+        actions={
+          <ActionPanel>
+            <Action title='Get Preferences' onAction={handleGetPreferences} />
+          </ActionPanel>
+        }
+      />
+
+      <List.Item
+        title='Open Extension Preferences'
+        subtitle='Opens the extension preferences form'
+        actions={
+          <ActionPanel>
+            <Action title='Open' onAction={handleOpenExtensionPrefs} />
+          </ActionPanel>
+        }
+      />
+
+      <List.Item
+        title='Open Command Preferences'
+        subtitle='Opens the command preferences form'
+        actions={
+          <ActionPanel>
+            <Action title='Open' onAction={handleOpenCommandPrefs} />
+          </ActionPanel>
+        }
+      />
+    </List>
+  )
+}
+
+renderWithProviders(<PreferencesTestExample />)

package/src/examples/simple-dropdown.tsx

@@ -0,0 +1,95 @@
+import { renderWithProviders } from 'termcast'
+import { Dropdown } from 'termcast'
+import { logger } from 'termcast'
+import { useState } from 'react'
+
+const App: any = () => {
+  const [selectedValue, setSelectedValue] = useState<string>('one')
+
+  const handleChange = (newValue: string) => {
+    logger.log('Dropdown value changed to:', newValue)
+    setSelectedValue(newValue)
+  }
+
+  return (
+    <Dropdown
+      tooltip='Select Drink Type'
+      onChange={handleChange}
+      value={selectedValue}
+      placeholder='Search drinks...'
+      filtering
+      storeValue
+    >
+      <Dropdown.Section title='Alcoholic Beverages'>
+        <Dropdown.Item
+          value='beer'
+          title='Beer'
+          icon='🍺'
+          keywords={['lager', 'ale', 'stout']}
+          label='⌃B'
+        />
+        <Dropdown.Item
+          value='wine'
+          title='Wine'
+          icon='🍷'
+          keywords={['red', 'white', 'rose']}
+          label='⌃W'
+        />
+        <Dropdown.Item
+          value='whiskey'
+          title='Whiskey'
+          icon='🥃'
+          keywords={['scotch', 'bourbon', 'rye']}
+          label='⌘W'
+        />
+      </Dropdown.Section>
+
+      <Dropdown.Section title='Non-Alcoholic'>
+        <Dropdown.Item
+          value='coffee'
+          title='Coffee'
+          icon='☕'
+          keywords={['espresso', 'latte', 'cappuccino']}
+          label='⌃C'
+        />
+        <Dropdown.Item
+          value='tea'
+          title='Tea'
+          icon='🍵'
+          keywords={['green', 'black', 'herbal']}
+          label='⌃T'
+        />
+        <Dropdown.Item
+          value='juice'
+          title='Juice'
+          icon='🧃'
+          keywords={['orange', 'apple', 'grape']}
+        />
+        <Dropdown.Item
+          value='water'
+          title='Water'
+          icon='💧'
+          keywords={['sparkling', 'still', 'mineral']}
+        />
+      </Dropdown.Section>
+
+      <Dropdown.Section title='Soft Drinks'>
+        <Dropdown.Item
+          value='cola'
+          title='Cola'
+          icon='🥤'
+          keywords={['coke', 'pepsi', 'soda']}
+          label='⌃O'
+        />
+        <Dropdown.Item
+          value='lemonade'
+          title='Lemonade'
+          icon='🍋'
+          keywords={['lemon', 'citrus', 'sweet']}
+        />
+      </Dropdown.Section>
+    </Dropdown>
+  )
+}
+
+renderWithProviders(<App />)

package/src/examples/simple-file-picker.tsx

@@ -0,0 +1,75 @@
+import { Form, Action, ActionPanel } from 'termcast'
+import { showToast, Toast } from 'termcast'
+import { useState } from 'react'
+import { renderWithProviders } from '../utils'
+
+const SimpleFilePicker = () => {
+  const [submittedFiles, setSubmittedFiles] = useState<string[]>([])
+
+  return (
+    <Form
+      actions={
+        <ActionPanel>
+          <Action.SubmitForm
+            title='Submit Files'
+            onSubmit={(values) => {
+              const files = values.files as string[]
+              setSubmittedFiles(files)
+              showToast({
+                style: Toast.Style.Success,
+                title: 'Files Selected',
+                message:
+                  files.length > 0
+                    ? `Selected ${files.length} file(s)`
+                    : 'No files selected',
+              })
+            }}
+          />
+        </ActionPanel>
+      }
+    >
+      <Form.TextField
+        id='name'
+        title='Your Name'
+        placeholder='Enter your name'
+        defaultValue='John Doe'
+      />
+
+      <Form.FilePicker
+        id='files'
+        title='Select Files'
+        info='Choose one or more files to upload'
+        allowMultipleSelection={true}
+        canChooseFiles={true}
+        canChooseDirectories={false}
+      />
+
+      <Form.FilePicker
+        id='folder'
+        title='Select Folder'
+        info='Choose a folder for output'
+        allowMultipleSelection={false}
+        canChooseFiles={false}
+        canChooseDirectories={true}
+      />
+
+      <Form.FilePicker
+        id='singleFile'
+        title='Select Single File'
+        info='Choose exactly one file'
+        allowMultipleSelection={false}
+        canChooseFiles={true}
+        canChooseDirectories={false}
+      />
+
+      {submittedFiles.length > 0 && (
+        <Form.Description
+          title='Last Submitted Files'
+          text={submittedFiles.join('\n')}
+        />
+      )}
+    </Form>
+  )
+}
+
+renderWithProviders(<SimpleFilePicker />)

package/src/examples/simple-file-picker.vitest.tsx

@@ -0,0 +1,306 @@
+import { test, expect, afterEach, beforeEach } from 'vitest'
+import { NodeTuiDriver } from 'termcast/src/e2e-node'
+
+let driver: NodeTuiDriver
+
+beforeEach(() => {
+  driver = new NodeTuiDriver('bun', ['src/examples/simple-file-picker.tsx'], {
+    cols: 70,
+    rows: 50,
+  })
+})
+
+afterEach(() => {
+  driver?.dispose()
+})
+
+test('file picker with autocomplete', async () => {
+  await driver.text({
+    waitFor: (text) => {
+      // wait for form to show up
+      return /Your Name/i.test(text)
+    },
+  })
+
+  const initialSnapshot = await driver.text()
+  expect(initialSnapshot).toMatchInlineSnapshot(`
+    "
+
+    ◆  Your Name
+    │  John Doe
+    ◇  Select Files
+    │  Enter file path...
+    │  Choose one or more files to upload
+    │
+    ◇  Select Folder
+    │  Enter file path...
+    │  Choose a folder for output
+    │
+    ◇  Select Single File
+    │  Enter file path...
+    │  Choose exactly one file
+    │
+    └
+
+
+     ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+
+  // Tab to navigate to file picker field
+  await driver.keys.tab()
+  await driver.keys.tab()
+
+  // Type "src" to trigger autocomplete
+  await driver.keys.type('src')
+
+  // Wait for autocomplete to appear
+  await new Promise((resolve) => setTimeout(resolve, 200))
+
+  const autocompleteSnapshot = await driver.text()
+  expect(autocompleteSnapshot).toMatchInlineSnapshot(`
+    "
+
+    ◇  Your Name
+    │  John Doe
+    ◇  Select Files
+    │  Enter file path...
+    │  Choose one or more files to upload
+    │
+    ◆  Select Folder
+    │  src
+    │  ┌─────────────────────────────────────────────────────────────┐
+    │  │ 📁a src                                                      │
+    ◇  Select─Single─File────────────────────────────────────────────┘
+    │  Enter file path...
+    │  Choose exactly one file
+    │
+    └
+
+
+     ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+
+  // Navigate down in autocomplete
+  await driver.keys.down()
+
+  const afterDownSnapshot = await driver.text()
+  expect(afterDownSnapshot).toMatchInlineSnapshot(`
+    "
+
+    ◇  Your Name
+    │  John Doe
+    ◇  Select Files
+    │  Enter file path...
+    │  Choose one or more files to upload
+    │
+    ◆  Select Folder
+    │  src
+    │  ┌─────────────────────────────────────────────────────────────┐
+    │  │ 📁a src                                                      │
+    ◇  Select─Single─File────────────────────────────────────────────┘
+    │  Enter file path...
+    │  Choose exactly one file
+    │
+    └
+
+
+     ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+
+  // Select item with Enter
+  await driver.keys.enter()
+
+  const afterSelectSnapshot = await driver.text()
+  expect(afterSelectSnapshot).toMatchInlineSnapshot(`
+    "
+
+    ◇  Your Name
+    │  John Doe
+    ◇  Select Files
+    │  Enter file path...
+    │  Choose one or more files to upload
+    │
+    ◆  Select Folder
+    │  src/
+    │  ┌─────────────────────────────────────────────────────────────┐
+    │  │ 📁a apis                                                     │
+    ◇  SelectoSingletFile                                            │
+    │  Enterefilelpath...                                            │
+    │  Choosexexactlysone file                                       │
+    │  │    hooks                                                    │
+    └  │ 📁  internal                                                 │
+       │ 📁  store-api                                                │
+       │    utils                                                    │
+     ↵ submitcti↑↓-navigatex──^k─actions─────────────────────────────┘
+         📄  build.test.tsx"
+  `)
+
+  // Clear and test absolute path
+  await driver.keys.backspace()
+  await driver.keys.backspace()
+  await driver.keys.backspace()
+  await driver.keys.type('/tmp')
+
+  await new Promise((resolve) => setTimeout(resolve, 200))
+
+  const absolutePathSnapshot = await driver.text()
+  expect(absolutePathSnapshot).toMatchInlineSnapshot(`
+    "
+
+    ◇  Your Name
+    │  John Doe
+    ◇  Select Files
+    │  Enter file path...
+    │  Choose one or more files to upload
+    │
+    ◆  Select Folder
+    │  /tmp/
+    │  ┌─────────────────────────────────────────────────────────────┐
+    │  │ 📁  bunx-501-@alignui                                        │
+    ◇  SelectuSingle-Fileeya                                         │
+    │  Enterbfile5path...elcontextprotocol                           │
+    │  Chooseuexactly@onecfile                                       │
+    │  │    bunx-501-npkill@latest                                   │
+    └  │ 📁  com.apple.launchd.D0VRoDoOHk                             │
+       │ 📁  com.apple.launchd.i00Yz9AggD                             │
+       │    node-compile-cache                                       │
+     ↵ submitode↑↓inavigate───^k─actions─────────────────────────────┘
+         📁  powerlog"
+  `)
+
+  // Test ~ home directory expansion
+  await driver.keys.backspace()
+  await driver.keys.backspace()
+  await driver.keys.backspace()
+  await driver.keys.backspace()
+  await driver.keys.type('~/')
+
+  await new Promise((resolve) => setTimeout(resolve, 200))
+
+  const homeDirectorySnapshot = await driver.text()
+  expect(homeDirectorySnapshot).toMatchInlineSnapshot(`
+    "
+
+    ◇  Your Name
+    │  John Doe
+    ◇  Select Files
+    │  Enter file path...
+    │  Choose one or more files to upload
+    │
+    ◆  Select Folder
+    │  ~//
+    │  ┌─────────────────────────────────────────────────────────────┐
+    │  │ 📁a Applications                                             │
+    ◇  SelectwSingle File                                            │
+    │  Entercfileepath...                                            │
+    │  Chooseoexactly_one_filee                                      │
+    │  │    conductor                                                │
+    └  │ 📁  Desktop                                                  │
+       │ 📁  Documents                                                │
+       │    Downloads                                                │
+     ↵ submityad↑↓pnavigate───^k─actions─────────────────────────────┘
+         📁  example-pnpm-pubcket"
+  `)
+}, 15000)
+
+test('file picker keyboard navigation', async () => {
+  await driver.text({
+    waitFor: (text) => {
+      return /Your Name/i.test(text)
+    },
+  })
+
+  // Tab to file picker
+  await driver.keys.tab()
+  await driver.keys.tab()
+
+  // Type to trigger autocomplete
+  await driver.keys.type('.')
+
+  await new Promise((resolve) => setTimeout(resolve, 200))
+
+  const withDotSnapshot = await driver.text()
+  expect(withDotSnapshot).toMatchInlineSnapshot(`
+    "
+
+    ◇  Your Name
+    │  John Doe
+    ◇  Select Files
+    │  Enter file path...
+    │  Choose one or more files to upload
+    │
+    ◆  Select Folder
+    │  .
+    │  ┌─────────────────────────────────────────────────────────────┐
+    │  │ 📁  .termcast-bundle                                         │
+    ◇  SelectgSinglerFile                                            │
+    │  Enter─file─path...────────────────────────────────────────────┘
+    │  Choose exactly one file
+    │
+    └
+
+
+     ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+
+  // Test escape key to close autocomplete
+  await driver.keys.escape()
+
+  const afterEscapeSnapshot = await driver.text()
+  expect(afterEscapeSnapshot).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
+    │
+    └
+
+
+     ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+
+  // Type again and navigate with arrows
+  await driver.keys.type('s')
+
+  await new Promise((resolve) => setTimeout(resolve, 200))
+
+  // Navigate down multiple times
+  await driver.keys.down()
+  await driver.keys.down()
+  await driver.keys.up()
+
+  const afterNavigationSnapshot = await driver.text()
+  expect(afterNavigationSnapshot).toMatchInlineSnapshot(`
+    "
+
+    ◇  Your Name
+    │  John Doe
+    ◇  Select Files
+    │  Enter file path...
+    │  Choose one or more files to upload
+    │
+    ◆  Select Folder
+    │  .s
+    │  Choose a folder for output
+    │
+    ◇  Select Single File
+    │  Enter file path...
+    │  Choose exactly one file
+    │
+    └
+
+
+     ↵ submit   ↑↓ navigate   ^k actions"
+  `)
+}, 10000)