termcast 1.3.21 → 1.3.25

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

@@ -42,8 +42,8 @@ test('form tagpicker shows inline options', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -51,7 +51,7 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -62,7 +62,8 @@ test('form tagpicker shows inline options', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -75,8 +76,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('space')
@@ -97,8 +97,8 @@ test('form tagpicker shows inline options', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -106,7 +106,7 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -117,7 +117,8 @@ test('form tagpicker shows inline options', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -130,8 +131,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('down')
@@ -152,8 +152,8 @@ test('form tagpicker shows inline options', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -161,7 +161,7 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -172,7 +172,8 @@ test('form tagpicker shows inline options', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -185,8 +186,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('down')
@@ -210,8 +210,8 @@ test('form tagpicker shows inline options', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -219,7 +219,7 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -230,7 +230,8 @@ test('form tagpicker shows inline options', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -243,8 +244,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('enter')
@@ -265,8 +265,8 @@ test('form tagpicker shows inline options', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -274,7 +274,7 @@ test('form tagpicker shows inline options', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -285,7 +285,8 @@ test('form tagpicker shows inline options', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -298,8 +299,7 @@ test('form tagpicker shows inline options', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 15000)
 
@@ -328,8 +328,8 @@ test('form tagpicker keyboard navigation', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -337,7 +337,7 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -348,7 +348,8 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -361,8 +362,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('down')
@@ -386,8 +386,8 @@ test('form tagpicker keyboard navigation', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -395,7 +395,7 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -406,7 +406,8 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -419,8 +420,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('down')
@@ -441,8 +441,8 @@ test('form tagpicker keyboard navigation', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -450,7 +450,7 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -461,7 +461,8 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -474,8 +475,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('up')
@@ -496,8 +496,8 @@ test('form tagpicker keyboard navigation', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -505,7 +505,7 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -516,7 +516,8 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -529,8 +530,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('esc')
@@ -551,8 +551,8 @@ test('form tagpicker keyboard navigation', async () => {
 
 
     ■  TagPicker Component Demo
-    ┃  Test tag picker with multiple selection support
-    ┃
+    │  Test tag picker with multiple selection support
+    │
     ◇  Favorite Sport
     │  Choose your favorite sport...
     │
@@ -560,7 +560,7 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ Football
     │  ○ Tennis
     │  ○ Baseball
-    │  ↑↓ to see more options
+    │  ○ Golf
     │
     │  Select your favorite sport from the list
     │
@@ -571,7 +571,8 @@ test('form tagpicker keyboard navigation', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -584,8 +585,7 @@ test('form tagpicker keyboard navigation', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 15000)
 
@@ -617,16 +617,16 @@ test('form tagpicker with default value', async () => {
     │  Test tag picker with multiple selection support
     │
     ◆  Favorite Sport
-    ┃  Choose your favorite sport...
-    ┃
-    ┃› ○ Basketball
-    ┃  ○ Football
-    ┃  ○ Tennis
-    ┃  ○ Baseball
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Select your favorite sport from the list
-    ┃
+    │  Choose your favorite sport...
+    │
+    │› ○ Basketball
+    │  ○ Football
+    │  ○ Tennis
+    │  ○ Baseball
+    │  ○ Golf
+    │
+    │  Select your favorite sport from the list
+    │
     ◇  Country
     │  Germany
     │
@@ -634,7 +634,8 @@ test('form tagpicker with default value', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -647,8 +648,7 @@ test('form tagpicker with default value', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('space')
@@ -672,16 +672,16 @@ test('form tagpicker with default value', async () => {
     │  Test tag picker with multiple selection support
     │
     ◆  Favorite Sport
-    ┃  Basketball
-    ┃
-    ┃› ● Basketball
-    ┃  ○ Football
-    ┃  ○ Tennis
-    ┃  ○ Baseball
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Select your favorite sport from the list
-    ┃
+    │  Basketball
+    │
+    │› ● Basketball
+    │  ○ Football
+    │  ○ Tennis
+    │  ○ Baseball
+    │  ○ Golf
+    │
+    │  Select your favorite sport from the list
+    │
     ◇  Country
     │  Germany
     │
@@ -689,7 +689,8 @@ test('form tagpicker with default value', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
+    │
     └
 
 
@@ -702,8 +703,7 @@ test('form tagpicker with default value', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 
   await session.press('esc')
@@ -728,16 +728,16 @@ test('form tagpicker with default value', async () => {
     │  Test tag picker with multiple selection support
     │
     ◆  Favorite Sport
-    ┃  Choose your favorite sport...
-    ┃
-    ┃› ○ Basketball
-    ┃  ○ Football
-    ┃  ○ Tennis
-    ┃  ○ Baseball
-    ┃  ↑↓ to see more options
-    ┃
-    ┃  Select your favorite sport from the list
-    ┃
+    │  Choose your favorite sport...
+    │
+    │› ○ Basketball
+    │  ○ Football
+    │  ○ Tennis
+    │  ○ Baseball
+    │  ○ Golf
+    │
+    │  Select your favorite sport from the list
+    │
     ◇  Country
     │  Germany
     │
@@ -745,7 +745,7 @@ test('form tagpicker with default value', async () => {
     │  ○ India
     │  ○ Netherlands
     │  ○ Norway
-    │  ↑↓ to see more options
+    │  ○ Poland
     │
     ▪  Submitted Data
     │  {
@@ -755,6 +755,7 @@ test('form tagpicker with default value', async () => {
     │    ]
     │  }
     │
+    └
 
 
 
@@ -762,7 +763,6 @@ test('form tagpicker with default value', async () => {
 
 
 
-
-     ctrl ↵ submit   ↑↓ navigate   ^k actions"
+     ctrl ↵ submit   tab navigate   ^k actions"
   `)
 }, 15000)

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

@@ -130,6 +130,7 @@ const Menu = ({ children }: { children: React.ReactNode }) => {
             <textarea
               ref={inputRef}
               height={1}
+              wrapMode='none'
               keyBindings={[
                 { name: 'return', action: 'submit' },
                 { name: 'linefeed', action: 'submit' },

package/src/examples/internal/descendants.tsx

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

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

@@ -90,6 +90,7 @@ function RHFCustomRefExample() {
         <textarea
           ref={handleUsernameRef}
           height={1}
+          wrapMode='none'
           placeholder="Enter username..."
           onContentChange={onUsernameChange}
           onMouseDown={() => {
@@ -114,6 +115,7 @@ function RHFCustomRefExample() {
         <textarea
           ref={handleMessageRef}
           height={2}
+          wrapMode='none'
           placeholder="Enter message..."
           onContentChange={onMessageChange}
           onMouseDown={() => {

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

@@ -20,39 +20,15 @@ function ScrollBoxListDemo(): any {
       const selectedItem = itemRefs.current.get(selectedIndex)
 
       if (scrollBox && selectedItem) {
-        // Get the actual item height including padding and margins
-        const itemHeight = selectedItem.height
-
         // Calculate item position in the content
-        // We need the absolute position of the item within the scrollable content
         const itemRelativeTop = selectedItem.y - scrollBox.content.y
-        const itemRelativeBottom = itemRelativeTop + itemHeight
 
         // Get viewport info
         const viewportHeight = scrollBox.viewport.height
-        const currentScrollTop = scrollBox.scrollTop || 0
-
-        // Define safe zone with padding
-        const safePadding = 2
 
-        // Calculate if item is fully visible
-        const itemVisibleTop = itemRelativeTop - currentScrollTop
-        const itemVisibleBottom = itemRelativeBottom - currentScrollTop
-
-        // Check if we need to scroll
-        if (itemVisibleTop < safePadding) {
-          // Item is too close to top or above viewport
-          const newScrollTop = Math.max(0, itemRelativeTop - safePadding)
-          scrollBox.scrollTo(newScrollTop)
-        } else if (itemVisibleBottom > viewportHeight - safePadding) {
-          // Item is too close to bottom or below viewport
-          // Calculate scroll position to show item at bottom with padding
-          const newScrollTop = Math.max(
-            0,
-            itemRelativeBottom - viewportHeight + safePadding,
-          )
-          scrollBox.scrollTo(newScrollTop)
-        }
+        // Scroll so the top of the item is centered in the viewport
+        const targetScrollTop = itemRelativeTop - viewportHeight / 2
+        scrollBox.scrollTo(Math.max(0, targetScrollTop))
       }
     }, 20) // Give enough time for layout
 

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

@@ -23,16 +23,13 @@ function ScrollboxWithDescendants() {
 
     const contentY = scrollBox.content?.y || 0
     const viewportHeight = scrollBox.viewport?.height || 10
-    const currentScrollTop = scrollBox.scrollTop || 0
 
+    // Calculate item position relative to content
     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)
-    }
+    // Scroll so the top of the item is centered in the viewport
+    const targetScrollTop = itemTop - viewportHeight / 2
+    scrollBox.scrollTo(Math.max(0, targetScrollTop))
   }
 
   const move = (direction: -1 | 1) => {

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

@@ -42,13 +42,16 @@ test('simple scrollbox navigation and scrolling', async () => {
   await session.scrollDown(3)
 
   const afterScrollDownSnapshot = await session.text()
+  expect(afterScrollDownSnapshot).not.toEqual(initialText)
   expect(afterScrollDownSnapshot).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,
@@ -62,8 +65,6 @@ test('simple scrollbox navigation and scrolling', async () => {
 
 
     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"
   `)
@@ -72,13 +73,15 @@ test('simple scrollbox navigation and scrolling', async () => {
   await session.scrollUp(2)
 
   const afterScrollUpSnapshot = await session.text()
+  expect(afterScrollUpSnapshot).not.toEqual(afterScrollDownSnapshot)
   expect(afterScrollUpSnapshot).toMatchInlineSnapshot(`
     "
 
 
 
     Simple ScrollBox Demo
-    Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet,   ▀
+                                                                              ▀
+    Item 1 - This is content for item number 1. Lorem ipsum dolor sit amet,
     consectetur adipiscing elit.
 
 
@@ -93,7 +96,6 @@ test('simple scrollbox navigation and scrolling', async () => {
 
 
 
-    Item 4 - This is content for item number 4. Lorem ipsum dolor sit amet,
 
     Use mouse scroll or arrow keys | Press [q] to quit"
   `)