termcast 1.3.9 → 1.3.10

package/src/examples/form-basic.vitest.tsx

@@ -70,14 +70,14 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Type in username field
@@ -127,14 +127,14 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Tab to password field
@@ -185,14 +185,14 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Tab to biography field
@@ -243,14 +243,14 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Tab to newsletter checkbox and toggle it
@@ -301,14 +301,14 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Tab to country dropdown and select United States
@@ -359,14 +359,14 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Select United States
@@ -416,14 +416,14 @@ test('form basic navigation and input', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Tab to date picker
@@ -474,14 +474,14 @@ test('form basic navigation and input', async () => {
     ◆  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Submit form with Cmd+Enter
@@ -536,14 +536,14 @@ test('form basic navigation and input', async () => {
     ◆  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 }, 15000)
 
@@ -605,14 +605,14 @@ test('form navigation with shift+tab', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Navigate backwards with Shift+Tab
@@ -662,14 +662,14 @@ test('form navigation with shift+tab', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Go back to username field
@@ -719,14 +719,14 @@ test('form navigation with shift+tab', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Clear and type new username
@@ -777,14 +777,14 @@ test('form navigation with shift+tab', async () => {
     ◇  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 }, 10000)
 
@@ -850,14 +850,14 @@ test('form dropdown navigation', async () => {
     ◆  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Navigate down in dropdown
@@ -907,14 +907,14 @@ test('form dropdown navigation', async () => {
     ◆  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Navigate to Europe section
@@ -966,14 +966,14 @@ test('form dropdown navigation', async () => {
     ◆  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 
   // Select France
@@ -1023,13 +1023,13 @@ test('form dropdown navigation', async () => {
     ◆  Date of Birth
     │
     │   ←       2025        →
-    │   ←     September     →
+    │   ←      October      →
     │
     │   Mo Tu We Th Fr Sa Su
-    │    1  2  3  4  5  6  7
-    │    8  9 10 11 12 13 14
-    │   15 16 17 18 19 20 21
-    │   22 23 24 25 26 27 28
-    │   29 30"
+    │          1  2  3  4  5
+    │    6  7  8  9 10 11 12
+    │   13 14 15 16 17 18 19
+    │   20 21 22 23 24 25 26
+    │   27 28 29 30 31"
   `)
 }, 10000)

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

@@ -0,0 +1,55 @@
+import React from 'react'
+import { renderWithProviders } from 'termcast'
+import { useKeyboard } from '@opentui/react'
+import { fg, bold } from '@opentui/core'
+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>{bold(fg('#61afef')('Simple ScrollBox Demo'))}</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">
+              {bold(`Item ${i + 1}`)} - 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) {
+  renderWithProviders(<SimpleScrollBoxDemo />)
+}

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

@@ -0,0 +1,94 @@
+import { expect, test } from 'vitest'
+import { NodeTuiDriver } from 'termcast/src/e2e-node'
+
+test('simple scrollbox navigation and scrolling', async () => {
+  const driver = new NodeTuiDriver('bun', ['src/examples/internal/simple-scrollbox.tsx'])
+
+  await driver.text({
+    waitFor: (text) => text.includes('Simple ScrollBox Demo'),
+  })
+
+  const initialText = await driver.text()
+  expect(initialText).toMatchInlineSnapshot(`
+    "
+
+
+    Simple ScrollBox Demo
+
+
+    Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 5 - This is content for item number 5. Lorem ipsum dolor sit amet, cons"
+  `)
+
+  await driver.scrollDown(3)
+  const afterScrollDown = await driver.text()
+  expect(afterScrollDown).toMatchInlineSnapshot(`
+    "
+
+
+    Simple ScrollBox Demo
+
+
+
+
+    Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 5 - This is content for item number 5. Lorem ipsum dolor sit amet, cons"
+  `)
+
+  await driver.scrollUp(2)
+  const afterScrollUp = await driver.text()
+  expect(afterScrollUp).toMatchInlineSnapshot(`
+    "
+
+
+    Simple ScrollBox Demo
+
+    Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 2 - This is content for item number 2. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 3 - This is content for item number 3. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet, cons
+
+
+
+    Item 5 - This is content for item number 5. Lorem ipsum dolor sit amet, cons"
+  `)
+
+  await driver.keys.escape()
+
+  driver.dispose()
+}, 30000)

package/src/examples/nested-navigation.tsx

@@ -3,7 +3,7 @@ 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'
+import { TermcastProvider } from 'termcast/src/internal/providers'
 
 function ThirdLevel({ path }: { path: string[] }): any {
   const { pop } = useNavigation()
@@ -109,9 +109,9 @@ function FirstLevel(): any {
 
 function App(): any {
   return (
-    <Providers>
+    <TermcastProvider>
       <FirstLevel />
-    </Providers>
+    </TermcastProvider>
   )
 }
 

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

@@ -26,7 +26,7 @@ test('file picker with autocomplete', async () => {
   expect(initialSnapshot).toMatchInlineSnapshot(`
     "
 
-    ◆  Your Name
+    ◇  Your Name
     │  John Doe
     ◇  Select Files
     │  Enter file path...
@@ -156,16 +156,16 @@ test('file picker with autocomplete', async () => {
     ◆  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"
+    │  │ 📁  bunx-501-create-tui@latest                               │
+    ◇  SelectoSingleeFilenchd.dhqoLtU5Bo                             │
+    │  Enternfilecpath...cache                                       │
+    │  Chooseoexactly one file                                       │
+    │  │    tmp-mount-4o6LgO                                         │
+    └  │ 📁  tmp-mount-oUF2pm                                         │
+       │ 📁  tmp-mount-qehfhV                                         │
+       │    tmp-mount-V0riCs                                         │
+     ↵ submitdob↑↓Pnavigatelog^k─actions─────────────────────────────┘
+         📄  com.adobe.AdobeIPCBroker.ctrl-morse"
   `)
 
   // Test ~ home directory expansion
@@ -225,16 +225,16 @@ test('file picker keyboard navigation', async () => {
 
     ◇  Your Name
     │  John Doe
-    ◇  Select Files
-    │  Enter file path...
-    │  Choose one or more files to upload
-    │
-    ◆  Select Folder
+    ◆  Select Files
     │  .
     │  ┌─────────────────────────────────────────────────────────────┐
     │  │ 📁  .termcast-bundle                                         │
-    ◇  SelectgSinglerFile                                            │
+    ◇  SelectgFolderre                                               │
     │  Enter─file─path...────────────────────────────────────────────┘
+    │  Choose a folder for output
+    │
+    ◇  Select Single File
+    │  Enter file path...
     │  Choose exactly one file
     │
     └
@@ -252,12 +252,12 @@ test('file picker keyboard navigation', async () => {
 
     ◇  Your Name
     │  John Doe
-    ◇  Select Files
-    │  Enter file path...
+    ◆  Select Files
+    │  .
     │  Choose one or more files to upload
     │
-    ◆  Select Folder
-    │  .
+    ◇  Select Folder
+    │  Enter file path...
     │  Choose a folder for output
     │
     ◇  Select Single File
@@ -286,12 +286,12 @@ test('file picker keyboard navigation', async () => {
 
     ◇  Your Name
     │  John Doe
-    ◇  Select Files
-    │  Enter file path...
+    ◆  Select Files
+    │  .s
     │  Choose one or more files to upload
     │
-    ◆  Select Folder
-    │  .s
+    ◇  Select Folder
+    │  Enter file path...
     │  Choose a folder for output
     │
     ◇  Select Single File

package/src/examples/simple-list-search.tsx

@@ -39,6 +39,47 @@ const App: any = () => {
         keywords={['second', 'two', 'secondary']}
         id='item2'
       />
+      {Array.from({ length: 100 }).map((_, i) => (
+        <List.Item
+          key={`random${i + 1}`}
+          title={`Random Item #${i + 1}`}
+          subtitle={`This is randomly generated item ${i + 1}`}
+          keywords={[
+            `random`,
+            `${(i + 1) * 7}`,
+            `foo${(i % 5) + 1}`,
+            `bar${Math.floor(Math.random() * 50)}`,
+          ]}
+          id={`random-item-${i + 1}`}
+          actions={
+            i % 3 === 0 ? (
+              <ActionPanel>
+                <Action
+                  title='Show Details'
+                  onAction={() =>
+                    push(
+                      <Detail
+                        markdown={dedent`
+                                              # Random Item #${i + 1}
+
+                                              This is a dynamically generated random item.
+
+                                              - **Index:** ${i + 1}
+                                              - **Random Keyword:** bar${Math.floor(Math.random() * 99)}
+                                              - **UUID:** random-item-${i + 1}
+
+                                              ---
+                                              _Fun fact: Number ${((i + 1) * 13) % 97} is "randomized"!_
+                                          `}
+                      />,
+                    )
+                  }
+                />
+              </ActionPanel>
+            ) : undefined
+          }
+        />
+      ))}
       <List.Item
         title='Third Item'
         subtitle='This is the third item'

package/src/examples/simple-navigation.tsx

@@ -3,7 +3,7 @@ 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'
+import { TermcastProvider } from 'termcast/src/internal/providers'
 
 function DetailView({ title }: { title: string }): any {
   const { pop } = useNavigation()
@@ -80,9 +80,9 @@ function MainView(): any {
 
 function App(): any {
   return (
-    <Providers>
+    <TermcastProvider>
       <MainView />
-    </Providers>
+    </TermcastProvider>
   )
 }