termcast 1.3.32 → 1.3.34

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

@@ -3,7 +3,7 @@ import { TextareaRenderable } from '@opentui/core'
 import { useForm } from 'react-hook-form'
 import { useKeyboard } from '@opentui/react'
 import { renderWithProviders } from '../../utils'
-import { Theme } from 'termcast/src/theme'
+import { useTheme } from 'termcast/src/theme'
 import { logger } from 'termcast/src/logger'
 import { createTextareaFormRef } from 'termcast/src/components/form/form-ref'
 
@@ -13,6 +13,7 @@ interface FormData {
 }
 
 function RHFCustomRefExample() {
+  const theme = useTheme()
   const textareaRef1 = useRef<TextareaRenderable>(null)
   const textareaRef2 = useRef<TextareaRenderable>(null)
   const [focusedField, setFocusedField] = useState<'username' | 'message'>('username')
@@ -73,14 +74,14 @@ function RHFCustomRefExample() {
 
   return (
     <box flexDirection="column" gap={1}>
-      <text fg={Theme.accent}>React Hook Form with Custom Ref Adapter</text>
-      <text fg={Theme.textMuted}>
+      <text fg={theme.accent}>React Hook Form with Custom Ref Adapter</text>
+      <text fg={theme.textMuted}>
         This example uses register() directly with opentui textarea
       </text>
 
       <box flexDirection="column">
         <text
-          fg={Theme.text}
+          fg={theme.text}
           onMouseDown={() => {
             setFocusedField('username')
           }}
@@ -99,13 +100,13 @@ function RHFCustomRefExample() {
           focused={focusedField === 'username'}
         />
         {formState.errors.username && (
-          <text fg={Theme.error}>{formState.errors.username.message}</text>
+          <text fg={theme.error}>{formState.errors.username.message}</text>
         )}
       </box>
 
       <box flexDirection="column">
         <text
-          fg={Theme.text}
+          fg={theme.text}
           onMouseDown={() => {
             setFocusedField('message')
           }}
@@ -124,28 +125,28 @@ function RHFCustomRefExample() {
           focused={focusedField === 'message'}
         />
         {formState.errors.message && (
-          <text fg={Theme.error}>{formState.errors.message.message}</text>
+          <text fg={theme.error}>{formState.errors.message.message}</text>
         )}
       </box>
 
       <box flexDirection="column" marginTop={1}>
-        <text fg={Theme.textMuted}>Controls:</text>
-        <text fg={Theme.textMuted}>• Ctrl+S: Submit form</text>
-        <text fg={Theme.textMuted}>• Ctrl+V: Set values programmatically</text>
-        <text fg={Theme.textMuted}>• Ctrl+G: Get current values</text>
-        <text fg={Theme.textMuted}>• ESC: Reset form</text>
+        <text fg={theme.textMuted}>Controls:</text>
+        <text fg={theme.textMuted}>• Ctrl+S: Submit form</text>
+        <text fg={theme.textMuted}>• Ctrl+V: Set values programmatically</text>
+        <text fg={theme.textMuted}>• Ctrl+G: Get current values</text>
+        <text fg={theme.textMuted}>• ESC: Reset form</text>
       </box>
 
       <box marginTop={1}>
-        <text fg={Theme.textMuted}>
+        <text fg={theme.textMuted}>
           isDirty: {String(formState.isDirty)} | isValid:{' '}
           {String(formState.isValid)} | submitCount: {formState.submitCount}
         </text>
       </box>
 
       <box marginTop={1} flexDirection="column">
-        <text fg={Theme.accent}>Form values:</text>
-        <text fg={Theme.text}>{JSON.stringify(formValues, null, 2)}</text>
+        <text fg={theme.accent}>Form values:</text>
+        <text fg={theme.text}>{JSON.stringify(formValues, null, 2)}</text>
       </box>
     </box>
   )

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

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { useKeyboard } from '@opentui/react'
+import { useKeyboard, flushSync } from '@opentui/react'
 import { createDescendants } from 'termcast/src/descendants'
 import { renderWithProviders } from 'termcast/src/utils'
 
@@ -45,7 +45,9 @@ function ScrollboxWithDescendants() {
 
     const nextItem = items[nextIndex]
     if (nextItem) {
-      setSelectedIndex(nextIndex)
+      flushSync(() => {
+        setSelectedIndex(nextIndex)
+      })
       scrollToItem(nextItem)
     }
   }

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

@@ -5,7 +5,7 @@ import {
   useDialog,
   type DialogPosition,
 } from 'termcast/src/internal/dialog'
-import { Theme } from 'termcast'
+import { useTheme } from 'termcast'
 import { List } from 'termcast'
 import { ActionPanel, Action } from 'termcast'
 import { Dropdown } from 'termcast'

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

@@ -7,10 +7,15 @@ test('simple scrollbox navigation and scrolling', async () => {
     args: ['src/examples/internal/simple-scrollbox.tsx'],
   })
 
+  // Wait for initial render with Item 1 visible
   await session.text({
-    waitFor: (text) => text.includes('Simple ScrollBox Demo'),
+    waitFor: (text) =>
+      text.includes('Simple ScrollBox Demo') && text.includes('Item 1'),
   })
 
+  // Wait for render to stabilize
+  await session.waitIdle()
+
   const initialText = await session.text()
   expect(initialText).toMatchInlineSnapshot(`
     "
@@ -40,13 +45,13 @@ test('simple scrollbox navigation and scrolling', async () => {
     "
   `)
 
-  // Scroll down to see more items
-  await session.scrollDown(3)
+  // Scroll down to see more items - use more scroll events for reliability
+  await session.scrollDown(5)
 
   // Wait for Item 4 to appear (proves scroll happened)
   const afterScrollDownSnapshot = await session.text({
     waitFor: (text) => text.includes('Item 4'),
-    timeout: 5000,
+    timeout: 10000,
   })
   expect(afterScrollDownSnapshot).toMatchInlineSnapshot(`
     "
@@ -76,13 +81,13 @@ test('simple scrollbox navigation and scrolling', async () => {
     "
   `)
 
-  // Scroll back up
-  await session.scrollUp(2)
+  // Scroll back up - use more scroll events for reliability
+  await session.scrollUp(5)
 
-  // Wait for scrollbar to move back up (proves scroll happened)
+  // Wait for scroll to take effect - Item 4 should no longer be visible
   const afterScrollUpSnapshot = await session.text({
-    waitFor: (text) => text !== afterScrollDownSnapshot,
-    timeout: 5000,
+    waitFor: (text) => !text.includes('Item 4'),
+    timeout: 10000,
   })
   expect(afterScrollUpSnapshot).toMatchInlineSnapshot(`
     "

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

@@ -0,0 +1,28 @@
+// Example: List with controlled searchText (parent manages search state)
+// Used to demonstrate that selection must reset to first visible item
+// when search text changes, even in controlled mode.
+import React, { useState } from 'react'
+import { List, renderWithProviders } from 'termcast'
+
+function ControlledSearchExample() {
+  const [searchText, setSearchText] = useState('')
+
+  return (
+    <List
+      navigationTitle='Controlled Search'
+      searchBarPlaceholder='Search items...'
+      filtering={true}
+      searchText={searchText}
+      onSearchTextChange={setSearchText}
+    >
+      <List.Item id='apple' title='Apple' subtitle='Red fruit' />
+      <List.Item id='banana' title='Banana' subtitle='Yellow fruit' />
+      <List.Item id='cherry' title='Cherry' subtitle='Small fruit' />
+      <List.Item id='grape' title='Grape' subtitle='Purple fruit' />
+      <List.Item id='lettuce' title='Lettuce' subtitle='Green veggie' />
+      <List.Item id='mango' title='Mango' subtitle='Tropical fruit' />
+    </List>
+  )
+}
+
+await renderWithProviders(<ControlledSearchExample />)

package/src/examples/list-controlled-search.vitest.tsx

@@ -0,0 +1,49 @@
+// Repro: controlled searchText + filtering must reset selection to first visible item.
+// Bug: when parent manages searchText, List never calls setSelectedIndex on search change,
+// so the › marker stays on a stale (now-hidden) item or disappears entirely.
+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/list-controlled-search.tsx'],
+    cols: 60,
+    rows: 16,
+  })
+})
+
+afterEach(() => {
+  session?.close()
+})
+
+test('controlled search resets selection to first visible item', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /search items/i.test(text) && text.includes('Apple')
+    },
+  })
+
+  // Navigate down to select Grape (4th item)
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+
+  const beforeSearch = await session.text()
+  expect(beforeSearch).toContain('›Grape')
+
+  // Type "let" — only Lettuce should match.
+  // Selection MUST move to Lettuce (first visible item).
+  await session.type('let')
+
+  const afterSearch = await session.text({
+    waitFor: (text) => {
+      return text.includes('let') && text.includes('Lettuce')
+    },
+  })
+
+  // BUG REPRO: without the fix, › is missing or on a stale item
+  expect(afterSearch).toContain('›Lettuce')
+}, 10000)

package/src/examples/list-detail-metadata.tsx

@@ -11,7 +11,7 @@ const ListDetailMetadataExample = () => {
     >
       <List.Item
         id="item1"
-        title="Item with Metadata"
+        title="Short Values"
         detail={
           <List.Item.Detail
             markdown="# Details"
@@ -29,14 +29,17 @@ const ListDetailMetadataExample = () => {
       />
       <List.Item
         id="item2"
-        title="Another Item"
+        title="Long Values"
         detail={
           <List.Item.Detail
-            markdown="# Info"
+            markdown="# Info with Long Values"
             metadata={
               <List.Item.Detail.Metadata>
-                <List.Item.Detail.Metadata.Label title="Count" text="42" />
-                <List.Item.Detail.Metadata.Label title="Price" text="$99.99" />
+                <List.Item.Detail.Metadata.Label title="Description" text="This is a very long description that would be truncated if shown inline" />
+                <List.Item.Detail.Metadata.Label title="Path" text="/Users/username/Documents/Projects/my-project/src/components" />
+                <List.Item.Detail.Metadata.Separator />
+                <List.Item.Detail.Metadata.Label title="Short" text="OK" />
+                <List.Item.Detail.Metadata.Link title="URL" target="https://example.com/very/long/path/that/exceeds/limit" text="example.com/very/long/path" />
               </List.Item.Detail.Metadata>
             }
           />

package/src/examples/list-detail-metadata.vitest.tsx

@@ -16,7 +16,7 @@ afterEach(() => {
   session?.close()
 })
 
-test('list detail metadata label renders title and text in column layout', async () => {
+test('list detail metadata label renders short values in row layout (key: value)', async () => {
   const snapshot = await session.text({
     waitFor: (text) => {
       return (
@@ -36,24 +36,24 @@ test('list detail metadata label renders title and text in column layout', async
 
        > Search...
 
-      ›Item with Metadata
-       Another Item                         │                                   ▲
-                                            │ ───────────────────────────────── █
-                                            │                                   ▀
-                                            │ Name:
-                                            │ John Doe
+      ›Short Values
+       Long Values                          │
                                             │
-                                            │ Email:
-                                            │ john@example.com
+                                            │
+                                            │ Name:       John Doe
+                                            │
+                                            │ Email:      john@example.com
                                             │ ─────────────────
                                             │
-       ↑↓ navigate   ^k actions             │ Status:                           ▼
+                                            │ Status:     Active
+                                            │ Website:    example.com
+       ↑↓ navigate   ^k actions             │
 
     "
   `)
 }, 10000)
 
-test('list detail metadata navigation shows different metadata', async () => {
+test('list detail metadata renders long values in column layout (key on one line, value below)', async () => {
   await session.text({
     waitFor: (text) => text.includes('Metadata Test'),
   })
@@ -62,7 +62,7 @@ test('list detail metadata navigation shows different metadata', async () => {
 
   const snapshot = await session.text({
     waitFor: (text) => {
-      return text.includes('Count') && text.includes('42')
+      return text.includes('Description') && text.includes('very long')
     },
   })
 
@@ -74,18 +74,18 @@ test('list detail metadata navigation shows different metadata', async () => {
 
        > Search...
 
-       Item with Metadata
-      ›Another Item                         │ Info
-                                            │ ──────────────────────────────────
+       Short Values
+      ›Long Values                          │ Info with Long Values             ▲
+                                            │                                   █
                                             │
-                                            │ Count:
-                                            │ 42
+                                            │ Description:
+                                            │ This is a very long description
+                                            │ that would be truncated if shown
+                                            │ inline
                                             │
-                                            │ Price:
-       ↑↓ navigate   ^k actions             │ $99.99
-
-
-
+                                            │ Path:
+                                            │ /Users/username/Documents/
+       ↑↓ navigate   ^k actions             │ Projects/my-project/src/components▼
 
     "
   `)

package/src/examples/list-dropdown-default.vitest.tsx

@@ -43,9 +43,9 @@ test('dropdown defaults to first item when no value is provided', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^k actions       powered by termcast
-
 
+       ↵ show selected       ↑↓ navigate  ^p dropdown  ^k actionpowered by termcast
+         fruit
 
 
 
@@ -77,6 +77,7 @@ test('dropdown opens and shows items', async () => {
 
 
        Dropdown Default Value Example ───────────────────────────────────────────
+
       ╭──────────────────────────────────────────────────────────────────────────╮
       │                                                                          │
       │   Filter by category                                               esc   │
@@ -88,7 +89,7 @@ test('dropdown opens and shows items', async () => {
       │   Orange                                                                 │
       │   Grape                                                                  │
       │                                                                          │
-      │                                                                          │
+      │                                                                          │t
       │   ↵ select   ↑↓ navigate                            powered by termcast  │
       │                                                                          │
       ╰──────────────────────────────────────────────────────────────────────────╯
@@ -102,7 +103,6 @@ test('dropdown opens and shows items', async () => {
 
 
 
-
     "
   `)
 
@@ -114,6 +114,7 @@ test('dropdown opens and shows items', async () => {
 
 
        Dropdown Default Value Example ───────────────────────────────────────────
+
       ╭──────────────────────────────────────────────────────────────────────────╮
       │                                                                          │
       │   Filter by category                                               esc   │
@@ -125,7 +126,7 @@ test('dropdown opens and shows items', async () => {
       │   Orange                                                                 │
       │   Grape                                                                  │
       │                                                                          │
-      │                                                                          │
+      │                                                                          │t
       │   ↵ select   ↑↓ navigate                            powered by termcast  │
       │                                                                          │
       ╰──────────────────────────────────────────────────────────────────────────╯
@@ -139,7 +140,6 @@ test('dropdown opens and shows items', async () => {
 
 
 
-
     "
   `)
 
@@ -162,9 +162,9 @@ test('dropdown opens and shows items', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^k actions       powered by termcast
-
 
+       ↵ show selected       ↑↓ navigate  ^p dropdown  ^k actionpowered by termcast
+         fruit
 
 
 
@@ -196,6 +196,7 @@ test('clicking dropdown opens it', async () => {
 
 
        Dropdown Default Value Example ───────────────────────────────────────────
+
       ╭──────────────────────────────────────────────────────────────────────────╮
       │                                                                          │
       │   Filter by category                                               esc   │
@@ -207,7 +208,7 @@ test('clicking dropdown opens it', async () => {
       │   Orange                                                                 │
       │   Grape                                                                  │
       │                                                                          │
-      │                                                                          │
+      │                                                                          │t
       │   ↵ select   ↑↓ navigate                            powered by termcast  │
       │                                                                          │
       ╰──────────────────────────────────────────────────────────────────────────╯
@@ -221,7 +222,6 @@ test('clicking dropdown opens it', async () => {
 
 
 
-
     "
   `)
 
@@ -244,9 +244,9 @@ test('clicking dropdown opens it', async () => {
 
 
 
-       ↵ show selected fruit   ↑↓ navigate   ^k actions       powered by termcast
-
 
+       ↵ show selected       ↑↓ navigate  ^p dropdown  ^k actionpowered by termcast
+         fruit
 
 
 

package/src/examples/list-scrollbox.vitest.tsx

@@ -2,8 +2,10 @@ import { test, expect, afterEach, beforeEach } from 'vitest'
 import { launchTerminal, Session } from 'tuistory/src'
 
 let session: Session
+let sessionStartMs = 0
 
 beforeEach(async () => {
+  sessionStartMs = Date.now()
   session = await launchTerminal({
     command: 'bun',
     args: ['src/examples/list-scrollbox.tsx'],
@@ -16,6 +18,18 @@ afterEach(() => {
   session?.close()
 })
 
+test('list scrollbox startup appears in under one second', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Search items\.\.\./i.test(text)
+    },
+    timeout: 5000,
+  })
+
+  const startupMs = Date.now() - sessionStartMs
+  expect(startupMs).toBeLessThan(1000)
+}, 10000)
+
 test('list scrollbox auto-scrolls when navigating down', async () => {
   await session.text({
     waitFor: (text) => {
@@ -33,11 +47,11 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
        > Search items...
 
       ›▲ Item 1 Description for item 1             ▲
-                                                   ▼
-
-       ↑↓ navigate   ^k actions
-
-    "
+       ■ Item 2 Description for item 2             ▀
+       ▲ Item 3 Description for item 3
+       ■ Item 4 Description for item 4
+       ▼ Item 5 Description for item 5
+       ● Item 6 Description for item 6             ▼"
   `)
 
   await session.press('down')
@@ -55,12 +69,12 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
 
        > Search items...
 
-      ›● Item 6 Description for item 6             ▲
-                                                   ▼
-
-       ↑↓ navigate   ^k actions
-
-    "
+       ▲ Item 3 Description for item 3             ▲
+       ■ Item 4 Description for item 4             ▄
+       ▼ Item 5 Description for item 5
+      ›● Item 6 Description for item 6
+       ■ Item 7 Description for item 7
+       ■ Item 8 Description for item 8             ▼"
   `)
 
   await session.press('down')
@@ -76,12 +90,12 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
 
        > Search items...
 
-      ›■ Item 9 Description for item 9             ▲
-                                                   ▼
-
-       ↑↓ navigate   ^k actions
-
-    "
+       ● Item 6 Description for item 6             ▲
+       ■ Item 7 Description for item 7
+       ■ Item 8 Description for item 8             ▄
+      ›■ Item 9 Description for item 9
+       Item 10 Description for item 10
+       ▲ Item 11 Description for item 11           ▼"
   `)
 
   await session.press('up')
@@ -101,12 +115,12 @@ test('list scrollbox auto-scrolls when navigating down', async () => {
 
        > Search items...
 
-      ›■ Item 2 Description for item 2             ▲
-                                                   ▼
-
-       ↑↓ navigate   ^k actions
-
-    "
+       ▲ Item 1 Description for item 1             ▲
+      ›■ Item 2 Description for item 2             ▀
+       ▲ Item 3 Description for item 3
+       ■ Item 4 Description for item 4
+       ▼ Item 5 Description for item 5
+       ● Item 6 Description for item 6             ▼"
   `)
 }, 15000)
 
@@ -127,11 +141,11 @@ test('list scrollbox scrolls with mouse wheel', async () => {
        > Search items...
 
       ›▲ Item 1 Description for item 1             ▲
-                                                   ▼
-
-       ↑↓ navigate   ^k actions
-
-    "
+       ■ Item 2 Description for item 2             ▀
+       ▲ Item 3 Description for item 3
+       ■ Item 4 Description for item 4
+       ▼ Item 5 Description for item 5
+       ● Item 6 Description for item 6             ▼"
   `)
 
   await session.scrollDown(3)
@@ -150,11 +164,11 @@ test('list scrollbox scrolls with mouse wheel', async () => {
        > Search items...
 
        ■ Item 2 Description for item 2             ▲
-                                                   ▼
-
-       ↑↓ navigate   ^k actions
-
-    "
+       ▲ Item 3 Description for item 3             ▄
+       ■ Item 4 Description for item 4
+       ▼ Item 5 Description for item 5
+       ● Item 6 Description for item 6
+       ■ Item 7 Description for item 7             ▼"
   `)
 
   await session.scrollUp(2)
@@ -173,10 +187,10 @@ test('list scrollbox scrolls with mouse wheel', async () => {
        > Search items...
 
       ›▲ Item 1 Description for item 1             ▲
-                                                   ▼
-
-       ↑↓ navigate   ^k actions
-
-    "
+       ■ Item 2 Description for item 2             ▀
+       ▲ Item 3 Description for item 3
+       ■ Item 4 Description for item 4
+       ▼ Item 5 Description for item 5
+       ● Item 6 Description for item 6             ▼"
   `)
 }, 15000)